FONT STYLING

1. Font-family
Mengatur jenis font yang digunakan
Contoh :
P{
Font-family: ’times new romans’, serif;
}

2. Font-size
Mengatur ukuran font
Contoh :
P{
Font-size: 30px;
}
Satuan :
 px
 %
 Em (1em= 16px)

3. Font-weight
Mengatur ketebalan font
p{
Font-weight: 900;
}
Isinya antara lain :
 Lighter
 Normal
 100 – 900
 Bold
 Bolder

4. Font-variant
Mengubah font menjadi small caps
P{
Font-variant: small-caps;
}
Isi bisa:
 Normal
 Small-caps
Contoh small-caps : HELLO SAYA UPIN

5. Font-style
Mengubah font menjadi cetak miring
P{
Font-style: oblique;
}
Isi bisa :
 Normal
 Italic
 Oblique (memaksa miring)
6. Line-height
Mengatur spasi antar huruf

1
P{
Line-height: 80px;
}
Satuan :
 px
 %
 Em (1em= 16px)

CSS FONT SHORTHAND

Contoh :
Body {
Font : font-style(spasi)font-variant(spasi)font-weight(spasi)font-size/line-height(spasi)font-
family
}
Contoh :
Body {
Font : italic normal bolder 16px/18px ‘times new romans’, serif;
}

2
 CSS BACKGROUND

1. Background-color

Menambahkan background dengan warna solid

Contoh :

Body {
Background-color : red;
}

Isi dapat berupa :

 Nama warna : red

 Bilangan hexadecimal : #ff0000

 Nilai rgb : rgb (255,0,0)

2. Background-image

Menambahkan background berupa gambar

Body {
Background-image : url(nama_file.ekstensi);
}

3. Bachground-position

Mengatur posisi gambar di background

Body {
Background-position : center center;
}

Isi dapat berupa :

 Center center

 Top right

 Button left

 Dll

 X% Y%

 X pos y pos

Aktif apabila background-repeat : no-repeat

3
4. Background-repeat

Mengatur perulangan tampilan gambar pada background

Body {
Background-repeat : no-repeat;
}

Isi dapat berupa :

 Repeat

 No-repeat

 Repeat-x

 Repeat-y

4
 SELECTOR
Fungsi CSS : digunakan pada CSS untuk mengenali sebuah elemen HTML yang akan diberi
Style.
Macam-macam selector :
1. Elemen HTML
2. Id
3. Class
4. Complex selextor
Macam selector dan tanda-tandanya serta artinya :
1. Elemen HTML (selector sederhana)
Contoh :
H1 {
Font-size: 100px;
}

2. Operator koma/’,’
Berarti ‘dan’. Digunakan untuk 2 selector yang memiliki style yang sama.
Contoh :
H3, p {
Font-family: ’times new romans’, serif;
}

3. Operator spasi/’ ’
Berarti ‘yang ada di dalam’. Digunakan untuk selector yang lebih spesifik. Selector lebih
spesifik hasil stylenya akan semakin tepat.
Contoh :
Ol li a {
Color: blue;
}

4. Id
Menggunakan tanda ‘#’. Biasanya dibaca crash atau tanda pagar.
#judul {
Font-size: 50px;
Text-secoration: overline;
}

Keterangan :
a. Sebuah elemen HTML hanya boleh memiliki 1 id
b. Setiap halaman hanya boleh memiliki 1 elemen dengan id tersebut.
c. Dapat digunakan untuk penanda halaman untuk link
d. Digunakan untuk javascript
e. Sebaiknya tidak digunakan untuk CSS

5
5. Class
Menggunakan tanda titik/’.’
Contoh :
.twitter{
Font-weight: 900;
Text.tranform: UPPERCASE;
}

Keterangan :
a. Kelas yang sama dapat digunakan pada beberapa elemen HTML.
b. Satu elemen HTML, boleh memiliki lebih dari 1 Class (dipisahkan dengan spasi)

6. Elemen HTML + Class

Contoh
P.Cetak tebal{
Font-family: ’times new romans’, serif;
Text-align : center;
}

6
 PSEUDO CLASS
Adalah class semu yang dimilliki oleh sebuah elemen HTML, yang membuat kita dapat mendefinisikan
style pada “keadaan tertentu” elemen HTML tersebut.
Ada 4 tipe pseudo-class:
1. Berhubungan dengan link
a. :link
Style default pada sebuah link (a yang memiliki href)
b. :hover
Style ketika kursor mouse berada di atas sebuah link/elemen
c. :active
Style ketika sebuah link di-klik(keadaan aktif)
d. :visited
Style ketika sebuah linksudah pernah dikunjungi sebelumnya (menggunakan browser yang
sama)
2. Berhubungan dengan posisi elemen (1)
a. :first-child
Memilih elemen pertama dari sebuah parent (elemen pembungkus)
b. :last-child
Memilih elemen terakhir dari sebuah parent (elemen pembungkusnya)
c. :nth-child(n)
N bisa berarti memilih elemen ke-n dari dari sebuah parent (elemen pembungkusnya).
N bias berarti urutan ke 1,2,3,4,… atau pola (2n), (3n-1), (4n-1) atau bilangan ganjil (even)
dan bilangan genap (odd)
3. Berhubungan dengan posisi elemen (2)
a. First-of-type
Memilih elemen pertama dari sebuah jenis/tipe tag
b. Last-of-type
Memilih elemen terakhir dari sebuah jenis/tipe tag

7
 CSS
SPECIFICITY

Setiap deklarasi css selector memiliki berat yang berbeda. Berat tersebut menentukan seberapa spesifik sebuah
elemen dapat dipilih oleh selector.

Contoh :

Pada gambar di atas bagian css yang sama, mana yang dieksekusi oleh css ?

Jawabannya :

Bagaimana kalau :

Hasilnya adalah :

Kok bias ???? karena ada cara menghitungnya….

Cara menghitung nilai spesifik

8
Cara menggunakannya :

Nilai 100 lebih besar dari 1, maka yang akan dieksekusi adalah yang pertama.

Contoh lain :

Hasilnya :

Ternyata nasi goring tetap warna hijau, karena :

9
Jadi yang menang adalag yang punya id (yang pertama). Bagaimana cara agar nasi goring agar bisa berwarna
merah ?

 Buat elemen yang diinginkan menjadi lebih berat

 Tambahkan beban pada elemen agar semakin berat

Jadinya :

Hasil CSS-nya :

Alat bantu bisa diakses lewat website :

https://specificity.keegan.st/

10
.

11