8/16/2019 Mengenal Sintaks CSS

http://slidepdf.com/reader/full/mengenal-sintaks-css 1/5

Mengenal Sintaks

CSSPenulisan CSS dibagi menjadi 3 bagian, yaitu selector, properti,& value. Untuk penjelasannya

 bisa anda lihat dibawah ini.

Selector : Tag HTML / ID (#namaid) / Class (.namaclass).

Property : Atribut dari tag HTML.

Value : Nilai dari property.

Untuk susunan penulisan CSS bisa anda lihat dibawah ini.

selector {

  property : value ;  }

 

// Contoh Penerapannya

 

p {

  color : #000000 ;

  font-size : 20px ;

  }

Sebuah CSS di awali dengan penulisan tag : h1, p, div,& lain-lain. Penulisan CSS juga dapat

menggunakan ID / Class dengan penulisan#namaid /.namaclass. Selanjutnya untuk

membuka perintah, CSS menggunakan{ & untuk penutupnya menggunakan}. Deklarasiproperti& value ditulis dengan susunanproperty : value ; yang diakhiri dengan;. Untuk

tutorial berikutnya, kita akan mempelajariPenggunaan ID &  Class Dalam CSS.

Penggunaan ID & Class

Dalam CSSSetelah kita sudah mengetahuiSintaks CSS , Kali ini kita akan mempelajari

tentangID &  Class Dalam CSS . Selain tag elemen HTML yang menjadi Selector, Ternyata

ID& Class juga bisa menjadi selector. Ini dikarenakan untuk memberikan beberapa style

 berbeda dalam satu elemen HTML.

8/16/2019 Mengenal Sintaks CSS

http://slidepdf.com/reader/full/mengenal-sintaks-css 2/5

Contohnya kita membuat 2 paragraf dengan style berbeda. Paragraf 1 menggunakan huruf

 berwarna putih& Paragraf 2 menggunakan huruf berwarna hitam. Solusinya anda dapat

membuat ID / Class dalam tag HTML yang mana ID& Class tersebut akan diberikan Style

 berbeda. ID& Class dapat dibuat dengan kata sesuai keinginan kita& untuk penerapannya

kita harus memanggil id / class dalam tag HTML.

Contoh penggunaan ID menggunakan # dalam CSS

#hitam {

  color:#000;

  font-size:!px;

}

 

#putih {

  color:#fff;

  font-size:!px;

}

Penerapan ID dalam HTML bisa anda tulis sebagai berikut

"p i$%hitam%&

  'ni (ulisan )arna *itam

"/p&

 

"p i$%putih%&

  'ni (ulisan )arna Putih

"/p&

Contoh penggunaan Class menggunakan . dalam CSS

+hitam {

  color:#000;

  font-size:!px;

}

 

+putih {

  color:#fff;

  font-size:!px;

}

Penerapan Class dalam HTML bisa anda tulis sebagai berikut

8/16/2019 Mengenal Sintaks CSS

http://slidepdf.com/reader/full/mengenal-sintaks-css 3/5

"p class$%hitam%&

  'ni (ulisan )arna *itam

"/p&

 

"p class$%putih%&

  'ni (ulisan )arna Putih

"/p&

Untuk penjelasan lebih lanjut tentang Selector& Atribut CSS akan saya bahas dalam artikel

tentang pembelajaran CSS yang saya rangkum dalam Daftar Isi Belajar CSS Untuk Pemula .

Belaar CSS Dengan

!uda" & CepatCSS kepanjangan dari“Cascading Style Sheets”  yang merupakan format atau style untuk

tampilan website. CSS dapat dibuat dalam halaman bersama perintah HTML dengan

menyisipkan tagstyle$ (CSS Internal / Inline) atau dibuat dengan file tersendiri yang

 berektensi.css yang akan dipanggil HTML denganlin%

"re'("ttp:))***.nurulimam.com)style.css( type'(te+t)css( media'(all( )$ (CSS

Eksternal).

Penulisan CSS Internal yang digabungkan dalam file HTML bisa anda lihat contohnya

dibawah ini.

"style type$%text/css% meia$%all%&

,oy {

ith:00.;

heiht:00.;

overflo:auto;

clear:,oth;

marin:0;

pain:0;

font-family:Palatino 1inotype3apf Calliraphic4oo5 6nti7ua;

font-size:meium;

,ac5roun:url8++/imaes/,ac5roun/,+9p center 0 repeat #<!a=;

heiht:00.;}

"/style&

Penulisan CSS Inline yang disisipkan dalam tag HTML bisa anda lihat contohnya dibawah ini.

8/16/2019 Mengenal Sintaks CSS

http://slidepdf.com/reader/full/mengenal-sintaks-css 4/5

p style',te+t-align:center,$Ini ulisan%u)p$

Penulisan CSS Eksternal yang ditulis dalam file berektensi .css bisa dipanggil dengan tag

HTML dibawah ini.

lin% "re'("ttp:))***.nurulimam.com)css-e%sternal-anda.css( type'(te+t)css(

media'(all( )$

Hal mendasar dalam CSS yang harus diperhatikan adalahID & Class Selector . ID& Class

dapat dibuat dengan kata sesuai keinginan kita& untuk penerapannya kita harus memanggil

id / class dalam tag HTML.

Contoh penggunaan ID menggunakan# dalam CSS

#css%u {

  /oat:let;

  ont-si0e:12p+;

}

Penerapan ID dalam HTML bisa anda tulis sebagai berikut

p id',css%u,$  Ini ulisan%u

)p$

Contoh penggunaan Class menggunakan . dalam CSS

+css5u {

  float:left;

  font-size:>0px;

}

Penerapan Class dalam HTML bisa anda tulis sebagai berikut

"p class$%css5u%&

  'ni (ulisan5u

8/16/2019 Mengenal Sintaks CSS

http://slidepdf.com/reader/full/mengenal-sintaks-css 5/5

"/p&