Pertemuan 4 Mengatur Tampilan Han Dengan CSS3

Pertemuan 4

Mengatur Tampilan Halaman Dengan CSS3

Web Statis
SKB112316

Oleh : Wahyu Widodo

Pengertian CSS
Merupakan standard pembuatan dan pemakaian style untuk dokumen terstruktur , guna
mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas
sehingga tidak terjadi pengulangan tulisan.

Fakta Menggunakan CSS :
Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browserbrowser lama.
Lebih fleksibel dalam penempatan posisi layout
Menjaga HTML dalam penggunaan tag yang minimal
.

Terdapat 3 Cara Menginputkan CSS ke HTML :

Metode Inline Style

Metode Internal Style Sheets

Metode External Style Sheets

Pengertian Selector, Property dan Value
Selector adalah elemen/tag HTML yang ingin diberi style.
Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text,
warna background, jarak antar elemen, garis pinggir dan lain sebagainya.

5 Jenis Selector CSS
1. Universal Selector adalah sebuah pola (pattern) yang digunakan untuk ‘mencari’ suatu
tag di dalam HTML.
Contoh :
* {
color: blue;
background-color: white;}
}
2. Element Type Selector atau Tag Selector adalah istilah untuk selector yang nilainya

adalah tag HTML itu sendiri.
Contoh :
h1 {
text-decoration: underline;
}
p {
font-size:14px;
}

3. Class Selector.
Class Selector akan ‘mencari’ seluruh tag yang memiliki atribut class dengan nilai yang
sesuai.
Contoh :
.

paragraf_pertama {
color: red;
}

.judul {

font-size:20px
}
Implementasi pada HTML :
Ini adalah sebuah paragraf
pertama
Judul Artikel

4. ID Selector
Penggunaannya mirip dengan class selector.
Contoh :
#paragraf_ pembuka {
color: red;
}
#judul utama {
font-size:20px
}
Implementasi pada HTML :
Ini adalah sebuah paragraf
pembuka
Judul Artikel

5. Attribute selector
Selector ini akan mencari seluruh tag yang memiliki atribut yang dituliskan.
Contoh :
[href] {
font-size:20px ;
}
[type="submit"] {
width:30px;
}

Latihan Penggunaan Selector CSS
Siapkan HTML Dummy berikut :

Buat Tag h2 berwarna biru :
h2 {
color: blue;
}
Buat Tag Strong berwarna merah :
strong {

color:red;
}
Bagaimana caranya kalo hanya tag strong yang ada di dalam tag saja ?