bab 4. struktur css

8/19/2019 Bab 4. Struktur Css

1/9

Struktur CSS

BAB 4

STRUKTUR CSS

Dalam pembuatan dokumen web menggunakan style CSS di kenaladanya aturan atau struktur penulisan baku agar style CSS yang kita buattersebut dapat ditampilkan dengan baik dalam dokumen web yang dibuat.Contoh :

HTML Selector

pe&&'aa HTML Selector dalam CSS

Pada contoh diatas dipergunakan tag HTML p! sebagai selector dan setiaphuru" yang berada diantara tag p! dan #p! akan memiliki $enis "ont %erdanasesuai dengan %alue atau nilai yang diberikan dalam property style tersebut.Seperti terlihat dalam gambar berikut :

Gambar 4.1. Penerapan HTML selector dilihat dalam browser

1. SELECTOR

&ika dalam HTML kita mengenal adanya tag'tag yang menyusun sebuahdokumen HTML( maka dalam CSS kita $uga mengenal dengan sebutan

25


2/9

Struktur CSS

selector. Selector adalah nama'nama yang diberikan untuk style'style yangberbeda baik itu style internal maupun eksternal. Dalam style tu$uan( andaharus menentukan bagaimana tiap selector seharusnya beker$a yangdinamakan properties di dalam tanda ) * atau curly bracket yang dapatmemiliki nilai berupa "ont( warna dll( kemudian dalam body di halaman web

