Scribd
Unggah
63 tayangan3 halaman

Kelas Dicoding CSS

ID selector digunakan untuk menargetkan elemen berdasarkan nilai atribut id. Atribut id dapat diterapkan pada seluruh elemen HTML dan sering digunakan untuk memberikan arti pada elemen generik seperti <div> dan <span>. Attribute selector menargetkan elemen berdasarkan atributnya, sementara universal selector dapat diterapkan pada seluruh elemen. Terdapat berbagai kombinator yang dapat digunakan untuk menggabungkan selector dasar."

Diunggah oleh

Chrisna Dwipayana IV
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai TXT, PDF, TXT atau baca online di Scribd
63 tayangan3 halaman

Kelas Dicoding CSS

ID selector digunakan untuk menargetkan elemen berdasarkan nilai atribut id. Atribut id dapat diterapkan pada seluruh elemen HTML dan sering digunakan untuk memberikan arti pada elemen generik seperti <div> dan <span>. Attribute selector menargetkan elemen berdasarkan atributnya, sementara universal selector dapat diterapkan pada seluruh elemen. Terdapat berbagai kombinator yang dapat digunakan untuk menggabungkan selector dasar."

Diunggah oleh

Chrisna Dwipayana IV
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai TXT, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 3

ID Selector

ID selector menetapkan target elemen berdasarkan nilai dari atribut id yang


diterapkan pada elemennya. Sama seperti class, atribut id dapat diterapkan
pada seluruh elemen HTML, dan kebanyakan atribut ini digunakan untuk memberikan
sebuah arti pada generic element seperti <div> dan <span>.

Untuk menetapkan selector dengan menggunakan id, kita gunakan tanda octothorpe
(#) atau lebih familiar disebut dengan hash.

Attribute Selector
Attribute selector merupakan cara menetapkan target elemen berdasarkan
sebuah atribut yang digunakan atau bahkan bisa lebih spesifik dengan nilainya.

Universal Selector
Universal selector digunakan untuk diterapkan pada seluruh elemen.
Tetapi selector ini juga bisa secara spesifik menargetkan sebuah elemen dengan
menggabungkan bersama selector yang lainnya. pake (*)

"Combinator"
Ada empat kombinator yang dapat kita gunakan yaitu:

Adjacent Sibling Selector,


Adjacent Sibling Selector menggabungkan dua buah
basic selector dengan menggunakan tanda + di antara keduanya

General Sibling Selector,


Mirip seperti Adjacent Sibling Selector namun rules akan diterapkan pada
seluruh elemen kedua yang berada setelah elemen pertama.

Child Selector,
Rule akan diterapkan pada seluruh elemen paragraf yang berada di dalam elemen div
secara langsung

Descendant Selector.
Mirip seperti child selector namun hierarkinya lebih luas, karena rule akan
diterapkan pada seluruh elemen yang menjadi turunannya walaupun secara tidak
langsung.

Berikut ini merupakan properti font yang akan kita pelajari antara lain:

font-family : Menetapkan jenis font yang akan diterapkan pada target.


font-size : Menentukan ukuran pada teks.
font-weight : Menentukan ketebalan pada teks.
font-style : Menetapkan styling yang diterapkan pada teks.
font-variant : Menentukan teks untuk menggunakan gaya small caps (huruf kapital
kecil).
font : Shorthand dari properti font yang ada.

Relative unit

em; Font size; Satuan relatif terhadap ukuran font yang sedang
digunakan pada elemen (contohnya, 2em berarti 2 kali lebih besar dari ukuran font
seharusnya).

ex; Font height; Satuan relatif terhadap tinggi font saat ini,
satuan ini sangat jarang sekali digunakan

rem; Font size; Mirip seperti em, tetapi rem merupakan satuan relatif
terhadap ukuran font dari root element.
ch; Font width; Satuan relatif terhadap lebar dari karakter “0” nol.

vw; Viewport width; Satuan relatif terhadap 1% lebar viewport.


Contoh 1vw = 1% dari lebar viewport. Satuan ini tidak didukung pada browser IE8 ke
bawah.

vh; Viewport height; Satuan relatif terhadap 1% tinggi viewport.


Contoh 1vh = 1% dari tinggi viewport. Satuan ini tidak didukung pada browser IE8 ke
bawah.

Absolute unit

px; Menetapkan nilai font berdasarkan ukuran pixel

pt; Menetapkan nilai font berdasarkan points (1/72 inch di CSS2.1)

pc; Menetapkan nilai font berdasarkan picas (1 pica = 12 point)

mm; Menetapkan nilai font berdasarkan millimeters

cm; Menetapkan nilai font berdasarkan centimeters

in; Menetapkan nilai font berdasarkan inches

font-weight
Setelah mengenal font families dan font size, selanjutnya ada juga font-weight yang
digunakan untuk mengatur ketebalan dari font yang ditampilkan. Nilai dari properti
ini
dapat ditentukan dengan menggunakan numeric values (100 sampai 900) atau dengan
menggunakan descriptive terms (normal, bold, bolder, dan lighter).

font-style
Properti selanjutnya adalah font-style. Properti ini digunakan untuk
menentukan postur dari teks yang ditampilkan, apakah bentuknya vertikal (normal)
atau miring (italic dan oblique).

SHORTHAND FONT:
target{font: style weight variant size font-family}

Line Height; Tinggi garis di tulisan


Text Indent; Memulai paragraph

text-align: left; rata kanan kiri tengah dua-duanya


text-decoration: underline; Memberikan garis bawah (underline) pada teks
text-decoration: overline; Memberikan garis atas (overline) pada teks
text-decoration: line-through; Memberikan efek tulisan dicoret (strikethrough)
text-decoration: none; Menghilangkan dekorasi teks yang ada pada elemen

text-transform: none; Teks yang ditampilkan sama seperti yang dituliskan


text-transform: capitalize; Membuat huruf pertama besar pada tiap katanya
text-transform: lowercase; Membuat seluruh teks menggunakan huruf kecil
Text-transform: uppercase; Membuat seluruh teks menggunakan huruf besar

letter-spacing; jarak antar huruf


word-spacing; jarak antar kata

text-shadow : a b c d;
Nilai pertama : menunjukkan seberapa jauh ke kiri atau kanan (horizontal) bayangan
harus ditampakkan.
Nilai kedua : menunjukkan jarak ke atas atau ke bawah (vertical) bayangan harus
ditampakkan.
Nilai Ketiga (opsional) : menentukan tingkat keburaman yang harus diterapkan pada
bayangan.
Nilai Keempat : menentukan warna yang digunakan pada bayangan.

nav a: hover; adalah efek saat dipencet

Anda mungkin juga menyukai