web css

CSS

Cascade Style Sheet

Materi

Cascade Style Sheet

Cascade Style Sheet Internal

Cascade Style Sheet External

Cascade Style Sheet Inline

Cascade Style Sheet Multiple

Bahasa Pemrograman Berbasis Web I

154 154

PERTEMUAN KE-6 :

CASCADE STYLE SHEET

6.1 PENGANTAR

Cascade Style Sheet merupakan hal atau fitur baru dari HTML.

Kemunculan CSS ini dikarenakan perkembangan HTML yang

menjadi kurang praktis dibebani oleh hal – hal yang berkaitan dengan

faktor tampilan, misalkan : tulisan font dan lain sebagaianya.

Untuk itu jika kumpulan style dikelola secara terpisah,

manajemen page menjadi lebh mudah dan efisien. Pada umumnya

CSS ini didukung oleh dua browser web yang sudah populer di dunia

maya, yaitu : Internet Explore dan Mozilla.

Cascade Style Sheet memiliki aturan penggunaan dan terdiri

dari tiga jenis, yaitu :

1. Cascade Style Sheet Internal

2. Cascade Style Sheet External

3. Cascade Style Sheet Inline

4. Cascade Style Sheet Multiple

6.2 ATURAN PENGGUNAAN CSS

Secara umum disusun oleh tiga bagian, yaitu : selector,

properti, dan nilai. Selector adalah elemen yang akan didefinisikan,


155 155

Properti adalah attribut yang akan diubah, dan Nilai merupakan

pemberian harga pada property tersebut.

Sebagai contoh untuk bentuk penulisannya sebagai berikut :

Selector {property : value}

Penjelasan :

Selector : merupakan pemberian nama variabel untuk

mengidentifikasi Cascade Style Sheetnya.

Property : merupakan sebuah attribut yang akan menjadi sebuah

Cascade Style Sheet.

Value : merupakan pemberian nilai atau harga pada sebuah

attribut yang terdapat pada property

Salah satu contohnya, bila ingin memberikan sebuah warna

latar belakang pada body dapat pula dilakukan dengan menggunakan

Cascade Style Sheet seperti berikut :

Body{color:green}


156 156

Dari contoh diatas telah dapat dimengerti bahwa, Body

merupakan Selectornya, Color sebagai property-nya, dan Green

adalah nilai dari property tersebut.

Contoh berikutnya lebih baik langsung diterapkan kedalam

sebuah kasus agar lebih dapat dipahami dengan mudah. Contoh –

contoh kasus tersebut akan dituangkan dalam jenis – jenis CSS berikut

ini.

6.3 STYLE SHEET INTERNAL

Style Sheet Internal merupakan style sheet yang didefiniskan

di dalam dokumen HTML. Bentuk penulisan dan penerapannya

sebagai berikut :

<html>

<head> <title>Membuat CSS Internal</title>

<style type=”text/css”>

<!- -

