Aturan penulisan :
CSS dapat dituliskan dengan sintak :
"selector {property:value}" tampa tanda petik
selector : merupakan tag html atau elemen dengan atribut ID atau Class
Property : adalah bentuk atau nilai yang akan dirubah
value : merupakan nilai dari property
Cara penggunaan CSS :1. External Style Sheet
Bentuk :
<link rel=“stylesheet” type=“text/css” href=“css_files.css”>
dimana :
- <link, merupakan tag pembuka diakhiri dengan tanda “>”
- rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet
- type=“text/css”, file yang dipanggil berupa css
- href=“css_files.css”, alamat dokumen stylesheet yang dipanggil
script efek.css
body {
color: green;
background: white;
font-family : arial;
}
Propery dan value yang umum digunakan dalam css:
Contoh property dan values pada background
| Property | Values | Keterangan |
| Background-image | Url | Alamat gambar yang sudah di aploud |
| Background-repeat | ||
| Repeat | Gambar diulang dalam halaman | |
| Repeat-y | Gambar diulang dalam sumbu y | |
| Repeat-x | Gambar diulang dalam sumbu x | |
| no-Repeat | Gambar tidak diulang hanya muncul 1 gambar |
Contoh property dan values pada font
| Property | Values | Keterangan |
| font-family | Arial; | Jenis font adalah arial |
| Font-size | ||
| small; | kecil | |
| medium; | menengah | |
| large; | besar | |
| 12px; | besar 12 pixel (Bisa diganti 12pt) | |
| Font-style | ||
| Normal; | Font normal | |
| Italic; | Font miring | |
| Font-weight | ||
| Normal; | Ketebalan font normal | |
| Bold; | Font Tebal | |
| 100-900 | Ketebalan font dengan nilai dari 100-900 |
Contoh Property Dan Value pada Text
| Property | Values | Keterangan |
| Text-decoration | ||
| none; | Menampilkan text asli | |
| Underline; | Menampilkan Text bergaris bawah | |
| Overline; | Menampilkan text bergaris atas | |
| line-through; | Menampilkan text tercoret | |
| blink; | Menampilkan text berkedip | |
| Text-transform | uppercase; | Menampilkan text huruf besar |
| Text-align | ||
| left; | Text rata kiri | |
| right; | Text rata kanan | |
| center; | Text rata tengah | |
| justify; | Text rata kanan kiri |
Contoh Selector Pada Link
| Selector | Keterangan |
| a:link | Keadaan awal link |
| a:hover | Keadaan link saat dikenai mouse |
| a:active | Keadaan link saat di klik |
| a:visited | Keadaan link setelah dikunjungi |
Contoh property dan value pada position
| Property | Values | Keterangan |
| Position | ||
| Static; | Elemen render dalam rangka, seperti yang muncul dalam aliran dokumen | |
| Absolute; | Unsur diposisikan relatif terhadap posisi pertama (tidak statis) | |
| Fixed; | Unsur diposisikan relatif terhadap jendela browser | |
| Relative; | elemen diposisikan relatif terhadap posisi normal, sehingga "left: 20" menambahkan 20 pixel ke posisi KIRI elemen | |
| Inherit; | Nilai dari properti posisi diwariskan dari elemen induk |
Contoh Property dan Value pada Border
| Property | Values | Keterangan |
| Border | ||
| ukuran border bisa diubah dalam ukuran pixel. Border-style (contoh solid;dotted) merupakan style pada border setiap style tampilan berbeda. Border-color bisa menggunakan warna RGB juga Desimal. Property border bisa diganti dengan border-left; border-right; border-top; border-bottom; | ||
| 1px solid #000; | ||
| 2px dotted #ff0000; | ||
| 3px double blue; | ||
| 5px groove #3300ff; | ||
| 5px ridge #3300ff; | ||
| 5px inset #3300ff; | ||
| 5px outset #3300ff; |
Contoh property dan value pada border-radius
| Property | Values | Keterangan |
| Border-radius | 10px; | Garis melemgkung disemua sisi dengan ukuran 10px |
| border-top-left-radius | 2em 0.5em; | Garis melengkung pada sisi atas dan kiri dengan ukuran berbeda |
| border-top-right-radius | 3em 2.5em; | Garis melengkung pada sisi atas dan kanan dengan ukuran berbeda |
| border-bottom-right-radius | 1em 2em; | Garis melengkung pada sisi bawah dan kanan dengan ukuran berbeda |
| border-bottom-left-radius | 2em 1em; | Garis melengkung pada sisi bawah dan kiri dengan ukuran berbeda |
| border-bottom-left-radius | 2em; | Garis melengkung pada sisi bawah dan kiri dengan ukuran sama |
Margin dan Padding
Margin adalah kode yang mengatur seleksi batas jarak luar, yakni jarak antara objek satu dengan objek yang lainnya
sedangkan padding adalah kode yang mengatur antara jarak dalam objek dengan luar (Border) objek
Contoh property dan value pada margin dan padding
| Property | Values | Keterangan |
| margin | 10px 5px 0px 5px; | atas 5, kanan 5, bawah 0, kiri 10 |
| margin-top | 10px; | karak atas 10px |
| margin-right | 5px; | jarak kanan 5px |
| margin-bottom | 2em; | jarak bawah 2em |
| margin-left | 3em; | jarak kiri 3en |
| padding | 2em; | atas, kanan, kiri dan bawah 2em |
Contoh property dan value pada display
| Property | Values | Keterangan |
| DISPLAY | ||
| None; | Berfungsi untuk menghilangkan atau menyembunyikan elemen yang diberi kode tersebut | |
| Block; | Berfungsi untuk memberi blok baru atau baris baru seperti kode <br> dan <p> | |
| Inline; | Berfungsi sama seperti kode span, yang memberi desain background berbeda hanya pada elemen tersebut | |
| Inline-block; | jika layar tidak muat maka secara otomatis membuat baris baru. |