Dokumen ini membahas pengenalan CSS (Cascading Style Sheets) sebagai alat untuk mengatur tampilan halaman web, termasuk cara menggunakan selector dan deklarasi. CSS dapat diterapkan melalui berbagai metode seperti inline, embedded, atau linked style sheets, dan memungkinkan pemisahan antara markup HTML dan styling. Konsep grouping dan inheritance juga dijelaskan, memungkinkan penggunaan gaya yang konsisten antar elemen.

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}