CSS

(cascading style sheet) adalah suatu style yang di gunakan

untukmenampilkan elemen html yang dapat mengatur dan

mengontrol tampilan halaman web serta memisahkan antara

tampilan dan konten halaman web,walaupun bukan suatu

keharusan dalam membuat web akan tetapi menggunakan css

akan membuat tampilan web menjadi lebih menarik.

Struktur css

Perintah css terdiri dari 2 komponen yaitu selector dan declaration:

1. Selector adalah untuk memberi tahu browser bahwa pada

elemen mana rule css di terapkan selector dapat berupa

elemen html,selector class atau selector id.

2. Declaration merupakan aturan css yang di terapkan,terdiri

atas property dan value.

Aturan penulisan css

1.menggunakan tag style(internal style): kode css di ketik di antara

tag < head>

2.inline style Atau dengan menambahkan langsung kode css ke

dalam tag html:

3.eksternal style menggunakan tag<link> untuk merujuk ke file

css khusus contoh:

Komentar dalam css

Komentar di gunakan untuk memudahkan dalam mengingat

kembali script yang telah di tulis,seperti halnya bahasa

pemograman yang lain,pada css penulisan komentar di lakukan

dengan menyisipkan /* dan di akhiri */

Sintak css

Grouping

Untuk mempersingkat penulisan,css juga memungkinkan untuk

melakukan grouping pada selector selector yang memiliki property

yang sama.

Contoh:

Css class selector

Fungsinya untuk memberikan style yang berbeda pada sebuah

elemen html yg di awali dengan menambahkan tanda’.’(titik)pada

file css dan pada html di tambahkan property class untuk

memanggil selector tsb. Contohnya pada css:

Pada html :

Sehingga:

Css id selector

Hampir sama dengan class selector hanya bedanya mengunakan

tanda’#’ pada css dan property id pada html.

Contoh: pada css

Pada html

Sehingga:

Css background

Property css yang berfungsi untuk memanipulasi background dari

elemen html. Terdapat beberapa property background :

Background-color

Background-image

Background-repeat

Background-attachment

Background-position

Backround color

Contohnya: pada css

Pada html:

Sehingga tampilan designnya:

Background image

Contohnya pada css:

Sehingga tampilannya:

Background repeat

Contohnya pada css:

Maka tampilannya:

Background position

Contohnya pada css:

Maka tampilannya:

Css teks

Contohnya pada css :

Maka tampilannya berubah pada huruf

Css font

Pada css nya:

Maka hasilnya seperti ini:

Css dimension

Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen

html contohnya :

Sehingga Nilai /value nya

Css box model

Contohnya:

Margin: are di sekeliling border,terpengaruh oleh warna dari box

Border: garis yang membatasi pading dan content, terpengaruh oleh warna dari

box

Padding: area di sekeliling content,terpengaruh oleh warna box

Content: area tempat menyimpan text dan image.

Css margin

Contohnya pada css:

Pada htmlnya:

Sehingga hasilnya:

Css padding

Contoh pada css nya:

Sehingga tampilanya hurufnya berada di tengah:

Css border

Contohnya:

Css float