Styling dapat ditambahkan ke elemen HTML dalam 3 cara:
- Inline - menggunakan atribut gaya elemen HTML
- Internal - menggunakan <style> elemen dalam HTML <head>
- Eksternal - menggunakan satu atau lebih file CSS eksternal
CSS Syntax
Styling CSS memiliki sintaks berikut:
element { property : value; property:value }
Beberapa gaya dipisahkan dengan titik koma.
Inline Styling (Inline CSS)
Styling inline berguna untuk menerapkan gaya yang unik untuk elemen HTML:Styling inline menggunakan atribut style.
Styling inline ini mengubah warna teks dari judul tunggal:
Contoh
<h1 style="color:blue">This is a Blue Heading</h1>
Styling internal (Internal CSS)
Style sheet internal dapat digunakan untuk menentukan gaya yang umum untuk semua elemen HTML pada halaman.Styling internal didefinisikan dalam <head> dari halaman HTML, menggunakan <style> elemen:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Styling eksternal (External CSS)
Style sheet eksternal yang ideal ketika gaya yang diterapkan pada banyak halaman.Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web dengan mengubah satu file.
Gaya eksternal didefinisikan dalam file CSS eksternal, dan kemudian dihubungkan dengan di <head> bagian halaman HTML:
Contoh
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Fonts
Properti warna CSS mendefinisikan warna teks yang akan digunakan untuk elemen HTML.Properti CSS font-family mendefinisikan font yang akan digunakan untuk elemen HTML.
Properti CSS font-size mendefinisikan ukuran teks yang akan digunakan untuk elemen HTML.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Box Model
Setiap elemen HTML memiliki sebuah kotak di sekitarnya, bahkan jika Anda tidak dapat melihatnya.Properti border CSS mendefinisikan perbatasan terlihat di sekeliling elemen HTML:
Contoh
p {
border:1px solid black;
}
border:1px solid black;
}
Contoh
p {
border:1px solid black;
padding:10px;
}
border:1px solid black;
padding:10px;
}
Contoh
p {
border:1px solid black;
padding:10px;
margin:30px;
}
border:1px solid black;
padding:10px;
margin:30px;
}
| Contoh CSS atas penggunaan px untuk menentukan ukuran dalam piksel. |
Id Atribut
Semua contoh di atas menggunakan CSS untuk gaya elemen HTML pada umumnya.Untuk menentukan gaya khusus untuk satu elemen khusus, pertama menambahkan atribut id ke elemen:
Contoh
<p id="p01">I am different</p>
Contoh
p#p01 {
color:blue;
}
color:blue;
}
Kelas Atribut
Untuk menentukan gaya untuk jenis khusus (kelas) dari unsur, menambahkan atribut kelas untuk elemen:Contoh
<p class="error">I am different</p>
Contoh
p.error {
color:red;
}
color:red;
}
