Aturan Penggunaan Cascade Style Sheet (CSS)
CSS digunakan untuk mengelola kumpulan style secara terpisah, sehingga manajemen proses menjadi lebih nudah dan efisien. CSS didukung oleh dua browser terpopuler yaitu Explorer dan Navigator.
CSS secara umum disusun
oleh tiga bagian yaitu, selector (elemen yang akan didefinisikan), properti (atribut yang akan diubah) dan dan nilai sebagaimana berikut.
Selector {property: value}
Antara properti dan nilai dipisahkan dengan titik dua seperti contoh dibawah ini:
Body {color: Black}
Jika nilai berupa beberapa kata, gunakan tanda kutip ganda
P {font-family: "sans serif"}
Jika lebih dari satu property pisahkan dengan titik-koma
P {text-align: center; color:red}
Jika ingin lebih mudah dibaca sebagaimana berikut:
P
{
text-align: center;
color: black;
font-family: arial;
}
Jika selector dikelompokan
H1,H2,H3,H4,H5,H6
{
color:green;
}
jika menggunakan atribut class (dalam definisi CSS)
P.kanan {text-align:right}
P.kiri{tex-align: center}
berikut sintaks yang ditulis dalam dokumen html menggunakan definisi di atas
<p class="kanan">This paragraph will be right aligned </p>
<p class="kiri">This paragraph will be center aligned</p>
Jika menggunakan ID atribut
#kanan {text-align: right}
berikut sintaks yang ditulis dalam dokumen html menggunakan definisi ID atribut diatas.
<p id="kanan">This paragraph will be right aligned </p>
<h3 id="kanan">This header will be right aligned too</h3>
Style Sheet External
Berikut contoh menggunakan style sheet yang didefinisikan secara external, dimana exl.css digunakan oleh cssexl.html. Pendefinisian external tidak diperlukan tag html, extention file harus disimpan dalam ".css"
contoh (exl.css)
body [background-color: yellow}
h1 {font-size: 36pt}
h2{color: blue}
p{margin-left: 50px}
contoh (cssexl.html)
<!-cssex.html->
<html>
<body>
<head>
<link rel="stylesheet" type=text/css" href="exl.css">
</head>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph is a left margin of 50 pixel </p>
</body>
</html>
Style Sheet Internal
Style sheet internal digunakan untuk web page tertentu yang lebih unik sehingga membutuhkan definisi terpisah dibanding dengan we page lainya.
Berikut contoh penggunaan style sheet internal pada listing 3.3
listing 3.3
<!-cssint.html
<html>
<body>
<head>
<style types="text/css">
body {background-image: url ("../picture/backgrd.gif")}
hr{color: sienna}
p{font-size: 11pt; margin-left: 15px}
</style>
</body>
<p>This paragraph has a left margin of 15 pixel and font size 11 pt </p>
<hr>
</body>
</html>
Multi Style Sheet
Jika digunakan lebih dari satu definisi dari style sheet maka nilai yang tidak didefinisikan akan diinherit (diturunkan) dari style sheet yang lebih general,
contoh program dijelaskan dalam listing 3.5
Listing 3.5
H3
{
color: red;
text-align: left;
font-size: 8pt;
}
<!cssmulti.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="ex3.css">
<stye types="text/css">
H3
{
text-align: right;
font-size: 20pt;
}
</style>
</head>
<body>
<h3>This header inherit Font Color From ex3.css<h3>
</body>
</html>
Font Attributes
Font attributes dijelaskan tabel 3.6 berikut:
Tabel 3.6 Font Attributes
Background Properties
Background properties dijelaskan tabel 3.7 berikut:
Tabel 3.7 Backgroun Propwrties
Text Properties
Text Properties dijelaskan tabel 3.8 berikut:
Tabel 3.8 Text Properties
CSS digunakan untuk mengelola kumpulan style secara terpisah, sehingga manajemen proses menjadi lebih nudah dan efisien. CSS didukung oleh dua browser terpopuler yaitu Explorer dan Navigator.
CSS secara umum disusun
oleh tiga bagian yaitu, selector (elemen yang akan didefinisikan), properti (atribut yang akan diubah) dan dan nilai sebagaimana berikut.
Selector {property: value}
Antara properti dan nilai dipisahkan dengan titik dua seperti contoh dibawah ini:
Body {color: Black}
Jika nilai berupa beberapa kata, gunakan tanda kutip ganda
P {font-family: "sans serif"}
Jika lebih dari satu property pisahkan dengan titik-koma
P {text-align: center; color:red}
Jika ingin lebih mudah dibaca sebagaimana berikut:
P
{
text-align: center;
color: black;
font-family: arial;
}
Jika selector dikelompokan
H1,H2,H3,H4,H5,H6
{
color:green;
}
jika menggunakan atribut class (dalam definisi CSS)
P.kanan {text-align:right}
P.kiri{tex-align: center}
berikut sintaks yang ditulis dalam dokumen html menggunakan definisi di atas
<p class="kanan">This paragraph will be right aligned </p>
<p class="kiri">This paragraph will be center aligned</p>
Jika menggunakan ID atribut
#kanan {text-align: right}
berikut sintaks yang ditulis dalam dokumen html menggunakan definisi ID atribut diatas.
<p id="kanan">This paragraph will be right aligned </p>
<h3 id="kanan">This header will be right aligned too</h3>
Style Sheet External
Berikut contoh menggunakan style sheet yang didefinisikan secara external, dimana exl.css digunakan oleh cssexl.html. Pendefinisian external tidak diperlukan tag html, extention file harus disimpan dalam ".css"
contoh (exl.css)
body [background-color: yellow}
h1 {font-size: 36pt}
h2{color: blue}
p{margin-left: 50px}
contoh (cssexl.html)
<!-cssex.html->
<html>
<body>
<head>
<link rel="stylesheet" type=text/css" href="exl.css">
</head>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph is a left margin of 50 pixel </p>
</body>
</html>
Style Sheet Internal
Style sheet internal digunakan untuk web page tertentu yang lebih unik sehingga membutuhkan definisi terpisah dibanding dengan we page lainya.
Berikut contoh penggunaan style sheet internal pada listing 3.3
listing 3.3
<!-cssint.html
<html>
<body>
<head>
<style types="text/css">
body {background-image: url ("../picture/backgrd.gif")}
hr{color: sienna}
p{font-size: 11pt; margin-left: 15px}
</style>
</body>
<p>This paragraph has a left margin of 15 pixel and font size 11 pt </p>
<hr>
</body>
</html>
Multi Style Sheet
Jika digunakan lebih dari satu definisi dari style sheet maka nilai yang tidak didefinisikan akan diinherit (diturunkan) dari style sheet yang lebih general,
contoh program dijelaskan dalam listing 3.5
Listing 3.5
H3
{
color: red;
text-align: left;
font-size: 8pt;
}
<!cssmulti.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="ex3.css">
<stye types="text/css">
H3
{
text-align: right;
font-size: 20pt;
}
</style>
</head>
<body>
<h3>This header inherit Font Color From ex3.css<h3>
</body>
</html>
Font Attributes
Font attributes dijelaskan tabel 3.6 berikut:
Tabel 3.6 Font Attributes
Background Properties
Background properties dijelaskan tabel 3.7 berikut:
Tabel 3.7 Backgroun Propwrties
Text Properties
Text Properties dijelaskan tabel 3.8 berikut:
Tabel 3.8 Text Properties
