Apa itu CSS?
CSS adalah singkatan dari C ascading S tyle S heets
CSS menjelaskan bagaimana elemen HTML akan ditampilkan
Contoh CSS
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
Klik tombol "Coba Sendiri" untuk melihat cara kerjanya.
Sintaks CSS
Aturan CSS terdiri dari pemilih dan blok deklarasi :
Pemilih menunjuk ke elemen HTML ke gaya (h1).
Blok deklarasi (dalam kurung kurawal) berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma.
Setiap deklarasi menyertakan nama properti CSS dan nilai, dipisahkan oleh titik dua.
Dalam contoh berikut, semua elemen <p> akan rata tengah, berwarna merah dan memiliki ukuran font 32 piksel:
Contoh
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
Contoh yang sama juga dapat ditulis seperti ini:
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
Lembar Gaya Eksternal
Lembar gaya CSS dapat disimpan dalam file eksternal :
gayaku.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
Lembar gaya eksternal ditautkan ke halaman HTML dengan tag <link> :
Contoh
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
Gaya Sebaris
Contoh
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
Urutan bertingkat
Jika gaya yang berbeda ditentukan untuk elemen HTML, gaya akan mengalir ke gaya baru dengan prioritas berikut:
- Prioritas 1: Gaya sebaris
- Prioritas 2: Lembar gaya eksternal dan internal
- Prioritas 3: Peramban bawaan
- Jika gaya yang berbeda ditentukan pada tingkat prioritas yang sama, yang terakhir memiliki prioritas tertinggi.
Contoh
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
Demo CSS - Satu Halaman HTML - Berbagai Gaya!
Di sini kita akan menampilkan satu halaman HTML yang ditampilkan dengan 4 stylesheet yang berbeda.
Klik pada tombol Stylesheet (1-4) juga melihat halaman yang ditampilkan dengan gaya yang berbeda.
Tutorial CSS Lengkap
Demikian penjelasan singkat tentang CSS.
Untuk tutorial CSS lengkap, buka Tutorial CSS W3Schools .
Untuk referensi CSS lengkap, buka Referensi CSS W3Schools .