DASAR PEMROGRAMAN CSS 2022
DASAR PEMRGORAMAN CSS
A. PENGENALAN
CSS merupakan kependekan dari Cascading Style Sheet yaitu suatu skrip yang digunakan untuk
mempercantik tampilan HTML atau mengatur bagaimana elemen HTML ditampilkan, seperti
menentukan posisi, background, warna dan sebagainya.
B. DASAR-DASAR CSS
1. Penulisan CSS
Ada tiga cara menuliskan CSS, yaitu inline, internal dan external. Ketiganya dapat Anda
gunakan sesuai dengan kebutuhan. Berikut penjelasan masing-masing metode dalam penulisan
CSS:
a. Inline
Yaitu menuliskan CSS dengan menggunkan atribut style yang langsung dituliskan di dalam tag
HTML.
Gambar 1 inline CSS
1 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
b. Internal
Yaitu penulisan CSS menggunakan tag <style> ... </style> yang ditulis di dalam tag <head> ...
</head>.
Gambar 2 Internal CSS
c. External
Yaitu penulisan CSS dimana skrip CSS disimpan dalam file tersendiri dengan extensi .css dan
terpisah dengan file HTML. Untuk menghubungkan file HTML dan file CSS, file CSS dipanggil di
dalam tag <head> ... </head> pada file HTML seperti berikut:
<link rel=”stylesheet” href=”nama_file.css”>
2 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
Skrip HTML
Skrip CSS
Gambar 3 External CSS
2. Selector
Selector adalah sebuah kata yang digunakan untuk memilih elemen HTML tertentu yang akan
dimodifikasi dengan skrip CSS. Ada tiga macam selector dalam penulisan CSS yaitu selectot tag,
selector class, dan selector id.
a. Selector tag
Yaitu selector dengan menyebutkan secara langsung nama tag HTML yang ingin dipercantik
dengan CSS. Penyebutan tag HTML tanpa disertai tanda <>, cukup ditulis nama tagnya saja.
3 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
Gambar 4 Selector tag
b. Selector class
Yaitu selector dengan menyebutkan nama class dari suatu tag yang ingin dimodifikasi dengan
CSS. Penyebutan nama class diserta titik (.) sebelum nama class. Selector ini lebih spesifik
daripada selector tag.
4 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
Gambar 5 Selector class
c. Selector id
Yaitu penulisan selector dengan menuliskan nama id dari elemen HTML yang akan dimodifikasi
dengan CSS. Penulisan nama id disertai dengan tanda pagar (#) sebelum nama id. Satu nama id
hanya bisa digunakan oleh satu elemen HTML. Selector ini adalah yang paling spesifik dari dua
selector yang lain.
5 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
Dalam penulisan selector, kita dapat menggabungkan beberapa selector menjadi satu, jika
elemen yang dipilih memiliki sifat-sifat yang sama.
6 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
Gambar 7 Penggabungan selector
Selain menggabungkan beberapa selector, kita juga menuliskan selector dengan lebih spesifik
dengan memilih elemen yang berada di dalam tag tertentu saja.
Gambar 8 selector lebih spesifik
7 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
3. Property Dan Value
Properti merupakan sifat-sifat yang ingin diberikan kepada selectro seperti warna text,
background, jenis huruf, dan sebagainya. Nilai dari sebuah property disebut value. Property
dari sebuah selector terletak di antara tanda { dan }. Property dan value dipisah dengan tanda :
dan diakhiri dengan tanda ;.
Value dari setiap proprty berbeda-beda, ada yang berupa angka dan ada yang berupa salah
satu pilihan dari beberapa value yang disediakan untuk property tertentu. Jika value berupa
angka, satuan yang digunakan biasanya px, em dan %.
Hampir setiap property pada CSS memiliki turunan, misalnya property background memiliki turunan
berupa proprty background-image, background-repeat, background-position dan sebagainya.
4. CSS-Shorthand
Seperti dijelaskan sebelumnya, setiap proprty memiliki beberapa turunan misalnya padding, memiliki
properti turunan padding-top, padding-right, padding-bottom dan padding-left. Misalnya:
padding-left: 20px;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
Daripada menuliskanya satu-satu, kita dapat menggunakan css-shorthand, yaitu menggabungkan
seluruh value ke dalam satu property dengan urutan (top, right, bottom, left).
padding: 15px 20px 15px 20px;
Pada skrip di atas, masih dapat kita persingkat lagi yaitu dengan menggabungkan top dan bottom dan
menggabungkan right dan left, dengan syarat keduanya memiliki nilai yang sama dan urutanya diulai
dari top dan bottom baru right dan left.
padding: 15px 20px;
Jika keempatnya memiliki nilai yang sama, maka dapat dituliskan hanya dalam satu value saja. Misalnya
angka 15 pada skrip di atas diganti 20 juga, maka penulisanya dapat dipersingkat seperti berikut:
padding: 20px;
Pada skrip di atas berarti seluruh padding baik top, right, bottom dan left memiliki nilai 20px.
5. Pseudo-class
Pseudo-class digunakan untuk memberi efek-efek tertentu pada selector. Misalnya efek ketika kursor
memasuki suatu elemen, ketik cursor mengklik suatu elemen, dan sebagainya. Beberapa contoh pseudo
class yang sering digunakan diantaranya:
Hover : digunakan untuk memilih elemen yang sedang didekati kursor
Focus : digunakan untuk memilih elemen yang sedang fokus
Active : digunakan untuk memilih elemen yang sedang aktif
First-child : digunakan untuk memilih elemen pertama di dalam suatu selector
Last-child : digunakan untuk memilih elemen terakhir di dalam suatu selector
8 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
Gambar 9 Sebelum didekati kursor
Gambar 10 Setelah didekati kursor
9 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
C. BOX MODEL
Pada pembahasan ini, kita akan mempelajari properti-properti CSS yang menentukan tampilan box
(kotak) yang dibuat menggunakan tag <div>.
1. Height dan Width
Properti ini akan menentukan tinggi dan lebar sebuah box.
Gambar 11 Properti width dan height
2. Margin
Properti ini akan mengatur jarak box dari elemen lain atau batas parent (box induk). Properti margin
terdiri dari margin-top, margin-right, margin-bottom, dan margin-left. Keempat properti tersebut
dapat disederhanakan menjadi margin: top right bottom left.
10 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
Gambar 12 Properti margin
3. Padding
Properti padding akan menentukan jarak box dengan isinya. Pada gambar hasil margin dapat kita lihat
tulisan isi kotak nempel ke sisi kotak. Hal ini terjadi karena box tidak diberi padding. Properti padding
juga terdiri padding-top, padding-right, padding-left, dan padding-top yang dapat disederhanakan
menjadi padding: top left bottom left. Box yang diberi properti padding ukuranya akan bertambah
sesuai dengan nilai padding.
11 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
Gambar 14 Properti padding
4. Position
Properti ini akan menentukan posisi suatu box terhadap objek lain. Properti ini dapat diberi nilai
relative, absolute dan fixed. Jika diberi nilai absolute, maka sebuah box dapat diatur letaknya dengan
properti top, left, bottom atau right terhadap parent yang memiliki position relative. Box yang diberi
position fixed letaknya akan tetap walaupon borwser di-scroll.
12 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
Gambar 15 Properti position
5. Overflow
Properti ini akan mengatur sifat box ketika isinya melampaui ukuran box. Jika diisi hidden, maka konten
yang melampaui akan disembunyikan. Jika diisi scroll maka akan muncul scrollbar pada box baik isinya
melampaui box atau tidak. Jika diisi auto, maka akan muncul scroll bar hanya jika isinya melampaui saja.
Gambar 16 Properti overflow
13 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
6. Border
Properti ini akan memberikan border pada box. Properti ini terdiri dari border-size, border-style dan
border-color. Properti ini dapat disingkat menjadi border: size style color. Border-style dapat diberi
nilai solid, dotted dan dashed.
Gambar 17 Properti border
7. Float
Properti ini digunakan untuk mengatur perataan box. Properti ini juga akan membuat box menjadi
beberapa box dapat berjajar ke samping. Properti ini sangat berpengaruh dalam membuat menu
horizontal.
Properti float akan membuat elemen lain berada di samping kanan atau kiri box yang diberi properti ini.
Untuk menetralkan agar element lain tidak terpengaruh, element tersebut dapat diberi properti clear
yang dapat diberi nilai left, right atau both (right & left).
14 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
Gambar 18 Properti float
D. TEXT STYLE
Pada pembahasan ini kita akan mempelajari properti-properti yang digunakan untuk mengatur gaya
tulisan.
1. Font
Properti ini memiliki properti turunan font-family yang mengatur jenis huruf, font-size mengatur
ukuran huruf, font-weight mengatur ketebalan huruf. Properti font-family dapat diisi lebih dari satu
jenis huruf, sehingga jenis huruf kedua dan seterusnya dapat menggantukan jika jenis font yang
dituliskan sebelumnya tidak tersedia dalam komputer. Satuan untuk font-size dapat menggunakan px,
pt, atau em.
15 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
Gambar 19 Properti font dan turunanya
2. Text
Properti ini memiliki properti turunan text-transfrom yang mengatur huruf besar kecilnya huruf, text-
decoration untuk mengatur tampilan text seperti membuang garis bawah pada link, text-align untuk
mengatur perataan huruf.
16 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
Gambar 20 Properti text dan turunanya
3. Letter-spacing dan line-height
Properti letter-spacing digunakan untuk mengatur jarak antar huruf sedangkan line-height digunakan
untuk mengatur jarak antar baris pada paragraf.
Gambar 22 Properti letter-spacing dan line-height
17 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
E. BACKGROUND IMAGE
Untuk membuat background berupa gambar pada suatu element dapat menggunakan properti
background-image. Sedangkan untuk pengaturanya dapat menggunakan properti background-repeat,
background-position-x dan background-position-y. Properti background-position-x dan background-
position-y dapat disederhanakan menjadi background-position: nilaix nilaiy.
Gambar 23 Background Image
18 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
F. CSS COLOR
Pada pembahasan ini kita akan membahas mengenai penggunaan warna pada CSS. Penggunaan warna
pada CSS biasanya pada properti background-color, color dan border-color. Ada beberapa cara
menggunakan warna pada CSS yaitu sebagai berikut:
Color Name
Metode ini yaitu dengan menggunakan nama-nama warna dalam bahasa inggris seperti red, green,
yellow, dan sebagainya.
Kode warna
Metode ini yaitu dengan menggunakan kode warna heksadesimal yang terdiri dari 6 digit angka
heksadesimal dan diawali dengan tanda pagar (#). Dua digit pertama adalah nilai warna merah (Red)
dalam warna RGB, dua digit berikutnya adalah warna hijau (Green) dalam warna RGB dan dua digit
terakhir adalah warna biru (Blue) dalam warna RGB. Kode warna yang 6 digit dapat disingkat menjadi 3
digit.
19 By: Witanto Heri Basuki, [Link]
DASAR PEMROGRAMAN CSS 2022
Gambar 24 CSS color
20 By: Witanto Heri Basuki, [Link]