CSS kependekan dari Cascading Style Sheets yang merupakan lembar style atau desain dokumen web. Untuk file CSS lebih efisien dalam menyimpan pekerjaan desain web dokumen karena mampu mengontrol semua dalam satu waktu.
Ada 3 cara menggunakan css:
1. Inline CSS dengan menggunakan atribut style pada elemen tag
2. Internal dengan menggunakan tag style <style> .... </style> yang diletakan didalam tag head
3. Eksternal dengan menggunakan link <link rel="stylesheet" href="url" /> yang diletakan didalam tag head dengan css berada di sebuah file css
Inline CSS
Contoh sintak:
<body style="background: red;">
<h1 style="color: white">Fajar.Im</h1>
</body>
Hasil sintak:
Internal CSS
Contoh sintak:
<!DOCTYPE html>
<html>
<head>
<style>body {
background: red;
}
h1 {
color: white;
}</style>
</head>
<body>
<h1>Fajar.Im</h1>
</body>
</html>
Hasil sintak:
Catatan: Dengan menggunakan interal css ini, kalian tidak perlu mengatur style disetiap tag kali kecuali ingin memberikan perbedaan antar tag
Eksternal CSS
Contoh sintak:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="url-css.css" type="text/css" media="all" />
</head>
<body>
<h1>Fajar.Im</h1>
</body>
</html>
Catatan: Antara internal dan eksternal memiliki kesamaan dari penggunaan. Tapi Ekternal css akan lebih menghemat load data browser karena biasanya browser menyimpan file css tersebut dalam bentuk cache.