anda( anda arahkan ke selector'selector ini untuk mengakti"kan styletersebut.+arena CSS memiliki aturan tersendiri dalam penulisan sintaknya dalamCSS( dan penulisan sintak tersebut terbagi ke dalam tiga bagian yaitu:Selector( Property( dan ,alue. Sebagai pen$elas coba perhatikan contohberikut :

selector {property al'e#$

Selector dalam CSS adalah elemen yang akan dide"inisikan dalam style CSS(sedangkan elemen ini dapat berupa tag HTML maupun Class. Sedangkan

Property dalam CSS adalah atribut yang ber"ungsi untuk mende"inisikanSelector( sedangkan ,alue adalah nilai atau harga dari sebuah Property.Sebagai contoh :

()%esar {colorred# fot-si*e+,px# fot-

familyarial# $

ii adalah h'r'f %esar de&a html

ii adalah h'r'f %esar de&a CSS

Dalam kasus ini -.besar adalah selector. Contoh diatas akan menghasilkanoutput sebagai berikut :

26


3/9

Struktur CSS

Gambar 4.2. Penerapan selector dilihat dalam browser

2. CLASS SELECTOR

Digunakan untuk menentukan style yang dapat digunakan tanpa menentukan

lagi tag HTML sederhana. Penulisan class adalah dengan menggunakantanda titik atau dot. Selain aturan penulisan diatas( CSS $uga mengenal ClassSelector dimana dalam elemen yang sama kita dapat menerapkan lebih darisatu style. dapun contohnya adalah sebagai berikut :

Class Selector

/style>

i adalah Cotoh pe&&'aa class

se%a&ai selector. setiap h'r'f memilii h'r'f times

e0 roma

i adalah Cotoh pe&&'aa

class se%a&ai selector. setiap h'r'f memilii h'r'f

erdaa

i adalah Cotoh pe&&'aa

class se%a&ai selector. setiap h'r'f memilii h'r'f

co'rier

Tampilan script tersebut $ika dilihat dalam browser akan terlihat seperti dalamgambar berikut :

27


4/9

Struktur CSS

Gambar 4.3. Penerapan Class selector dilihat dalam browser

Pada contoh diatas( tag " memiliki / class yang berbeda untuk mem"ormatparagra" yaitu .times dan .%erdana dikarenakan tag class .times dan .%erdanaadalah class yang dimiliki oleh tag " maka ia hanya dapat dikenakan padaelemen " sa$a. Lain halnya dengan class .courier( ia dapat dipergunakan olehsemua elemen tanpa harus menggunakan tag " di awal dan akhir elemenyang akan di "ormat.

0ama untuk tiap class dapat berbeda'beda( nda dibebaskan menentukannama class sendiri( namun ada baiknya memilih nama dari tiap class yang

mengacu kepada "ungsi dari class tersebut. Hal ini ditu$ukan agar anda tidakbingung mempergunakan class pada saat menggabungkannya ke dalam tagHTML. Contoh :

i tes 't' para&raph pada %lo&

i tes 't' para&raph pada

me' iri

3. ID SELECTOR

1D selector digunakan untuk menentukan style yang berhubungan dengan

ob$ek'ob$ek dengan sebuah 1D yang unik. -erbeda dengan Class Selector yang dapat kita pergunakan pada berbagai tag( 1D Selector ini memiliki si"at'si"at yang berbeda. 1D selector hanya dapat dipergunakan pada satu elemensa$a pada setiap halaman web yang kita buat. 1D Selector menggunakan tag2 3kres4 sebelum menggunakan nama Selector. dapun contohnya adalahsebagai berikut :

1heletica {fot-family Heletica#$

28


5/9

Struktur CSS

Dalam penerapannya pada tag HTML( nda dapat menggunakan aribut spanataupun di%( seperti terlihat pada contoh berikut :

i adalah h'r'f

heletica

Atau

i adalah h'r'f heletica

dapun penulisan dalam dokumen dapat dituliskan seperti pada contohberikut :

3 Selector

i adalah Cotoh pe&&'aa id

se%a&ai selector. setiap h'r'f memilii h'r'f timese0 roma


se%a&ai selector. setiap h'r'f memilii h'r'f

erdaa


se%a&ai selector. setiap h'r'f memilii h'r'f

co'rier

Tampilan yang terlihat dalam browser akan terlihat seperti pada gambar berikut ini :

29


6/9

Struktur CSS

Gambar 4.4. Penerapan ID selector dilihat dalam browser

Selain yang di$elaskan diatas( dalam CSS kita $uga mengenal adanyaPewarisan 3inheritance4( Pseudo Classes( Pseudo'5lement( dan Selectors'+ontekstual 3Conte6tual Selector4.

4. PEWARISAN / INHERITANCE

7ang dimaksud pewarisan atau inheritance disini adalah satu kondisi dimanabagian'bagian HTML dalam dokumen kita yang kekurangan dalam spesi"ikasiaturan CSS dapat mengikuti atau dibuat menurut aturan CSS yangmenutupinya. Setiap aturan yang tidak ada dalam "ormat huru" yang dibuat

dengan HTML atau ingin menggantikannya dengan aturan CSS( tetap akanmempengaruhi huru" yang ada didalam kurungan CSS.

iheritace

( {%ac&ro'd-color &ree# color 0hite#$

%ela4ar mem%'at 0e% de&a CSS sa&atlah m'dah)

haya de&a pro&ram otepad p' 4adi)

30


7/9

Struktur CSS

&ika dilihat dari contoh diatas dapat dilihat bahwa tag -! dalam aturan CSSakan mende"inisikan warna "ont dan warna latar dari "ont sedangkan tag -!dalam HTML bisa diartikan sebagai bold atau "ormat untuk menebalkan huru".Sedangkan tag "ont! yang berada dalam lingkup CSS dapat menerapkanaturan HTML dasar akan tetapi tetap terpengaruh dengan kondisi warna dan

tebalnya huru" dari aturan CSS yang melingkupinya. Cara ini dapat andagunakan untuk dikombinasikan lebih lan$ut dengan tag'tag lain agar sesuaidengan keperluan dalam dokumen anda.

Gambar 4.. Penerapan Inheritance dilihat dalam browser

5. PSEUDO CLASSESPseudo classes dalam CSS dibuat tebal dalam selector'selector untukmenentukan sebuah statemen atau relasi selector( dan penulisannya hanyadipisahkan dengan sebuah tanda titik dua : diantara selector dan pseudoclass. dapun contoh "ormat penulisannya adalah :

selectorpse'do class { property al'e# $

-anyak "ormat CSS yang tidak didukung oleh kebanyakan browser( namunterdapat empat pseudo classes yang dapat digunakan secara aman ketikadiaplikasikan kedalam hyperlink atau link( yaitu :

8 link : untuk tampilan sebuah link yang belum dikun$ungi.8 %isited : untuk tampilan sebuah link ke halaman yang telah dkun$ungi.8 acti%e : untuk tampilan sebuah link yang sedang akti" 3ketika di klik4.8 ho%er : untuk tampilan sebuah link yang ho%er 3ketika cursor melintas

diatasnya4.

Contoh penggunaan :

31


8/9

Struktur CSS

a)so0mali {color%l'e#$

a)%'diisited {colorp'rple#$

a)%'diactie {colorred#$

a)%'dihoer {text-decoratiooe# color%l'e#

%ac&ro'd-coloryello0#$

nda dapat menggunakan ho%er pseudo class dengan elemen'elemen lainselain link. Sayangnya 1nternet 56plorer masih tidak mendukung metode inikarena banyak tampilan yang dapat anda buat dan terlihat bagus dalambrowser lain namun tidak terlihat dengan menggunakan browser ini.

6. PSEUDO ELEMENT

Pseudo element dalam CSS ditempatkan dalam sebuah selector samaseperti pada pseudo classes( penulisannya akan seperti contoh berikut :

selectorpse'doelemet {property ilai#$)

Contoh setting huru" dan baris pertama :Pseudo element pada huru" pertama di aplikasikan elemen dari huru" pertama dan baris pertama pada atas baris sebuah elemen. nda dapatmembuat huru" besar dan huru" tebal baris pertama pada paragra" denganmenggunakan perintah berikut :

pfirst-letter {fot-si*e,px# floatleft#$

pfirst-lie {fot-0ei&ht%old#$

BEORE DAN ATER

Pseudo element be"ore dan a"ter digunakan dengan property content untukmenempatkan isi dari sebuah elemen tanpa menyentuh kode HTML. 0ilaidari property content ini dapat berupa open'9uote( close'9uote( no'open'9uote( no'close'9uote( berbagai string yang disertakan dalam tanda kutipatau berbagai image gambar menggunakan url3nama image4 seperti contohberikut :

%loc6'ote%efore {cotet ope-6'ote#$

%loc6'oteafter {cotet close-6'ote#$

li%efore {cotet "789 "$

p%efore {cotet 'rl:ima&es/4am)4p&;$

!. SELEKTOR KONTEKSTUAL / CONTE"TUAL#SELECTOR

Selektor +ontekstual dalam CSS hampir sama dengan pernyataan'pernyataan kondisional dimana deklarasi dalam Style'Sheet CSS yang ada

akan berpengaruh $ika menemui kondisi atau keadaan tertentu. Contoh dar i

selector kontekstual adalah :

32


9/9

Struktur CSS

selector otest'al

% em {fot-family erdaa# %ac&ro'd %l'e# color

0hite# $

%ela4ar mem%'at 0e% de&a CSSsa&atlah m'dah

haya de&a pro&ram otepad p' 4adi

Dalam contoh diatas dapat dilihat bahwa dokumen web tersebut akanmenerapkan style CSS tersebut pada dokumen yang berada dalam tag em!3"ont %erdana( warna latar biru dan "ont berwarna putih4 dimana tag em!tersebut berada di dalam tag b! dan #b! 3bold#tebal4( sedangkan tag em!yang berada di luar tag b! dan tag #b! tidak akan terpengaruh dengansetting style tersebut atau hanya memiliki nilai em! biasa atau huru" miring.&ika dilihat dlam browser maka tampilannya adalah sebagai berikut :

Gambar 4.!. Penerapan "elector #onte$st%al dilihat dalam browser

33

bab 4. struktur css

Documents