Struktur CSS Penulisan CSS Selector Memformat Dokumen dengan CSS

{ Keuntungan menggunakn CSS yaitu jika kita ingin mengubah format dokumen, maka tidak perlu mengedit satu persatu. Penggunaan CSS ada dua cara yaitu dengan menyisipkan kode CSS langsung dalam kode HTML atau simpan file tersendiri berekstensi “ .css”. dengan menyimpan sebagai file tersendiri akan lebih memudahkan untuk mengontrol tampilan dalam banyak dokumen secara langsung. CSS mendapat dukungan penuh pada browser versi 4 empat dan pada versi sebelumnya. Perlu diketahui bahwa tampilan CSS dapat berbeda bila ditampilkan pada menu browser yang berbeda pula.

2.6.1 Struktur CSS

Perintah css terdiri atas 2 komponen, yakni Selector dan Declaration. 1. Selector berfungsi untuk memberi tahu web browser bahwa pada elemen mana aturan css akan diterapkan. Selector dapat berupa nama tag, selector class atau selector id 2. Declaration merupakan aturan css yang diterapkan yang mana terdiri atas property dan value

2.6.2 Penulisan CSS

CSS juga memiliki aturan-aturan penulisan yaitu : 1. Internal Style Internal style dengan menggunakan tag style dan diletakkan diantara tag head. Universitas Sumatera Utara { html head titleCSStitle style h1 { color : blue; } style head html Internal style tidak harus selalu diletakkan diantara tag head. Kita selalu bisa meletakkan diantara tag lain yang ada didalam tag body. Namun untuk menciptakan kode yang lebih bersih dan terstruktur dengan baik, css biasa diletakkan diantara tag head. 2. Inline Style Inline style dengan menambahkan langsung kode css kedalam tag html sebagai attribut. h1 style=”color:blue;”Judul Satuh1 3. External Style External style dengan menggunakan tag link yang diletakkan diantara tag head dan merujuk keberkas css. html head titleCSStitle link href=”style.css” rel=”stylesheet” head body Universitas Sumatera Utara {

2.6.3 Selector

Seperti sudah disebutkan sebelumnya, selector dapat berupa nama tag, selector class atau selector id. Berikut ini adalah contoh penggunaan selector dalam css. html head titleBelajar Selectortitle style h1 { color: blue; } .judul { color: red; } satu { color: green; } style head body h1Selector Tagh1 h1 class=judulSelector Classh1 h1 id=satuSelector Idh1 head html Universitas Sumatera Utara {

2.6.4 Memformat Dokumen dengan CSS

Memformat dokumen dengan css jauh lebih fleksibel dibandingkan dengan menggunakan tag html saja. html head titleFormat CSStitle style type=textcss body { background-color:yellow; } h1 { color:blue; text-align:center; } b { font-weight:normal; } i { font-style:normal; } u { text-decoration:none; } Universitas Sumatera Utara { b, i { color:green; } style head body bgcolor=green h1DOKUMEN HTMLh1 bPemrograman Webb br iPemrograman Webi br uPemrograman Webu body html

2.7 Flowchart