H1 { Font-family:”jokerman”;font-size:20pt;font-weight:bold;

Color:”purple”

H2 { Font-family:”comic sans ms”;font-size:14pt;font-weight:bold;

Color:”blue”

}

-->

</style>


157 157

</head>

<body>

<h1>Contoh penggunaan Cascade Style Sheet

Internal</h1><hr>

<h2> Cascade Style Sheet terdiri dari tiga jenis, yaitu :

Cascade Style Sheet Internal, Cascade Style Sheet External, dan

Cascade Style Sheet Multiple.

</h2>

</body>

</html>

Hasil tampilan pada saat kode program dijalankan pada

sebuah browser web :

Gambar 6.1 Hasil tampilan contoh_css_internal.htm

6.4 STYLE SHEET EXTERNAL

Style Sheet external adalah style sheet yang didefinisikan

secara terpisah dalam file tersendiri. Dikarenakan pendefinisian file


158 158

terpisah, maka harus diberikan ekstensi penyimpanannya dengan

diakhiri .css ( contoh : external.css ) dan tidak perlu didefinisikan di

dalam tag HTML. Sedangkan untuk dokumen HTML-nya harus

dihubungkan menggunakan sebuah link untuk mengakses atau

memanggilnya.

Sebagai contoh sederhana untuk mempraktikkan Cascade Style

Sheet External dapat dicoba dengan mengetikkan kode program

berikut ini :

H1 {

Font-family:”comic sans ms”;font-size:16pt;font-weight:bold;

Color:”blue”}

P {

Font-family:”monotype corsiva”;font-size:12pt;font-weight:bold;

Color:”red”;text-align:”justify”

}

Kemudian silahkan disimpan dengan nama external.css

Lalu ketikkan kode program untuk membuat dokumen HTML

berikut ini dan simpan dengan nama contoh_css_external.htm agar

dapat memanggil Cascade Style Sheet yang telah dibuat terpisah tadi.


159 159

<html>

<head>

<title>Membuat CSS External</title>

<link rel=”” type=”text/css” href=”external.css”>

</head>

<body>

<h1>Contoh penggunaan Cascade Style Sheet External</h1>

<p> Style Sheet external adalah style sheet yang didefinisikan

secara terpisah dalam file tersendiri. Dikarenakan pendefinisian file

terpisah, maka harus diberikan ekstensi penyimpanannya dengan

diakhiri .css ( contoh : external.css ) dan tidak perlu didefinisikan di

dalam tag HTML. Sedangkan untuk dokumen HTML-nya harus

dihubungkan menggunakan sebuah link untuk mengakses atau

memanggilnya.</p>

</body>

</html>

Hasil tampilan pada saat dijalankan pada browser web seperti ini :


160 160

Gambar 6.2 Hasil tampilan contoh_css_external.htm

6.5 STYLE SHEET INLINE

Style Sheet Inline tentunya tidaklah sama dengan Style Sheet

External maupun Style Sheet Internal, melainkan Style Sheet Inline

didefiniskan secara langsung pada tag BODY.

Penggunaan Style Sheet Inline ini sangat berpengaruh pada

beasaran byte penyimpanan data yang digunakan. Bentuk penulisan

dan penerapannya sebagai berikut :

<html>

<head>

<title>Membuat CSS Inline</title>

</head>

<body>

<h1 style=“font-family:arial;font-

size=20pt;color=red”>Contoh penggunaan Cascade Style Sheet

External</h1>

<p style=“font-family:comic sans ms;font-

size:12pt;color:blue”> Style Sheet Inline tentunya tidaklah sama

dengan Style Sheet External maupun Style Sheet Internal, melainkan

Style Sheet Inline didefiniskan secara langsung pada tag BODY.</p>

</body>

</html>


161 161

Hasil tampilan yang diperoleh dari kode program adalah

sebagai berikut :

Gambar 6.3 Hasil tampilan contoh_css_inline.htm

6.6 MULTIPLE STYLE SHEET

Multiple Style Sheet adalah Style Sheet yang digunakan

secara bersama dalam pendefinisiannya, dalam arti perpaduan baik

Style Sheet Internal maupun Style Sheet External menjadi satu dalam

dokumen HTML. Namun, hanya saja bila penggunaan lebih dari satu,

maka akan didefinisikan secara umum.


162 162

Berikut ini contoh Style Sheet External yang akan digunakan

untuk Multiple Style Sheet yang disimpan dengan nama

multiple.css :

H1 {

Font-family:”jokerman”;font-size:16pt;font-weight:bold;

Color:”green”}

H2 {

Font-family:”monotype corsiva”;font-size:16pt;font-weight:bold;

Color:”blue”

}

Setelah selesai membuat Cascade Style Sheet Externalnya,

silahkan dilanjutkan untuk membuat dokumen HTML seperti pada

contoh_css_multiple.htm berikut ini :

<html>

<head>

<title>Membuat CSS Multiple</title>

<link rel=”” type=”text/css” href=”multiple.css”>


<!- -

H2 { Font-family:”monotype corsiva”;font-size:10pt;font-

weight:bold;


163 163

Color:”purple”

}

-->

</style>

</head>

<body>

<h1>Contoh penggunaan Cascade Style Sheet External</h1>

<h2> Multiple Style Sheet adalah Style Sheet yang digunakan





</h2>

</body>

</html>

Hasil tampilan yang diperoleh pada browser web pada saat

dijalankan :

Gambar 6.4 Hasil tampilan contoh_css_multiple.htm


164 164

6.7 RANGKUMAN

Cascade Style Sheet memiliki aturan penggunaan dan terdiri

dari tiga jenis, yaitu :

1. Cascade Style Sheet Internal

2. Cascade Style Sheet External

3. Cascade Style Sheet Inline

4. Cascade Style Sheet Multiple

Bentuk penulisan untuk membuat sebuah Cascade Style Sheet seperti

berikut :

Selector {property : value}

Penjelasan :

Selector : merupakan pemberian nama variabel untuk

mengidentifikasi Cascade Style Sheetnya.


165 165

Property : merupakan sebuah attribut yang akan menjadi sebuah

Cascade Style Sheet.

Value : merupakan pemberian nilai atau harga pada sebuah

attribut yang terdapat pada property

Salah satu contohnya, bila ingin memberikan sebuah warna

latar belakang pada body dapat pula dilakukan dengan menggunakan

Cascade Style Sheet seperti berikut :

Body{color:green}

Dari contoh diatas telah dapat dimengerti bahwa, Body

merupakan Selectornya, Color sebagai property-nya, dan Green

adalah nilai dari property tersebut.

Style Sheet Internal merupakan style sheet yang didefiniskan

di dalam dokumen HTML.

Style Sheet external adalah style sheet yang didefinisikan

secara terpisah dalam file tersendiri. Ekstensi penyimpanan file

diakhiri dengan .css ( contoh : external.css ) dan tidak perlu

didefinisikan di dalam tag HTML. Sedangkan untuk dokumen HTML-

nya harus dihubungkan menggunakan sebuah link untuk mengakses

atau memanggilnya.


166 166

Style Sheet Inline didefiniskan secara langsung pada tag

BODY. Penggunaan Style Sheet Inline ini sangat berpengaruh pada

beasaran byte penyimpanan data yang digunakan.

Multiple Style Sheet adalah Style Sheet yang digunakan





167 167

6.8 LATIHAN

1. Buatlah sebuah Cascade Style Sheet Internal seperti kode

program dibawah ini !

<html>

<head>

<title>Membuat CSS Internal</title>




</style>

</head>

<body>

<h1>Contoh penggunaan Cascade Style Sheet

Internal</h1><hr>

<p> Cascade Style Sheet terdiri dari tiga jenis, yaitu :

Cascade Style Sheet Internal, Cascade Style Sheet External, dan

Cascade Style Sheet Multiple.


168 168

</p>

</body>

</html>

2. Buatlah sebuah dokumen HTML yang digunakan untuk

memanggil Cascade Style Sheet External dari kode program

dibawah ini !


Color:”purple”

P { Font-family:”comic sans ms”;font-size:12pt;font-weight:bold;

Color:”blue”; text-align:“justify”

}

HR {color=“siena”}

A:link {color:“green”}

A:visited{color:“purple”}

A:active {color:“brown”}

3. Buatlah sebuah Cascade Style Sheet Multiple gabungan dari soal

nomor 1 dan nomor 2 !


169 169

Jawaban :

1. Hasil tampilan dari kode program yang diberikan pada soal nomor 1

sebagai berikut :

2. Untuk membuat sebuah dokumen HTML Cascade Style Sheet

External, maka diasumsikan CSS disimpan dengan

external2.htm, kemudian di buat kode program dokumen

HTMLnya sebagai berikut :

<html>

<head>

<title>Membuat CSS Internal</title>

<link rel="stylesheet" type="text/css" href="external2.css">

</head>


170 170

<body>

<h1>Si Sopir MAUT XENIA</h1><hr>

<p> Sungguh mengenaskan sudah 11 hari yang lalu kejadian maut

yang menimpa 9 pejalan kaki di Tugu Tani Jakarta.

Raut muka "si pencabut nyawa" tampak seolah biasa dan tidak ada

penyesalan. Diperkirakan dia menyetir dalam kondisi "nge-fly"

setelah pesta di beberapa Cafe bersama ketiga kawannya.

</p>

<a href="http://www.modulweb2.blogspot.com">Mengunduh buku

ajar</a>

</body>

</html>

Hasil dari kode program tersebut adalah sebagai berikut :

3. Cascade style sheet multiple :

<html>

<head>

<title>Membuat CSS Multiple</title>

171 171

<link rel="stylesheet" type="text/css" href="external2.css">

<style type="text/css">



</style>

</head>

<body>

<h1>Si Sopir MAUT XENIA</h1><hr>

<p> Sungguh mengenaskan sudah 11 hari yang lalu kejadian

maut yang menimpa 9 pejalan kaki di Tugu Tani Jakarta.

Raut muka "si pencabut nyawa" tampak seolah biasa dan tidak

ada penyesalan. Diperkirakan dia menyetir dalam kondisi "nge-

fly" setelah pesta di beberapa Cafe bersama ketiga kawannya.

</p>

<a href="http://www.modulweb2.blogspot.com">Mengunduh

buku ajar</a>

</body>

</html>

Dan hasil dari kode program perpaduan antara Cascade Style

Sheet Internal dan External sebagai berikut :


172 172

web css

Documents