Aturan penulisan CSS berisi set intruksi yang memerintahkan browser untuk mengikuti aturan dan mengubah tampilan elemen XHTML berdasarkan pada nilai-nilai yang dibeikan.
1. Inline Style
Dengan menggunakan inline style anda dapat membut dynamic style tanpa harus menambhkan script ke web anda. Inline style merupakan style yang bisa kita pasang pada element web tertentu saja. Metode inline style adalah cara menginput CSS langsung kedalam tag HTML yang diperlukan dengan menggunakan atribut style.
Contoh:
Jika anda ingin menambahkan style pada <H1> dengan warna merah, anda harus mengeset atribut STYLE dari tag <H1>.
<H1 STYLE="color:red">
2. Embeded Style Sheets/Internal Style Sheet
Embeded Style Sheets merupakan suatu aaturan/metode di dalam CSS yang ditanamkan dalam elemen head dari dokumen.. Aturan tersebut hanya berlaku pada dokumen dimana dideklaraasikan. CSS didefinisikan terlebih dahulu dalam tag <style>....</style> di atas tag <body>, pada pendefinisian ini disebut atribut-atribut CSS yang akan digunakan untuk tag-tag HTML yang selanjutnya dapat digunakan oelh tag HTML yang bersangkutan. Setiap tag HTML dapat diberi id, maksudnya id tag pada HTML berguna untuk pemanggil tag tersebut melalui script.
~ Mendeklarasian warna untuk sebuah heading
Dimana "h1" merupakan selector yang digunakan untuk memunculkan property color dengan value "red".
contoh:
<html>
<head>
<style>
h1 {color:red}
</style>
</head>
<body>
<h1> Belajar CSS </h1>
</body>
</html>
<head>
<style>
h1 {color:red}
</style>
</head>
<body>
<h1> Belajar CSS </h1>
</body>
</html>
3. External Style Sheets/Linked Style Sheet
External Style Sheets merupakan metode yang menempatkan aturan CSS secara terpisah, style sheet external terhubung dengan dokumen melalui elemen head. File style sheet text disimpan menggunakan ekstensi ".css"
Contoh:
ket: simpan kode berikut dengan nama style .css
h1 {color:red}
ket. simpan kode berikut dengan nama style .html
<html>
<head>
<title> Contoh Linked Style Sheet</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class='isiteks'> Contoh class </p>
</body>
</html>
ket. simpan kode berikut dengan nama class .html<head>
<title> Contoh Linked Style Sheet</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class='isiteks'> Contoh class </p>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="class.css"/>
</head>
<body>
<p class='isiteks'> contoh class </p>
</body>
</html>
<head>
<link rel="stylesheet" type="text/css" href="class.css"/>
</head>
<body>
<p class='isiteks'> contoh class </p>
</body>
</html>
Semoga bermanfaat artikel yang saya baginkan ini...