CSS

CSSCSS (Cascading Style Sheet)Mekanisme memisahkan antara isi dan presentasi dokumen HTML. Menambahkan style pada halaman, meningkatkan dan memperbaiki penyajian isi halaman. Bertindak sebagai lapisan yang mempengaruhi presentasi dari elemen HTML yang diberikan. Warna, font, text size, background, susunan elemen pada halaman dan seluruh aspek presentasi isi, diatur oleh CSSKegunaan CSSMempersingkat penulisan tag HTML : Anda tidak perlu lagi mendefinisikan setiap tag dengan property dan nilai yang sama.Mempercepat proses rendering atau pembacaan HTML karena tidak terdapat pengulangan tulisan.Mudah dan cepat dalam me-maintenance : dikarenakan file CSS dibuat secara terpisah , maka kita tidak perlu merombak semua elemen atau property dalam HTML, cukup mengedit file CSS-nya saja.

Struktur Penulisan

Inline StylesCSS dideklarasikan sebagai atribut pada elemen. Tidak dibangun sebagai aturan, dan tidak ada selector. Properti dan nilainya melekat langsung pada elemen

Inline Styles CSS

PandawaNakula dan Sadewa adalah adalah saudara kembar. Mereka adalah adik tiri Yudistira, Bima, Arjuna.

Hasilnya

Embedded Style SheetsAturan CSS ditanamkan dalam elemen head dari dokumen. Aturan tersebut hanya berlaku pada dokumen dimana dideklarasikan.Contoh

h2 { text-decoration:underline; }p { color:blue; }.example { background:yellow;color:red; }

PandawaNakula dan Sadewa adalah adalah saudara kembar. Mereka adalah adik tiri Yudistira, Bima, Arjuna.Namun, kesetiaan mereka pada Pandawa tak pernah goyah.

hasilnya

External Style Sheetslatihan.css

h2 { text-decoration:underline; }.dewi_kunti, .pandhu { background:yellow;color:red; }#info_bima { color:green; }

Contoh

External Style Sheets

Bima

Bima adalah anak ke-2 Dewi Kunti danPandhu

Nama lainnya adalah Bimasena dan Werkudara.
Bahasa yang digunakan selalu kasar dan selalu menakutkan musuh, walaupun hatinya baik.

Contoh CSShttp://www.w3schools.com/css/css_examples.aspCSS3CSS3 memberikan fitur-fitur yang lebih dibandingkan dengan CSS versi sebelumnya, tapi CSS3 juga tidak meninggalkan fitur lama dari CSS sebelumnyaTambahan di CSS3Bordersborder-colorborder-imageborder-radiusbox-shadow

Backgroundsbackground-origindanbackground-clipbackground-sizemultiple backgroundsColorHSL colorsHSLA colorsopacityRGBA colors

Tambahan di CSS3Text Effectstext-shadowtext-overflowword-wrap

User-interfacebox-sizingresizeoutlinenav-top, nav-right, nav-bottom, nav-left

Selectorsattribute selectors

Basic box modeloverflow-x, overflow-y

Tambahan di CSS3Generated Contentcontent

Other modulesmedia queriesmulti-column layoutWeb fontsspeech

Beberapa perbedaan CSS3 dan CSSCSS3 bisa lebih detail untuk mendeklarasikan objek yang akan diberikan style. Contohnya di dalam objek blockquote bisa membuat (quote) di awal dan akhirnya menggunakan font lebih besar dari konten blockquote itu sendiri.CSS3 kaya akan fitur untuk animasi dan efek untuk text atau objek, yang sebelumnya tidak bisa dilakukan oleh CSS2/CSS2.1, dan bisa menggantikan peran gambar. Standar web 2.0 atau situs interaktif dan efisien berdasar dari penggunaan CSS.Dengan CSS3 situs akan bisa lebih berkembang dan bisa lebih interaktif lagi dengan pengunjung.Bisa mengurangi ukuran file yang di-load dan lebih ringan, secara otomatis mengurangi bandwidth inbound/outbound situs.CSS3tak berbeda jauh dari tingkat-tingkat sebelumnya, hanya saja memiliki performa style yang jauh lebih baik dantambahan beberapa fungsi yang menarik.