Materi pemrograman web di KuliahKita yang membahas bahasa yang digunakan untuk mendefinisikan cara menampilkan halaman situs yaitu CSS di http://kuliahkita.com/kelas/pengembangan-web/

1. Pengenalan CSS
Pengembangan Web
Edwin Lunando
edwin@kuliahkita.com

2. Pendahuluan
CSS (Cascading Style Sheet) adalah sebuah mekanisme yang
didefinisikan untuk mengatur style untuk menampilkan halaman situs.
Style ini dapat berupa:
● Font
● Warna
● Spasi
● Ukuran
● dll

3. CSS mengatur tampilan HTML dengan mendefinisikan rule yang terdiri
atas:
● Selector
● Declaration (property & value)
Setiap elemen HTML dapat digunakan sebagai selector.
Selector juga dapat dipakai secara spesifik dengan menggunakan
kelas (class) pada tag HTML tertentu.
Contoh:
● p {text-align: right; color: green}
● .classname {float: left; padding: 2px}

4. Fungsi utama CSS adalah memberikan style (cara
menampilkan elemen HTML) pada halaman dengan cara
memisahkan rendering instruction dengan markup instruction
Meningkatkan derajat pemisahan antara HTML markup dengan
style-based rendering dengan cara memisahkan dokumen HTML
dengan Style Sheets eksternal

5. Lokasi CSS
CSS dapat diletakkan berupa:
● Inline style sheet: Definisi CSS di dalam elemen HTML
○ <p style=“color: red”>
● Embedded style sheet: Definisi CSS di dalam dokumen
HTML
○ <style type=“text/css”>
h1 { color: red }
</style>
● Linked style sheet: meletakkan definisi CSS di dalam file
terpisah yang dilink dari dokumen HTML
● Default browser

6. Linked Style Sheets
Cara menghubungkan situs dengan CSS yang didefinisikan di
file terpisah / eksternal adalah:
<link rel=”stylesheet” href=”url” type=”text/css” media=”screen” >
Contoh:
● <link rel=”stylesheet” href=”main.css” type=”text/css” media=”screen” title=”
default style”>
● <link rel=”stylesheet” href=”assets/css/alt.css” type=”text/css” media=”
screen” title=”alternate style”>

7. Grouping & Inheritance
Grouping: menggunakan satu set style untuk beberapa element.
Contoh:
h1,h2,h3 {color: blue}
Inheritance: menurunkan style untuk tiap elemen dari elemen
induk (parent)
Contoh:
body {font-family: roboto; font-size: 1em; color: grey}