Style pada HTML

Zencliv
3 Apr, 2023
HTML Styles

Ketika membuat suatu halaman website, kita pasti menginginkan webpage yang kita buat hasilnya indah. Namun, apakah hanya menggunakan HTML saja cukup? Tidak, HTML hanya membuat struktur bagian dari suatu webpage. Untuk membuat webpage yang indah, diperlukan adanya styling / pemberian gaya pada elemen-elemen HTML.

Untuk memberikan gaya pada elemen HTML, maka diperlukanlah CSS. CSS merupakan singkatan dari Cascading Style Sheets, ini merupakan bahasa yang digunakan untuk memberikan gaya pada HTML. Kita bisa menggunakan CSS untuk mengatur warna, posisi, ukuran, dan lain sebagainya kepada elemen-elemen HTML.

Contoh dokumen HTML tanpa styling:

<!DOCTYPE html>
<html>

<head>
    <title>HTML Without Styles</title>
</head>

<body>
    <h1>Apa Itu Website?</h1>
    <p>Website atau situs web adalah sekumpulan informasi yang dapat diakses secara publik melalui internet maupun
        secara lokal.</p>
</body>

</html>

Output dalam web browser:

HTML Without Styles

Contoh dokumen HTML dengan styling:

<!DOCTYPE html>
<html>

<head>
    <title>HTML With Styling</title>
</head>

<body>
    <h1 style="text-align: center; color: blue;">Apa Itu Website?</h1>
    <p style="text-align: center; font-size: 22px;">Website atau situs web adalah sekumpulan informasi yang dapat
        diakses secara publik melalui internet maupun secara lokal.</p>
</body>

</html>

Output Dalam Web Browser:

HTML With Styles

Tentunya akan lebih keren bukan bila kita menerapkan styling ke dalam dokumen HTML kita. Dalam HTML sendiri, kita bisa menggunakan atribut style untuk menerapkan styling pada elemen yang diinginkan.

Atribut style

Menerapkan gaya pada elemen HTML dapat menggunakan atribut style yang diterapkan pada elemen HTML yang diinginkan. Contoh penerapan style pada elemen HTML yaitu sebagai berikut: 

<h1 style="color: #ff0000;">Let's Learn HTML With Zencliv</h1>

Format penulisan style sesuai dengan format dalam CSS, dimana kita harus mendeklarasikan properti dan memberikan nilai pada properti tersebut.

Style Writing Format

Property dan value merupakan bagian dari CSS. Jika salah dalam penulisan property, atau salah dalam pengisian value, maka styling tidak akan diterapkan.

Contoh Implementasi Styling

Text Color

Mengubah warna teks dapat dilakukan menggunakan properti color 

<p style="color: #0000ff;">Text color implementation</p>

Output Dalam Web Browser:

Text Color Implementation

Text Alignment

Perataan teks dapat diatur menggunakan properti text-align 

<h2 style="text-align: center;">Text Alignment Implementation</h2>
<p style="text-align: right;">Ini contoh paragraf yang menggunakan teks rata kanan.</p>

Output Dalam Web Browser:

Text Alignment Implementation

Font Size

Untuk mengatur ukuran font, kita dapat menggunakan properti font-size 

<p>Paragraf tanpa styling.</p>
<p style="font-size: 30px;">Paragraf yang ukuran teksnya diatur.</p>

Output Dalam Web Browser:

Font Size Implementation

Background Color

Kita bisa menggunakan properti background-color untuk mengatur warna background 

<h1 style="background-color: yellow;">Heading dengan background color</h1>
<h2>Saya suka warna <span style="background-color: pink;">pink</span></h2>

Output Dalam Web Browser:

Background Color Implementation
Next Post Previous Post
No Comment
Add Comment
comment url