Chapter4 PDF

chapter4.
md 3/9/2023
Modul Ajar 4
Konsep CSS dan contohnya
Tujuan
Mahasiswa mampu mengimplementasik an konsep pembuatan website dengan HTML, CSS, dan
JavaScript (C3)
Berkenalan dengan CSS
CSS (Cascading Style Sheets) adalah bahasa markup yang digunakan untuk mengatur tampilan halaman web.
Dengan menggunakan CSS, Anda dapat menentukan gaya elemen seperti font, warna, margin, padding, dll.
CSS membuat halaman web lebih mudah dikelola dan memberikan fleksibilitas untuk membuat halaman web
yang terlihat menarik dan profesional.
Fungsi utama CSS adalah untuk mengatur tampilan halaman web dan memisahkan konten dari presentasi.
Beberapa fungsi lain dari CSS adalah:
. Memberikan gaya yang konsisten pada halaman web yang terdiri dari banyak halaman.
. Membuat halaman web lebih aksesibel dengan mengatur font, warna, jarak, dan elemen lainnya.
. Mempermudah pemeliharaan halaman web dengan memisahkan presentasi dari konten.
. Mempercepat loading halaman web dengan memindahkan informasi gaya dari halaman HTML ke file
CSS terpisah.
Memungkinkan fleksibilitas dan kreativitas dalam membuat tampilan halaman web yang menarik dan
profesional.
Contoh Penggunaan CSS
Berikut adalah contoh penggunaan CSS dalam halaman web:
. Menentukan gaya dalam halaman HTML dengan tag style:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 36px;
color: #333;
text-align: center;
}
</style>
</head>
<body>
<h1>Ini adalah contoh penggunaan CSS dalam HTML</h1>
1 / 46
chapter4.md 3/9/2023
</body>
</html>
. Menentukan gaya dalam file CSS terpisah:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="judul">Ini adalah contoh penggunaan CSS dalam HTML</h1>
</body>
</html>
/* File style.css */
.judul {
font-size: 36px;
color: #333;
text-align: center;
}
Sejarah dan Perkembangan CSS

CSS (Cascading Style Sheets) pertama kali diciptakan oleh Håkon Wium Lie pada tahun 1994. Awalnya, CSS
digunakan untuk mengatur presentasi halaman web yang ditampilkan oleh browser. Saat itu, gaya halaman web
biasanya ditentukan melalui atribut HTML, yang membuat halaman web sulit dikelola dan tidak terlihat
profesional.
Pada tahun 1996, CSS versi 1.0 resmi diterima oleh W3C (World Wide Web Consortium) sebagai standar untuk
mengatur presentasi halaman web. Sejak itu, CSS mengalami perkembangan yang signifikan dan saat ini sudah
mencapai versi 3.0.
CSS menjadi sangat populer dan digunakan secara luas dalam pembuatan halaman web. Pada tahun 2000-an,
CSS memungkinkan desainer dan pengembang untuk membuat halaman web yang terlihat lebih menarik dan
profesional. CSS juga mempermudah pemeliharaan halaman web dengan memisahkan presentasi dari konten.
Sampai sekarang, CSS terus berkembang dan menjadi bahan yang sangat penting dalam pembuatan halaman
web modern. Fitur baru seperti layout grid, animasi, dll. membuat CSS lebih powerful dan fleksibel dalam
membuat tampilan halaman web yang menarik dan profesional.
Web Browser dan Text Editor
Untuk menulis dan menjalankan kode HTML dan CSS, Anda membutuhkan beberapa perangkat lunak, seperti:
Web browser:
2 / 46
. Google Chrome
. Mozilla Firefox
. Safari
. Microsoft Edge
. Opera
Text editor:
. Visual Studio Code
. Sublime Text
. Atom
. Brackets
. Adobe Dreamweaver
Perangkat lunak ini sangat penting bagi pengembang web untuk menulis, menguji, dan mempublikasikan kode
HTML dan CSS mereka. Web browser digunakan untuk menampilkan halaman web yang dibuat, sementara text
editor digunakan untuk menulis dan mengedit kode HTML dan CSS. Beberapa text editor menawarkan fitur
tambahan seperti autocomplete, syntax highlighting, dll. yang membantu pengembang dalam menulis kode
yang lebih cepat dan efisien.
Memilih Web Browser
Pemilihan web browser untuk menjalankan kode HTML dan CSS sangat tergantung pada kebutuhan dan
preferensi pribadi. Beberapa hal yang perlu dipertimbangkan dalam memilih web browser antara lain:
. Kompatibilitas: Pastikan bahwa web browser yang Anda pilih kompatibel dengan HTML dan CSS versi
terbaru dan memiliki fitur yang Anda butuhkan.
. Kecepatan dan Kinerja: Pilih web browser yang memiliki kecepatan dan kinerja yang baik, sehingga Anda
bisa bekerja dengan efisien.
. Fitur Tambahan: Beberapa web browser memiliki fitur tambahan seperti ekstensi, bookmark, dll. Pilihlah
web browser yang memiliki fitur yang Anda butuhkan.
. Kemudahan Penggunaan: Pilih web browser yang mudah digunakan dan memiliki antarmuka yang intuitif.
Beberapa web browser populer untuk HTML dan CSS antara lain Google Chrome, Mozilla Firefox, Safari,
Microsoft Edge, dan Opera. Semuanya memiliki fitur dan keunggulan masing-masing, jadi penting untuk
melakukan penelitian dan memilih web browser yang paling cocok dengan kebutuhan Anda.
Aturan Dasar Penulisan CSS
Berikut adalah aturan dasar penulisan CSS:
Penulisan Selector: Selector adalah elemen HTML yang akan diberi gaya. Anda dapat menentukan selector
berdasarkan tag HTML, class, atau ID.
Penulisan Properti dan Nilai: Setelah selector, Anda harus menentukan properti dan nilai yang akan digunakan
untuk memformat elemen. Properti dan nilai harus ditulis dalam tanda kurung kurawal {} dan dipisahkan dengan
tanda titik dua ( .
3 / 46
Koma dan Tanda Titik Koma: Anda dapat menentukan lebih dari satu properti untuk satu selector, yang
dipisahkan dengan koma. Setiap properti harus diakhiri dengan tanda titik koma.
Prioritas: Jika ada lebih dari satu definisi gaya untuk satu elemen, gaya yang memiliki prioritas tertinggi akan
digunakan. Prioritas bisa ditentukan dengan membedakan antara gaya internal, gaya eksternal, dan gaya inline.
Komentar: Komentar dalam CSS digunakan untuk menambahkan catatan dan dokumentasi pada kode CSS
Anda. Komentar ditulis antara tanda /* dan */.
Berikut ini adalah contoh sederhana dari aturan penulisan CSS:
selector {
properti: nilai;
properti: nilai;
}
Berikut ini adalah pengertian dari beberapa konsep penting dalam CSS:
. Selector: Selector adalah elemen HTML yang akan diberi gaya. Selector dapat ditentukan berdasarkan
tag HTML, class, atau ID.
. Declaration: Declaration adalah bagian dari gaya CSS yang menentukan properti dan nilai untuk elemen
yang dipilih oleh selector.
. Property: Property adalah bagian dari declaration yang menentukan fitur spesifik dari elemen HTML yang
akan diberi gaya, seperti warna, ukuran, font, dan banyak lagi.
. Value: Value adalah bagian dari declaration yang menentukan nilai dari property. Nilai dapat berupa
angka, warna, ukuran, font, dll.
Berikut ini adalah contoh sederhana dari penggunaan selector, declaration, property, dan value dalam CSS:
4 / 46
Gambar 1. Gambar: Selector dan Declaration Block CSS
Gambar 2. Selector, Property dan Value dalam CSS

Declaration terdiri dari pasangan property dan value. Property adalah bagian dari elemen HTML yang akan
diberi gaya, seperti jenis font, ukuran huruf, warna background, dll. Terdapat ratusan property yang tersedia
dalam CSS dan masih terus bertambah. Setiap property membutuhkan sebuah nilai sebagai satuannya,
misalnya ukuran font bisa menggunakan satuan pixel atau point. Namun, untuk property warna, value harus
5 / 46
berupa nama warna atau kode RGB. Keempat elemen ini membentuk dasar dari CSS dan akan dibahas lebih
detail sepanjang buku ini, termasuk bagian mana yang disebut selector, property, dan value CSS.
case-insensitive
CSS tidak sensitif terhadap besar kecil huruf (case-insensitive). Ini berarti bahwa property dan value CSS dapat
ditulis dengan huruf besar atau huruf kecil, dan hasil akan tetap sama. Misalnya, properti "color" dan "Color"
akan diinterpretasikan sebagai properti yang sama oleh browser.
Namun, dalam praktek, umumnya pengembang web menggunakan huruf kecil saat menulis CSS karena ini
lebih mudah dibaca dan memenuhi standar penulisan kode yang diterima secara luas. Dalam beberapa kasus,
beberapa properti memerlukan penulisan dengan huruf besar, seperti RGB, URL, dan sebagainya, tetapi ini
adalah kebiasaan dan tidak merupakan aturan wajib.
Whitespace
Whitespace dalam CSS tidak memiliki pengaruh pada hasil akhir. Whitespace adalah spasi, tab, dan baris baru
dalam kode CSS. Dalam CSS, whitespace dapat digunakan untuk memformat kode dengan lebih mudah dibaca
dan dikelola.
Meskipun demikian, browser tidak memperhatikan whitespace dalam CSS dan akan memproses kode CSS
sebagaimana adanya, tanpa memperdulikan jumlah spasi, tab, atau baris baru yang ada. Oleh karena itu, dalam
praktek, pengembang web biasanya menghindari penggunaan whitespace yang berlebihan dalam kode CSS
untuk menjaga ukuran file CSS tetap kecil dan performa aplikasi tetap baik.
Berikut adalah contoh penggunaan whitespace dalam CSS:
body {
background-color: lightgray;
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
color: navy;
font-size: 24px;
text-align: center;
}
p {
line-height: 1.5;
margin-bottom: 20px;
text-indent: 50px;
}
Dalam contoh ini, whitespace digunakan untuk memformat kode CSS agar lebih mudah dibaca dan dikelola.
Anda dapat menggunakan banyak spasi, tab, dan baris baru sebagai yang Anda inginkan, dan hasil akan tetap
sama. Namun, umumnya pengembang web mencoba memformat kode dengan cara yang sistematis dan
mudah dibaca.
6 / 46
Berikut adalah contoh penggunaan CSS tanpa whitespace:
body{background-color:lightgray;font-family:Arial,sans-serif;font-
size:16px;}h1{color:navy;font-size:24px;text-align:center;}p{line-
height:1.5;margin-bottom:20px;text-indent:50px;}
Pada contoh ini, tidak ada spasi, tab, atau baris baru yang digunakan dalam kode CSS. Kode ini akan
diterjemahkan dan diterapkan oleh browser dengan cara yang sama seperti contoh sebelumnya. Namun, kode
ini lebih sulit dibaca dan dikelola dibandingkan dengan contoh sebelumnya yang menggunakan whitespace.
Oleh karena itu, pengembang web biasanya mencoba memformat kode CSS dengan cara yang sistematis dan
mudah dibaca.
Membuat Komentar
Komentar digunakan untuk menambahkan catatan atau deskripsi dalam kode CSS. Komentar tidak akan
diterapkan sebagai gaya, tapi hanya digunakan sebagai dokumentasi untuk membantu pengembang
memahami kode.
Untuk membuat komentar dalam CSS, gunakan tanda /* untuk memulai komentar dan tanda */ untuk
mengakhiri komentar. Contohnya:
/* Ini adalah komentar CSS */

body {
background-color: lightgray;
font-size: 16px;
}
/* Komentar untuk elemen h1 */

h1 {
color: navy;
font-size: 24px;
text-align: center;
}
/* Komentar untuk elemen p */

p {
line-height: 1.5;
text-indent: 50px;
}
Anda dapat menambahkan komentar di mana saja dalam kode CSS, dan sebanyak yang Anda inginkan. Ini
sangat membantu ketika bekerja dengan kode yang panjang atau dikelola oleh banyak pengembang.
Cara Menginput kode CSS: Inline, Internal, dan External.
Ada tiga cara utama untuk menginput kode CSS ke dalam halaman HTML: inline, internal, dan external.
7 / 46
. Inline CSS: Ini adalah cara termudah untuk menambahkan gaya CSS ke elemen HTML. Ini dilakukan
dengan menambahkan atribut gaya langsung ke elemen HTML, seperti ini:
<p style="color: red;">This is a red paragraph.</p>
. Internal CSS: Ini adalah cara memasukkan CSS ke dalam halaman HTML dengan memasukkannya ke
dalam tag <style> di bagian head. Ini memungkinkan Anda untuk menambahkan gaya untuk satu
halaman web tanpa menggunakan file eksternal. Contoh:
<head>
<style>
p {
color: red;
}
</style>
</head>
. External CSS: Ini adalah cara terbaik untuk menambahkan CSS ke halaman web. Ini memungkinkan Anda
untuk memisahkan gaya dari konten dan membuat halaman web lebih mudah dikelola. Dalam hal ini,
kode CSS ditempatkan dalam file eksternal yang memiliki ekstensi .css dan di-link ke halaman HTML
menggunakan tag <link>. Contoh:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
CSS Selector
CSS Selector adalah cara untuk memilih elemen HTML dan menerapkan gaya CSS pada elemen tersebut. Anda
dapat memilih elemen berdasarkan tag HTML, class, id, atribut, atau kombinasi dari beberapa elemen.
Misalnya, selector "p" akan memilih semua paragraf di halaman, selector ".nama_class" akan memilih semua
elemen dengan class="nama_class", dan selector "#nama_id" akan memilih elemen dengan id="nama_id".
Penggunaan selector yang tepat akan membantu membuat gaya halaman web Anda lebih teratur dan mudah
diterapkan.
Pentingnya Struktur HTML
Struktur HTML sangat penting dalam CSS karena membentuk dasar dari bagaimana gaya CSS diterapkan pada
halaman web. Struktur HTML membantu menentukan bagaimana elemen halaman terorganisir dan terhubung
satu sama lain, yang kemudian membantu dalam menentukan bagaimana gaya CSS diterapkan pada elemen
tersebut. Jika struktur HTML tidak baik, maka gaya CSS yang diterapkan pada halaman web juga akan
terganggu dan tidak sesuai dengan harapan. Oleh karena itu, struktur HTML yang baik sangat penting untuk
memastikan bahwa gaya CSS diterapkan dengan benar dan membantu membuat halaman web tampil dengan
baik.
8 / 46
Universal Selector
Universal Selector (*) adalah selector CSS yang memilih semua elemen pada halaman web. Universal selector
menjadi selector default jika tidak ada selector lain yang diterapkan. Misalnya, gaya yang diterapkan melalui
universal selector akan diterapkan pada semua elemen pada halaman web, kecuali jika ada gaya lain yang
diterapkan melalui selector lain yang lebih spesifik. Universal selector sangat berguna jika Anda ingin
menerapkan gaya umum pada halaman web, seperti font default atau margin default. Misalnya:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Di sini, gaya yang diterapkan melalui universal selector akan mengeset margin dan padding pada semua elemen
pada halaman web menjadi nol, dan mengatur ukuran box menjadi border-box.
Element Selector
Element Selector adalah selector CSS yang memilih elemen berdasarkan tag HTML. Element selector ditulis
seperti nama tag HTML, tanpa tanda titik (.) atau tanda hash (#). Misalnya, selector "p" akan memilih semua
elemen paragraf <p> pada halaman web, selector "h1" akan memilih semua elemen judul <h1>, dan
seterusnya. Ini adalah selector yang paling sederhana dan paling sering digunakan dalam CSS. Misalnya:
p {
font-size: 16px;
color: #333;
}
Class Selector
Class Selector adalah selector CSS yang memilih elemen berdasarkan class HTML. Class selector ditulis
dengan tanda titik (.) sebelum nama class. Class selector sangat berguna jika Anda ingin menerapkan gaya
pada beberapa elemen yang memiliki class yang sama. Class selector memungkinkan Anda untuk memilih
elemen yang sama pada halaman web tanpa harus mengubah tag HTML dari elemen tersebut. Misalnya:
.nama_class {
font-size: 18px;
font-weight: bold;
color: #00f;
}
Di sini, gaya yang diterapkan melalui selector class ".nama_class" akan mengatur font-size, font-weight, dan
warna teks pada semua elemen yang memiliki class="nama_class" pada halaman web. Beberapa elemen pada
9 / 46
halaman web bisa memiliki class yang sama, dan gaya yang diterapkan melalui class selector akan diterapkan
pada semua elemen tersebut.
ID Selector
ID Selector adalah selector CSS yang memilih elemen berdasarkan ID HTML. ID selector ditulis dengan tanda
hash (#) sebelum nama ID. ID selector sangat berguna jika Anda ingin menerapkan gaya pada elemen tunggal
yang memiliki ID yang sama. ID selector memungkinkan Anda untuk memilih elemen tunggal pada halaman web
tanpa harus mengubah tag HTML dari elemen tersebut. Misalnya:
#nama_id {
font-size: 20px;
font-weight: bold;
color: #f00;
}
Di sini, gaya yang diterapkan melalui selector ID "#nama_id" akan mengatur font-size, font-weight, dan warna
teks pada elemen tunggal yang memiliki id="nama_id" pada halaman web. ID selector sangat spesifik dan
hanya dapat diterapkan pada satu elemen saja pada halaman web.
Berikut adalah contoh penggunaan ID selector dalam CSS: HTML:
<div id="header">
<h1>Ini adalah header</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
CSS:
#header {
background-color: #ccc;
padding: 20px;
text-align: center;
}
#header h1 {
font-size: 36px;
font-weight: bold;
}
10 / 46
Di sini, ID selector "#header" digunakan untuk memilih elemen <div id="header"> pada halaman web dan
menerapkan gaya pada elemen tersebut, seperti background-color, padding, dan text-align. ID selector
"#header h1" digunakan untuk memilih elemen <h1> yang berada dalam elemen <div id="header"> dan
menerapkan gaya pada elemen tersebut, seperti font-size, font-weight, dan margin-bottom.
Attribute Selector
Attribute Selector adalah selector CSS yang memilih elemen berdasarkan atribut HTML. Attribute selector
ditulis dengan tanda kurung siku ([ ]) sebelum nama atribut dan nilai atribut. Attribute selector sangat berguna
jika Anda ingin menerapkan gaya pada elemen berdasarkan nilai atribut tertentu. Misalnya:
a[href="#"] {
color: #f00;
}
Di sini, gaya yang diterapkan melalui selector attribute "a[href="#"]" akan mengatur warna teks pada semua
elemen <a> yang memiliki atribut href dengan nilai "#". Attribute selector juga dapat digunakan untuk memilih
elemen berdasarkan nilai awal atribut, nilai akhir atribut, dan juga nilai yang berisi substring tertentu. Misalnya:
input[type="text"] {
width: 200px;
height: 30px;
padding: 5px;
}
input[name^="prefix_"] {
background-color: #ccc;
}
input[name$="_suffix"] {
border-radius: 5px;
}
input[name*="substring"] {
font-weight: bold;
}
Di sini, gaya yang diterapkan melalui selector attribute "input[type="text"]" akan mengatur width, height,
dan padding pada semua elemen <input type="text">. Selector attribute "input[name^="prefix_"]"
akan memilih semua elemen <input> yang nama atributnya diawali dengan "prefix_" dan menerapkan
background-color. Selector attribute "input[name$="_suffix"]" akan memilih semua elemen <input>
yang nama atributnya diakhiri dengan "_suffix" dan menerapkan border-radius. Selector attribute
"input[name*="substring"]" akan memilih semua elemen <input> yang nama atributnya berisi
substring "substring" dan menerapkan font-weight.
Group Selector
11 / 46
Group Selector adalah sekumpulan selector yang memilih beberapa elemen sekaligus dan menerapkan gaya
yang sama pada elemen-elemen tersebut. Group selector ditulis dengan memisahkan selector-selector dengan
koma. Misalnya:
h1, h2, h3 {
color: #f00;
text-transform: uppercase;
}
Di sini, gaya yang diterapkan melalui group selector "h1, h2, h3" akan mengatur warna teks dan transformasi
teks pada semua elemen <h1>, <h2>, dan <h3>. Group selector sangat berguna jika Anda ingin menerapkan
gaya yang sama pada beberapa elemen yang berbeda. Misalnya, Anda dapat membuat group selector untuk
menerapkan gaya pada semua elemen header sekaligus.
Element Spesific Selector
Element-Specific Selector adalah selector CSS yang memilih elemen berdasarkan nama elemen dan beberapa
selector lainnya seperti class, id, dan atribut. Element-specific selector memiliki prioritas yang lebih tinggi
daripada selector lainnya karena mereka secara spesifik memilih elemen berdasarkan nama elemen. Misalnya:
ul li {
list-style-type: square;
margin-left: 20px;
}
ul li a {
color: #f00;
text-decoration: none;
}
Di sini, gaya yang diterapkan melalui group selector "h1, h2, h3" akan mengatur warna teks dan transformasi
teks pada semua elemen <h1>, <h2>, dan <h3>. Group selector sangat berguna jika Anda ingin menerapkan
gaya yang sama pada beberapa elemen yang berbeda. Misalnya, Anda dapat membuat group selector untuk
menerapkan gaya pada semua elemen header sekaligus.
Descendant Selector
Descendant Selector adalah selector CSS yang memilih elemen turunan dalam struktur HTML. Descendant
selector ditulis dengan memisahkan elemen induk dan elemen turunan dengan spasi. Misalnya:
ul li {
list-style-type: square;
margin-left: 20px;
}
ul ol li {
12 / 46
list-style-type: lower-roman;
margin-left: 40px;
}
Di sini, gaya yang diterapkan melalui descendant selector "ul li" akan memilih semua elemen <li> yang berada
dalam elemen <ul> dan menerapkan list-style-type dan margin-left. Descendant selector "ul ol li" akan
memilih semua elemen <li> yang berada dalam elemen <ol> yang berada dalam elemen <ul> dan
menerapkan list-style-type dan margin-left yang berbeda. Descendant selector sangat berguna jika Anda ingin
menerapkan gaya pada elemen turunan yang memiliki spesifikasi tertentu. Misalnya, Anda dapat membuat
descendant selector untuk menerapkan gaya pada elemen turunan dalam struktur HTML.
Child Selector
Child selector dalam HTML adalah sebuah selector CSS yang memungkinkan Anda untuk menentukan gaya
untuk elemen anak tertentu dalam suatu elemen induk. Child selector ditulis dengan menggunakan tanda lebih
besar (>) antara elemen induk dan elemen anak. Berikut adalah contoh sederhana dari penggunaan child
selector:
<style>
/* Menentukan gaya untuk elemen anak pertama dalam elemen induk */
.parent > :first-child {
background-color: yellow;
}
</style>
<div class="parent">
<p>Ini adalah elemen anak pertama dalam elemen induk.</p>
<p>Ini adalah elemen anak kedua dalam elemen induk.</p>
</div>
Di sini, gaya yang ditentukan akan diterapkan pada elemen <p> pertama dalam elemen induk dengan class
"parent". Elemen <p> kedua tidak akan terpengaruh oleh gaya ini.
contoh lain child selector :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
div > p {
color: green;
}
</style>
</head>
<body>
<h1>Belajar CSS</h1>
13 / 46
<p>Mohon jangan diganggu, lagi serius belajar CSS.</p>

<div>
<p>Paragraf di dalam tag div 1</p>
<article>
<p>Paragraf di dalam tag div dan article</p>
<p>Paragraf di dalam tag div dan article</p>
</article>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
ol ul>li {
color: red;
}
</style>
</head>
<body>
<ol>
<li>List pertama
<ul>
<li>Sub list 1</li>
<li>Sub list 2</li>
<li>Sub list 3</li>
</ul>
</li>
<li>List kedua</li>
<li>List ketiga</li>
<li>List keempat</li>
</ol>
</body>
</html>
Adjacent Selector
Adjacent selector adalah selector CSS yang memungkinkan Anda untuk menentukan gaya untuk elemen yang
berdampingan (bersebrangan) dengan elemen lain. Adjacent selector ditulis dengan menggabungkan dua
selector CSS dengan tanda plus (+). Berikut adalah contoh sederhana dari penggunaan adjacent selector:
14 / 46
<!DOCTYPE html>
<html>
<head>
<style>
div h2 {
color: green;
}
div + h2 {
color: red;
}
</style>
</head>
<body>
<div>
<h2>Header h2 di dalam tag div</h2>
<p>Sebuah paragraf di dalam div</p>
<p>Sebuah paragraf lain di dalam div</p>
</div>
<div>
<h2>Header h2 di dalam tag div</h2>
<p>Sebuah paragraf di dalam div</p>
<p>Sebuah paragraf lain di dalam div</p>
</div>
<h2>Header h2 di luar tag div</h2>

<p>Sebuah paragraf di luar div</p>
</body>
</html>
Saya menggunakan selector yang identik dengan yang telah kita diskusikan sebelumnya. Harap dicatat bahwa
paragraf terakhir tetap akan berwarna hijau, meskipun tidak berada di dalam tag <div>, karena ia adalah
saudara seperguruan dari tag <h2> sebelumnya.
General Sibling Selector
<style>
/* Menentukan gaya untuk elemen yang berada setelah h2 */
h2 ~ p {
}
</style>
<h2>Judul 1</h2>
15 / 46
<p>Ini adalah paragraf pertama.</p>

<p>Ini adalah paragraf kedua.</p>
<h2>Judul 2</h2>
<p>Ini adalah paragraf ketiga.</p>
<p>Ini adalah paragraf keempat.</p>
Di sini, gaya yang ditentukan akan diterapkan pada paragraf pertama dan paragraf kedua karena mereka
memiliki saudara seperguruan yaitu tag <h2> Judul 1. Paragraf ketiga dan keempat tidak akan terpengaruh oleh
gaya ini karena mereka memiliki saudara seperguruan yaitu tag <h2> Judul 2.
Pseudo Class Selector
Pseudo-class selector adalah selector CSS yang memungkinkan Anda untuk menentukan gaya untuk elemen
HTML berdasarkan posisi atau kondisi tertentu. Pseudo-class selector ditulis dengan menambahkan tanda tilde
dan nama kondisi (seperti :hover, :active, :focus, dll.) setelah selector elemen. Berikut adalah contoh sederhana
dari penggunaan pseudo-class selector:
<style>
/* Menentukan gaya saat link dikunjungi */
a:visited {
color: purple;
}
</style>
<a href="https://example.com">Link 1</a>

<a href="https://example.com">Link 2</a>
Di sini, gaya yang ditentukan akan diterapkan pada setiap link yang sudah dikunjungi (diberi warna ungu). Jika
Anda tidak pernah mengunjungi link tersebut, maka link tersebut akan berwarna default. Ada banyak kondisi
lain yang dapat Anda gunakan dengan pseudo-class selector, seperti :hover untuk gaya saat mouse berada di
atas elemen, :active untuk gaya saat elemen sedang diklik, :focus untuk gaya saat elemen memiliki fokus, dan
banyak lagi.
contoh lain :
<!DOCTYPE html>
<html>
<head>
<style>
:link {
color:red;
}
:visited {
color:green;
}
a:hover {
16 / 46
color:aqua;
}
</style>
</head>
<body>
<a id="daftar_kota">Daftar Kota</a>
<ul>
<li><a href="padang.html">Kota Padang</a></li>
<li><a href="medan.html">Kota Medan</a></li>
<li><a href="http://en.wikipedia.org/wiki/Jakarta">Kota Jakarta</a>
</li>
<li><a href="makassar.pdf">Kota Makassar</a></li>
</ul>
</body>
</html>
Structural Pseudo Class Selectors

Structural Pseudo-class Selectors adalah jenis pseudo-class selector yang memungkinkan Anda untuk
menentukan gaya untuk elemen HTML berdasarkan posisi atau hubungan dalam struktur dokumen. Contohnya
adalah :first-child, :last-child, :nth-child(), :not(), dan sebagainya. Berikut adalah contoh sederhana dari
penggunaan Structural Pseudo-class Selector:
<style>
/* Menentukan gaya untuk elemen pertama dalam setiap div */
div:first-child {
background-color: green;
}
</style>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<div>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</div>
Di sini, gaya yang ditentukan akan diterapkan pada setiap elemen pertama dalam setiap div (diberi warna hijau).
Structural Pseudo-class Selectors sangat berguna ketika Anda ingin menentukan gaya untuk elemen tertentu
dalam dokumen HTML Anda berdasarkan posisi atau hubungan dalam struktur dokumen.
contoh lain :
<!DOCTYPE html>
<html>
17 / 46
<head>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
width: 150px;
height: 30px;
padding: 0 10px;
font-size: 18px;
margin-left: 50px;
line-height: 30px;
}
li:first-child{
background-color: magenta;
}
li:last-child{
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
<li>List Keempat</li>
<li>List Kelima</li>
<li>List Keenam</li>
<li>List Ketujuh</li>
<li>List Kedelaan</li>
<li>List Kesembilan</li>
<li>List Kesepuluh</li>
<li>List Kesebelas</li>
<li>List Keduabelas</li>
<li>List Ketigabelas</li>
<li>List Keempatbelas</li>
<li>List Kelimabelas</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
18 / 46
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
width: 150px;
height: 30px;
padding: 0 10px;
font-size: 18px;
margin-left: 50px;
line-height: 30px;
}
li:nth-child(odd) {
background-color: magenta;
}
li:nth-child(even) {
}
</style>
</head>
<body>
<ul>
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
<li>List Keempat</li>
<li>List Kelima</li>
<li>List Keenam</li>
<li>List Ketujuh</li>
<li>List Kedelaan</li>
<li>List Kesembilan</li>
<li>List Kesepuluh</li>
<li>List Kesebelas</li>
<li>List Keduabelas</li>
<li>List Ketigabelas</li>
<li>List Keempatbelas</li>
<li>List Kelimabelas</li>
</ul>
</body>
</html>
Pseudo Selector :nth-of-type() dan :nth-last-of-type()

:nth-of-type(n) dan :nth-last-of-type(n) adalah dua jenis pseudo-selector yang memungkinkan Anda untuk
menentukan gaya untuk elemen HTML berdasarkan urutan ke-n dalam sekumpulan elemen HTML yang sama.
Kedua pseudo-selector ini sangat berguna ketika Anda ingin menentukan gaya untuk elemen tertentu
berdasarkan urutan kemunculannya dalam dokumen.
19 / 46
<style>
/* Menentukan gaya untuk setiap paragraf ke-3 */
p:nth-of-type(3) {
}
</style>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
Di sini, gaya yang ditentukan akan diterapkan pada paragraf ke-3 dalam dokumen (diberi warna hijau). :nth-of-
type(n) akan menentukan gaya untuk elemen ke-n dalam sekumpulan elemen yang sama, sementara :nth-last-
of-type(n) akan menentukan gaya untuk elemen ke-n dalam urutan terbalik.
<style>
/* Menentukan gaya untuk setiap paragraf ke-3 dari akhir */
p:nth-last-of-type(3) {
}
</style>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
Di sini, gaya yang ditentukan akan diterapkan pada paragraf ke-3 dari akhir dalam dokumen (diberi warna
hijau). :nth-of-type(n) dan :nth-last-of-type(n) sangat berguna ketika Anda ingin menentukan gaya untuk
elemen tertentu dalam dokumen HTML Anda berdasarkan urutan kemunculannya.
Pseudo Element Selector
Pseudo Element Selector adalah jenis selector CSS yang memungkinkan Anda menentukan gaya untuk bagian
spesifik dari elemen HTML tanpa memodifikasi elemen itu sendiri. Pseudo Element Selector menggunakan
tanda titik dua ( sebagai prefiks untuk menentukan bagian dari elemen HTML yang ingin diberi gaya. Ada
beberapa jenis Pseudo Element Selector, seperti ::before dan ::after.
<style>
/* Menambahkan content sebelum elemen <p> */
p::before {
content: "➡";
}
</style>
20 / 46
<p>This is a paragraph</p>
Di sini, pseudo element selector ::before digunakan untuk menambahkan simbol panah ke sebelum elemen
paragraf. Pseudo Element Selector sangat berguna ketika Anda ingin menambahkan elemen visual tambahan
ke halaman web Anda tanpa memodifikasi elemen HTML asli.
<style>
/* Menambahkan content setelah elemen <p> */
p::after {
content: "❤";
}
</style>
<p>This is a paragraph</p>
Di sini, pseudo element selector ::after digunakan untuk menambahkan simbol hati ke setelah elemen paragraf.
Pseudo Element Selector sangat berguna ketika Anda ingin menambahkan elemen visual tambahan ke halaman
web Anda tanpa memodifikasi elemen HTML asli.
Pseudo Element Selector ::first-line
Pseudo Element Selector ::first-line adalah jenis selector CSS yang memungkinkan Anda menentukan gaya
untuk baris pertama dari sebuah elemen teks. Selector ini sangat berguna untuk menentukan gaya untuk judul
atau bagian teks penting dalam halaman web Anda.
<style>
/* Menentukan gaya untuk baris pertama dari elemen <p> */
p::first-line {
font-weight: bold;
color: blue;
}
</style>
<p>This is a paragraph with multiple lines of text. The first line of this
text will have bold blue font.</p>
Di sini, pseudo element selector ::first-line digunakan untuk menentukan gaya font tebal dan warna biru untuk
baris pertama dari elemen paragraf. Ketika halaman web ditampilkan, baris pertama dari elemen paragraf akan
memiliki gaya font tebal dan warna biru, sementara baris lainnya akan menggunakan gaya default.
Perhatikan bahwa selector ini hanya berlaku untuk teks yang dapat membentuk baris baru, seperti elemen
paragraf atau elemen heading. Selector ini tidak berlaku untuk elemen teks tunggal, seperti elemen span atau
elemen strong.
Pseudo Element Selector ::first-letter
21 / 46
Pseudo Element Selector ::first-letter adalah jenis selector CSS yang memungkinkan Anda menentukan gaya
untuk huruf pertama dari sebuah elemen teks. Selector ini sangat berguna untuk menentukan gaya untuk judul
atau bagian teks penting dalam halaman web Anda.
<style>
/* Menentukan gaya untuk huruf pertama dari elemen <p> */
p::first-letter {
font-size: 32px;
font-weight: bold;
color: blue;
float: left;
margin-right: 10px;
}
</style>
<p>This is a paragraph with multiple lines of text. The first letter of

this text will have a large bold blue font and will be floated to the left
with a 10px right margin.</p>
Di sini, pseudo element selector ::first-letter digunakan untuk menentukan gaya font besar, tebal, warna biru,
dan float untuk huruf pertama dari elemen paragraf. Ketika halaman web ditampilkan, huruf pertama dari
elemen paragraf akan memiliki gaya font besar, tebal, warna biru, dan float, sementara huruf-huruf lainnya akan
menggunakan gaya default.
Perhatikan bahwa selector ini hanya berlaku untuk elemen teks tunggal, seperti elemen paragraf, elemen
heading, atau elemen span. Selector ini tidak berlaku untuk elemen teks yang tidak dapat membentuk baris
baru, seperti elemen strong atau elemen em.
Cascade, Inheritance dan Specificity
Cascade, Inheritance, dan Specificity adalah tiga konsep penting dalam CSS (Cascading Style Sheets) yang
mempengaruhi bagaimana gaya diterapkan pada halaman web.
. Cascade: Cascade (terjemahan bebas: terjun bebas) adalah cara bagaimana gaya CSS diterapkan pada
halaman web. Dalam CSS, banyak gaya yang dapat diterapkan pada elemen yang sama, dan CSS
menentukan gaya yang akan diterapkan dengan mengacu pada urutan gaya dan prioritas gaya.
. Inheritance: Inheritance (warisan) adalah cara bagaimana gaya CSS diteruskan dari elemen parent ke
elemen child. Dalam CSS, gaya dari elemen parent dapat diteruskan ke elemen child, sehingga Anda
dapat membuat gaya yang konsisten di seluruh halaman web dengan menentukan gaya hanya pada
elemen parent.
. Specificity: Specificity (spesifisitas) adalah ukuran kuat atau lemahnya gaya CSS diterapkan pada
elemen. Dalam CSS, gaya yang lebih spesifik akan memiliki prioritas yang lebih tinggi dibandingkan gaya
yang lebih umum. Selector yang lebih spesifik seperti ID selector memiliki prioritas yang lebih tinggi
dibandingkan selector seperti class selector atau tag selector.
Dengan memahami konsep Cascade, Inheritance, dan Specificity, Anda akan dapat membuat gaya CSS yang
konsisten, terstruktur, dan mudah dipelihara.
22 / 46
Cascade dari Cascading Style Sheet

Cascade dalam Cascading Style Sheet (CSS) adalah cara bagaimana gaya CSS diterapkan pada halaman web.
Dalam CSS, banyak gaya yang dapat diterapkan pada elemen yang sama, dan CSS menentukan gaya yang
akan diterapkan dengan mengacu pada urutan gaya dan prioritas gaya.
Secara sederhana, cascade adalah cara bagaimana gaya diterapkan dari beberapa sumber gaya yang berbeda,
seperti file CSS eksternal, style tag dalam head HTML, atau gaya inline. Dalam hal ini, gaya terakhir yang
diterapkan pada elemen akan menjadi gaya yang akan diterapkan. Namun, jika gaya yang diterapkan memiliki
prioritas yang lebih tinggi, maka gaya tersebut akan tetap diterapkan meskipun ada gaya lain yang diterapkan
setelahnya.
Mengerti cara kerja cascade sangat penting bagi pengembang web untuk membuat gaya yang konsisten dan
terstruktur. Dengan memahami cascade, pengembang web dapat memastikan bahwa gaya yang diinginkan
diterapkan pada halaman web dan memastikan bahwa gaya tidak teroverride oleh gaya lain yang tidak
diinginkan.
Inheritance Style CSS
Inheritance dalam CSS adalah proses dimana elemen anak mewarisi gaya dari elemen induknya. Dalam CSS,
beberapa gaya dapat diterapkan secara bersamaan pada elemen yang sama dan elemen anak akan mewarisi
gaya dari elemen induk.
Inheritance sangat berguna karena memungkinkan pengembang web untuk menentukan gaya secara global
dan mengurangi jumlah kode yang harus ditulis. Misalnya, jika gaya diterapkan pada elemen body, maka semua
elemen anak dalam body akan mewarisi gaya tersebut.
Untuk memahami inheritance dalam CSS, perlu diingat bahwa beberapa gaya tidak dapat diteruskan, seperti
gaya margin dan padding. Dalam hal ini, elemen anak tidak akan mewarisi gaya dari elemen induk.
Mengerti bagaimana inheritance bekerja dalam CSS sangat penting bagi pengembang web untuk memastikan
gaya yang konsisten dan terstruktur diterapkan pada halaman web. Dengan memahami inheritance,
pengembang web dapat memastikan bahwa gaya yang diinginkan diterapkan secara efisien dan dengan cara
yang sesuai.
Berikut adalah contoh sederhana dari inheritance dalam CSS:
. File CSS Eksternal:
body {
font-family: Arial;
font-size: 14px;
}
h1 {
color: blue;
}
. HTML:
23 / 46
<body>
<h1>Judul Utama</h1>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
</body>
Dalam contoh ini, gaya diterapkan pada elemen body dan h1. Karena gaya font-family dan font-size diterapkan
pada elemen body, semua elemen anak dalam body, seperti h1 dan paragraf, akan mewarisi gaya tersebut. Oleh
karena itu, h1 dan paragraf memiliki font-family Arial dan font-size 14px.
Namun, warna h1 adalah biru karena gaya ini tidak diterapkan pada elemen body. Oleh karena itu, warna biru
merupakan gaya yang diterapkan pada elemen h1 dan tidak diteruskan ke elemen anak lain dalam body.
Specificity Selector
Specificity adalah sistem yang menentukan gaya apa yang akan diterapkan pada elemen HTML saat ada
beberapa gaya yang berpotensi diterapkan pada elemen yang sama. Dalam CSS, specificity menentukan gaya
mana yang harus diterapkan pada elemen saat gaya tersebut berasal dari sumber yang berbeda, seperti file
CSS eksternal, atau gaya yang diterapkan secara inline.
Specificity didasarkan pada prioritas yang diterapkan pada gaya. Semakin spesifik gaya yang diterapkan,
semakin tinggi prioritas gaya tersebut. Misalnya, gaya yang diterapkan secara inline memiliki prioritas yang lebih
tinggi dibandingkan gaya yang diterapkan dalam file CSS eksternal.
Berikut adalah urutan prioritas dari specificity:
. Gaya yang diterapkan secara inline, seperti gaya yang diterapkan pada elemen HTML menggunakan
atribut style.
. Gaya yang diterapkan dalam tag <style> pada halaman HTML.
. Gaya yang diterapkan dalam file CSS eksternal.
. Gaya bawaan dari browser. Dengan memahami bagaimana specificity bekerja dalam CSS, pengembang
web dapat memastikan bahwa gaya yang diinginkan diterapkan pada halaman web. Misalnya, jika
pengembang web ingin memastikan bahwa gaya tertentu diterapkan pada elemen HTML, mereka dapat
memastikan bahwa gaya tersebut memiliki prioritas yang lebih tinggi dengan menentukan gaya secara
inline.
contoh penerapannya :
<!DOCTYPE html>
<html>
<head>
<style>
#paragrafPertama{
color: red;
}
.paragraf{
24 / 46
color: blue;
}
p{
color: green;
}
</style>
</head>
<body>
<p class="paragraf" id="paragrafPertama">
Paragraf ini akan berwarna merah? hijau? biru?
</p>
</body>
</body>
</html>
!important adalah keyword yang sangat penting dalam CSS. Ini memungkinkan gaya untuk memiliki prioritas
tertinggi dalam specificity, meskipun gaya tersebut mungkin tidak spesifik.
Ketika gaya diterapkan dengan !important, gaya tersebut akan mengalahkan gaya apa pun yang diterapkan
pada elemen yang sama, termasuk gaya yang diterapkan secara inline. Ini sangat berguna jika Anda ingin
memastikan bahwa gaya tertentu diterapkan pada halaman web, meskipun gaya tersebut mungkin tidak
spesifik.
Perhatikan bahwa penggunaan !important harus digunakan dengan hati-hati, karena dapat membuat gaya
halaman web menjadi kacau dan sulit untuk diterapkan. Sebaiknya, hindari penggunaan !important sebanyak
mungkin dan gunakan metode specificity yang lebih baik, seperti spesifikasi selector atau penggunaan style
inline, untuk memastikan gaya yang diinginkan diterapkan pada halaman web.
Berikut adalah contoh penggunaan !important dalam CSS:
p {
color: blue !important;
}
Dengan contoh di atas, semua teks dalam tag <p> akan diterapkan warna biru, meskipun ada gaya lain yang
diterapkan pada tag <p> dan menentukan warna yang berbeda.
<p style="color: green;">This text will be blue, not green!</p>
Dengan menambahkan !important pada gaya, kita memastikan bahwa teks akan berwarna biru, bukan hijau,
meskipun gaya inline yang diterapkan pada tag <p> menentukan warna hijau.
Merencanakan Kode CSS
Merencanakan kode CSS adalah tahap penting dalam membuat situs web yang berkualitas. Berikut adalah
beberapa langkah untuk membantu Anda merencanakan kode CSS Anda:
25 / 46
Identifikasi elemen yang akan diberikan gaya. Ini bisa meliputi tag HTML standar, seperti <h1> atau <p>, atau
elemen custom, seperti <header> atau <nav>.
Buat desain visual untuk halaman web. Ini bisa mencakup sketsa halaman, wireframe, atau desain mockup yang
menunjukkan bagaimana elemen yang diberikan gaya akan muncul.
Tentukan warna dan font yang akan digunakan. Ini bisa didasarkan pada desain visual atau pada pedoman
warna dan tipografi yang sudah ditentukan.
Buat daftar gaya yang akan diterapkan pada elemen. Ini bisa meliputi margin, padding, ukuran font, warna latar
belakang, dan lain-lain.
Tentukan prioritas specificity untuk gaya. Ini bisa dilakukan dengan menentukan selector yang paling spesifik
dan menentukan prioritas dengan menggunakan selector yang lebih spesifik untuk gaya yang lebih penting.
Tentukan gaya yang akan diterapkan pada halaman web secara keseluruhan. Ini bisa mencakup gaya untuk
elemen HTML standar, seperti <body> atau <html>, atau gaya untuk elemen custom yang digunakan secara
luas pada halaman web.
Buat kode CSS. Ini bisa meliputi menulis gaya satu per satu atau menggunakan preprocessor CSS, seperti Sass,
untuk mempermudah pemeliharaan dan mengelola gaya secara lebih efisien.
Dengan merencanakan kode CSS Anda dengan baik, Anda dapat memastikan bahwa halaman web Anda
terlihat bagus dan bekerja dengan baik, serta memudahkan pemeliharaan dan peningkatan halaman web di
masa depan.
CSS Typography
CSS Typography adalah bagian dari kode CSS yang mengatur tampilan teks pada halaman web. Berikut adalah
beberapa gaya typografi yang dapat diterapkan dengan CSS:
. Font family: menentukan jenis font yang akan digunakan pada teks, seperti Arial, Times New Roman, atau
Georgia.
. Ukuran font: menentukan ukuran font dalam piksel atau ukuran relatif, seperti 16px atau 1em.
. Warna font: menentukan warna font yang akan digunakan, seperti biru, hijau, atau merah.
. Tipe huruf: menentukan jenis huruf, seperti tebal, miring, atau normal.
. Spacing huruf: menentukan jarak antar huruf, seperti jarak huruf pada kata.
. Tinggi baris: menentukan jarak antar baris dalam teks.
. Align teks: menentukan posisi teks, seperti rata kiri, rata kanan, atau rata tengah.
. Transformasi teks: mengubah bentuk teks, seperti membuat huruf besar atau membuat huruf miring.
Dengan menggunakan CSS typography, Anda dapat memastikan bahwa teks pada halaman web terlihat bagus
dan mudah dibaca, serta menyesuaikan tampilan teks dengan desain visual situs web.
Property font-family
26 / 46
font-family adalah properti CSS yang digunakan untuk menentukan jenis font yang akan digunakan pada teks
pada halaman web. Ini memungkinkan Anda untuk menyesuaikan tampilan teks dengan desain visual situs web.
Contoh:
body {
}
h1 {
font-family: Times New Roman, serif;
}
Di sini, properti font-family digunakan untuk menentukan bahwa font Arial akan digunakan pada teks pada tag
body, sedangkan font Times New Roman akan digunakan pada teks pada tag h1. Jika font yang ditentukan tidak
tersedia pada perangkat yang menampilkan halaman web, maka font default akan digunakan. Dalam hal ini, font
sans-serif atau serif akan digunakan sebagai font default.
Mengenal ‘Generic Fontʼ
"Generic Fonts" adalah kelompok font yang didefinisikan sebagai kategori umum font. Ini dapat digunakan
sebagai font default jika font yang ditentukan tidak tersedia pada perangkat yang menampilkan halaman web.
Ada empat kategori font generic:
serif: font dengan garis tambahan yang menambahkan detil pada huruf. Contohnya adalah Times New Roman
dan Georgia.
sans-serif: font tanpa garis tambahan. Contohnya adalah Arial dan Verdana.
monospace: font dengan spasi yang sama antar setiap karakter. Contohnya adalah Courier dan Lucida Console.
cursive: font dengan gaya menulis tangan. Contohnya adalah Comic Sans dan Brush Script.
Contoh penggunaan font generic:
body {
}
h1 {
font-family: Times New Roman, serif;
}
pre {
font-family: Courier, monospace;
}
Di sini, properti font-family digunakan untuk menentukan font yang akan digunakan pada teks pada tag body,
h1, dan pre. Jika font yang ditentukan tidak tersedia pada perangkat yang menampilkan halaman web, maka
27 / 46
font generic sans-serif, serif, atau monospace akan digunakan sebagai font default.
Property font-size
Proporsi font-size adalah sebuah proporsi CSS yang digunakan untuk menentukan ukuran font untuk sebuah
elemen. Proporsi ini digunakan untuk menentukan ukuran teks dalam elemen HTML. Nilai font-size dapat
ditentukan dengan berbagai unit ukuran, termasuk pixel (px), ems (em), poin (pt), atau sebagai persentase dari
ukuran font elemen induk.
Berikut ini adalah contoh bagaimana menentukan ukuran font untuk elemen paragraf:
p {
font-size: 16px;
}
Satuan Length CSS

Dalam CSS, ada beberapa satuan panjang yang dapat digunakan untuk menentukan ukuran elemen, seperti
font, margin, padding, dll. Berikut adalah satuan panjang yang paling umum digunakan dalam CSS:
. Pixels (px) - Satuan pixel adalah satuan yang paling umum digunakan dalam CSS. Ini memungkinkan
Anda menentukan ukuran elemen dengan jumlah tetap dari pixel.
. Ems (em) - Satuan em adalah ukuran relatif terhadap ukuran font yang berlaku untuk elemen tersebut. 1
em sama dengan ukuran font dalam piksel.
. Points (pt) - Satuan poin adalah satuan ukuran yang digunakan dalam desain cetak. 1 poin sama dengan
1/72 inci.
. Percentage (%) - Satuan persentase memungkinkan Anda menentukan ukuran elemen sebagai
persentase dari ukuran font elemen induk.
. Rems (rem) - Satuan rem mirip dengan em, tetapi selalu berdasarkan ukuran font dari elemen root
(HTML) dalam dokumen, bukan elemen induknya.
Contoh penggunaan satuan panjang dalam CSS:
h1 {
font-size: 32px;
}
p {
font-size: 1.5em;
margin: 1rem;
padding: 10%;
}
Nilai Absolut
28 / 46
Nilai absolut dalam CSS adalah nilai tetap yang dapat digunakan untuk menentukan ukuran elemen, seperti
font, margin, padding, dll. Nilai absolut tidak berubah berdasarkan ukuran font atau lingkungan lainnya.
Berikut adalah beberapa contoh nilai absolut yang sering digunakan dalam CSS:
. Pixels (px) - Pixel adalah satuan yang paling umum digunakan dalam CSS untuk menentukan ukuran
elemen.
. Points (pt) - Poin adalah satuan ukuran yang digunakan dalam desain cetak dan sering digunakan dalam
CSS untuk menentukan ukuran font.
. Inches (in) - Inci adalah satuan ukuran yang sering digunakan dalam desain cetak dan kurang umum
digunakan dalam CSS.
. Millimeters (mm) - Milimeter adalah satuan ukuran yang sering digunakan dalam desain cetak dan
kurang umum digunakan dalam CSS.
Contoh penggunaan nilai absolut dalam CSS:
h1 {
font-size: 32px;
}
p {
margin: 20px;
padding: 10pt;
}
Nilai Relatif
Nilai relatif dalam CSS adalah nilai yang ditentukan sebagai persentase dari ukuran elemen atau font yang
berlaku. Nilai relatif berubah berdasarkan ukuran font atau lingkungan lainnya.
Berikut adalah beberapa contoh nilai relatif yang sering digunakan dalam CSS:
. Ems (em) - Em adalah satuan yang berdasarkan ukuran font yang berlaku untuk elemen tersebut. 1 em
sama dengan ukuran font dalam piksel.
. Percentage (%) - Persentase memungkinkan Anda menentukan ukuran elemen sebagai persentase dari
ukuran font elemen induk.
. Rems (rem) - Rem mirip dengan em, tetapi selalu berdasarkan ukuran font dari elemen root (HTML)
dalam dokumen, bukan elemen induknya.
Contoh penggunaan nilai relatif dalam CSS:
h1 {
font-size: 2em;
}
29 / 46
p {
font-size: 80%;
margin: 2rem;
padding: 5%;
}
Property color
"color" adalah properti CSS yang digunakan untuk menentukan warna teks atau warna latar belakang elemen.
Nilai warna dapat ditentukan dengan menggunakan nama warna, notasi RGB, notasi HEX, atau notasi HSL.
Berikut adalah beberapa contoh penggunaan properti "color":
p {
color: blue;
}
h1 {
color: #00ff00;
}
body {
background-color: rgb(255, 0, 0);
}
a {
color: hsl(120, 100%, 50%);
}
Perlu diingat bahwa properti "color" hanya berlaku untuk teks dalam elemen dan tidak mempengaruhi warna
latar belakang elemen itu sendiri. Untuk menentukan warna latar belakang, Anda harus menggunakan properti
"background-color".
Satuan Color (Warna) CSS
Dalam CSS, ada beberapa cara untuk menentukan warna:
. Nama warna: Anda dapat menentukan warna dengan menggunakan nama warna bawaan seperti "red",
"blue", "green", dll.
p {
color: red;
}
. Notasi HEX: Anda dapat menentukan warna dengan menggunakan notasi HEX. Notasi HEX adalah
representasi 6 digit dari warna RGB.
30 / 46
p {
color: #ff0000;
}
. Notasi RGB: Anda dapat menentukan warna dengan menggunakan notasi RGB. Notasi RGB
memungkinkan Anda untuk menentukan intensitas masing-masing warna merah, hijau, dan biru.
p {
color: rgb(255, 0, 0);
}
. Notasi HSL: Anda dapat menentukan warna dengan menggunakan notasi HSL (Hue, Saturation,
Lightness). Notasi HSL memungkinkan Anda untuk menentukan warna berdasarkan hue (tonalitas),
saturation (kejenuhan), dan lightness (kecerahan).
p {
color: hsl(0, 100%, 50%);
}
Semua metode ini dapat digunakan untuk menentukan warna pada elemen HTML dan bisa digunakan pada
properti "color" dan "background-color".
Property font-weight
"font-weight" adalah properti CSS yang digunakan untuk menentukan tebal atau tipisnya font pada elemen
HTML. Nilai yang dapat ditentukan bisa berupa angka atau kata kunci.
Berikut adalah beberapa contoh penggunaan properti "font-weight":
p {
font-weight: 400;
}
h1 {
font-weight: bold;
}
strong {
font-weight: 700;
}
Nilai angka yang dapat ditentukan berkisar antara 100 hingga 900, dengan 400 sebagai nilai default (normal)
dan 700 sebagai nilai untuk bold. Kata kunci yang dapat ditentukan adalah "normal" dan "bold". Anda juga
31 / 46
dapat menggunakan kata kunci "lighter" dan "bolder" untuk menentukan font weight relatif terhadap font
weight parent.
Property font-style
"font-style" adalah properti CSS yang digunakan untuk menentukan gaya font pada elemen HTML. Nilai yang
dapat ditentukan adalah "normal", "italic", dan "oblique".
Berikut adalah beberapa contoh penggunaan properti "font-style":
p {
font-style: normal;
}
em {
font-style: italic;
}
strong {
font-style: oblique;
}
Nilai "normal" menentukan bahwa font akan ditampilkan dalam gaya biasa. Nilai "italic" menentukan bahwa font
akan ditampilkan dalam gaya miring. Nilai "oblique" menentukan bahwa font akan ditampilkan dalam gaya
miring kecil.
Perlu diingat bahwa semua font tidak memiliki gaya italic dan oblique. Oleh karena itu, Anda harus memastikan
bahwa font yang Anda gunakan memiliki gaya yang dibutuhkan sebelum menentukan gaya font dengan properti
"font-style".
Property text-align
"text-align" adalah properti CSS yang digunakan untuk menentukan bagaimana teks dalam elemen HTML harus
diatur (di-align) secara horizontal. Nilai yang dapat ditentukan adalah "left", "right", "center", dan "justify".
Berikut adalah beberapa contoh penggunaan properti "text-align":
p {
text-align: left;
}
h1 {
text-align: center;
}
.quote {
text-align: justify;
}
32 / 46
Nilai "left" menentukan bahwa teks akan diatur ke sisi kiri. Nilai "right" menentukan bahwa teks akan diatur ke
sisi kanan. Nilai "center" menentukan bahwa teks akan diatur secara horizontal di tengah. Nilai "justify"
menentukan bahwa teks akan diatur secara rata ke kedua sisi, membuat teks terlihat rata di setiap baris.
Property line-height
"line-height" adalah properti CSS yang digunakan untuk menentukan tinggi baris pada elemen HTML. Nilai
yang dapat ditentukan bisa berupa angka, persentase, atau unit ukuran lain seperti piksel (px) atau poin (pt).
Berikut adalah beberapa contoh penggunaan properti "line-height":
p {
line-height: 1.5;
}
h1 {
line-height: 120%;
}
.large-text {
line-height: 36px;
}
Nilai angka (seperti 1.5) menentukan tinggi baris relatif terhadap ukuran font. Nilai persentase (seperti 120%)
menentukan tinggi baris relatif terhadap ukuran font dalam persentase. Nilai unit ukuran (seperti 36px)
menentukan tinggi baris dalam unit ukuran tertentu.
Menentukan tinggi baris dengan properti "line-height" sangat berguna untuk memperbaiki jarak antar baris teks
dan membuat teks terlihat lebih teratur dan mudah dibaca.
Property margin-bottom
"margin-bottom" adalah properti CSS yang digunakan untuk menentukan ruang bebas (margin) dalam ukuran
tertentu pada bagian bawah elemen HTML. Nilai yang dapat ditentukan bisa berupa angka, persentase, atau
unit ukuran lain seperti piksel (px) atau poin (pt).
Berikut adalah beberapa contoh penggunaan properti "margin-bottom":
p {
margin-bottom: 1em;
}
h1 {
}
.highlight {
margin-bottom: 5%;
}
33 / 46
Nilai unit ukuran (seperti 20px) menentukan ukuran margin dalam unit ukuran tertentu. Nilai angka (seperti
1em) menentukan ukuran margin relatif terhadap ukuran font. Nilai persentase (seperti 5%) menentukan ukuran
margin relatif terhadap ukuran parent element dalam persentase.
Menentukan margin pada bagian bawah elemen HTML dengan properti "margin-bottom" sangat berguna untuk
membuat jarak antar elemen dan membuat halaman web terlihat lebih teratur dan bersih.
Property text-shadow
"text-shadow" adalah properti CSS yang digunakan untuk menambahkan bayangan pada teks dalam elemen
HTML. Nilai yang dapat ditentukan adalah koordinat x dan y, radius blur, dan warna bayangan.
Berikut adalah beberapa contoh penggunaan properti "text-shadow":
p {
text-shadow: 1px 1px #333;
}
h1 {
text-shadow: 2px 2px 5px #000;
}
.highlight {
text-shadow: 0px 0px 10px yellow;
}
Nilai pertama dan kedua adalah koordinat x dan y, yang menentukan posisi bayangan pada sumbu x dan y. Nilai
ketiga adalah radius blur, yang menentukan seberapa banyak bayangan akan terlihat "buram". Nilai keempat
adalah warna bayangan.
Menambahkan bayangan pada teks dengan properti "text-shadow" sangat berguna untuk membuat teks
terlihat lebih tiga dimensi dan menambah kesan kreatif dan visual pada halaman web.
Menggunakan Google Font
Google Fonts adalah layanan font gratis yang dapat digunakan dalam halaman web Anda. Anda bisa
memasukkan font Google Font ke dalam halaman web Anda dengan menambahkan kode CSS berikut ini ke
dalam file HTML Anda:
<link href="https://fonts.googleapis.com/css2?family=Nama
Font:wght@nilai&display=swap" rel="stylesheet">
Gantilah "Nama Font" dengan nama font Google yang ingin Anda gunakan, dan "nilai" dengan varian berat font
yang Anda inginkan (misalnya 400 untuk normal, 700 untuk bold).
Setelah memasukkan kode CSS tersebut, Anda bisa menggunakan font Google Font dengan menentukan
properti "font-family" pada elemen HTML yang ingin Anda gunakan font tersebut:
34 / 46
body {
font-family: 'Nama Font', sans-serif;
}
Gantilah "Nama Font" dengan nama font Google yang sama seperti yang Anda masukkan pada kode CSS
sebelumnya. Jangan lupa menambahkan "sans-serif" atau "serif" setelah nama font untuk memberikan
alternatif font jika font Google tidak bisa ditampilkan.
Dengan menggunakan Google Fonts, Anda dapat menambahkan gaya dan kesan kreatif pada halaman web
Anda tanpa harus membeli font atau mengunduh font gratis dari sumber yang tidak terpercaya.
CSS Box Model
CSS Box Model adalah suatu konsep yang menjelaskan bagaimana elemen HTML ditampilkan dan diterapkan
sebagai sebuah kotak pada halaman web. Setiap elemen HTML memiliki beberapa bagian dasar, yaitu:
Content: Ini adalah bagian dalam kotak yang berisi teks, gambar, atau elemen HTML lainnya.
Padding: Ini adalah ruang antara konten dan border. Padding bisa diterapkan dengan menggunakan properti
CSS seperti padding-top, padding-right, padding-bottom, dan padding-left.
Border: Ini adalah garis yang mengelilingi konten dan padding. Border bisa diterapkan dengan menggunakan
properti CSS seperti border-width, border-style, dan border-color.
Margin: Ini adalah ruang antara border dan elemen HTML lainnya pada halaman web. Margin bisa diterapkan
dengan menggunakan properti CSS seperti margin-top, margin-right, margin-bottom, dan margin-left.
Dengan menggunakan CSS Box Model, Anda dapat mengontrol bagaimana elemen HTML ditampilkan dan
berinteraksi dengan elemen HTML lain pada halaman web.
Property width dan height
Properti width dan height adalah dua properti CSS yang digunakan untuk menentukan ukuran dari sebuah
elemen HTML.
Properti width digunakan untuk menentukan lebar dari elemen, sedangkan properti height digunakan untuk
menentukan tinggi dari elemen. Kedua properti ini dapat diterapkan dengan menggunakan nilai absolut (seperti
piksel) atau nilai relatif (seperti persen).
Contoh:
div {
width: 500px;
height: 300px;
}
Di sini, elemen div akan memiliki lebar sebesar 500 piksel dan tinggi sebesar 300 piksel.
35 / 46
Perlu diingat bahwa ukuran yang ditentukan dengan menggunakan properti width dan height akan
mengabaikan isi dari elemen, sehingga jika isi elemen melebihi ukuran yang ditentukan, maka akan terjadi
pemotongan isi. Oleh karena itu, penting untuk memastikan bahwa ukuran yang ditentukan dengan
menggunakan properti width dan height memadai untuk menampung seluruh isi elemen.
Satuan Persen untuk width dan height
Anda dapat menentukan ukuran elemen HTML menggunakan satuan persen (%). Satuan persen digunakan
untuk menentukan ukuran elemen relatif terhadap ukuran elemen induk (parent element).
Contoh:
div {
width: 50%;
height: 75%;
}
Di sini, elemen div akan memiliki lebar setengah dari ukuran elemen induknya, dan tingginya akan seperempat
dari ukuran elemen induknya.
Perlu diingat bahwa jika elemen induk tidak memiliki ukuran yang ditentukan, maka ukuran elemen anak juga
tidak akan dapat ditentukan dengan benar. Oleh karena itu, sangat penting untuk memastikan bahwa elemen
induk memiliki ukuran yang ditentukan dan memadai untuk menentukan ukuran elemen anak secara relatif.
contoh :
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 800px;
}
h3 {
width: 30%;
height: 5%;
}
p {
width: 80%;
height: 15%;
}
</style>
</head>
<body>
<h3>Belajar Box Model</h3>
<p>Sebuah paragraf sederhana</p>
36 / 46
</body>
</html>
Property overflow
Properti overflow adalah properti CSS yang digunakan untuk mengontrol bagaimana elemen HTML
menampilkan isinya jika isi elemen melebihi ukuran yang ditentukan dengan menggunakan properti width dan
height.
Ada beberapa nilai yang dapat diterapkan untuk properti overflow, di antaranya:
. visible: Isi elemen akan ditampilkan tanpa pemotongan, meskipun melebihi ukuran yang ditentukan.
. hidden: Isi elemen yang melebihi ukuran yang ditentukan akan ditempatkan di luar elemen dan tidak
dapat dilihat.
. scroll: Isi elemen yang melebihi ukuran yang ditentukan akan ditempatkan di luar elemen dan akan dapat
dilihat dengan menggunakan scrollbar.
. auto: Scrollbar hanya akan ditampilkan jika isi elemen melebihi ukuran yang ditentukan.
Contoh:
div {
width: 500px;
height: 300px;
overflow: auto;
}
Di sini, elemen div akan memiliki lebar sebesar 500 piksel dan tinggi sebesar 300 piksel. Jika isi elemen
melebihi ukuran yang ditentukan, maka scrollbar akan ditampilkan untuk memungkinkan pengguna melihat
seluruh isi elemen.
Property Padding
"Property padding" adalah sebuah properti dalam CSS yang digunakan untuk menambahkan jarak atau ruang
tambahan antara isi elemen HTML dan batasnya. Jarak ini disebut sebagai "padding" dan dapat diterapkan ke
bagian atas, kanan, bawah, atau kiri dari elemen tersebut. Penambahan padding dapat membantu memperluas
ukuran elemen dan memberikan ruang untuk konten yang ada di dalamnya. Ini juga dapat digunakan untuk
membuat tata letak desain yang lebih rapi dan menambahkan jarak visual antar elemen pada halaman web.
Berikut adalah contoh penggunaan properti padding pada sebuah elemen HTML:
<div style="padding: 20px;">

<p>Ini adalah contoh elemen dengan padding 20px.</p>
</div>
37 / 46
Dalam contoh di atas, properti padding: 20px diterapkan pada elemen div, sehingga jarak antara isi elemen dan
batasnya akan menjadi 20px.
Anda juga dapat menentukan nilai padding untuk setiap sisi elemen secara terpisah, seperti ini:
<div style="padding-top: 10px; padding-right: 20px; padding-bottom: 30px;

padding-left: 40px;">
<p>Ini adalah contoh elemen dengan padding masing-masing 10px, 20px,
30px, dan 40px untuk bagian atas, kanan, bawah, dan kiri.</p>
</div>
Penting untuk diingat bahwa padding tidak akan mempengaruhi ukuran elemen secara keseluruhan, tetapi
hanya akan menambahkan jarak tambahan antara isi elemen dan batasnya.
contoh lain :
<!DOCTYPE html>
<html>
<head>
<style>
p{
padding-top: 40px;
padding-bottom: 30px;
padding-left: 15px;
padding-right: 25px;
border: 1px solid black;
}
</style>
</head>
<body>
<h3>Belajar Padding</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
accumsan odio ac lectus mollis finibus.
</p>
</body>
</html>
Property border
"Property border" adalah properti CSS yang digunakan untuk menambahkan sebuah batas (border) di sekitar
elemen HTML. Batas tersebut dapat didefinisikan dalam hal lebar, gaya, dan warna, dan dapat diterapkan ke
empat sisi elemen.
Berikut adalah contoh penggunaan properti border pada sebuah elemen HTML:
38 / 46
<div style="border: 2px solid black;">

<p>Ini adalah contoh elemen dengan border 2px dan warna hitam.</p>
</div>
Dalam contoh di atas, properti border: 2px solid black diterapkan pada elemen div, sehingga akan muncul
sebuah border dengan lebar 2px dan warna hitam. Gaya border dalam contoh ini adalah solid (padat), yang
menunjukkan bahwa border akan terlihat seperti garis padat. Ada beberapa gaya border lain yang tersedia,
seperti dotted (berlubang-lubang), dashed (bergaris-garis), dan lain-lain.
Padding Shorthand Notation
Padding Shorthand Notation adalah metode penulisan properti padding pada CSS (Cascading Style Sheets)
dengan menggunakan syntax atau penulisan yang lebih singkat dan ringkas. Dalam Padding Shorthand
Notation, beberapa nilai padding dapat didefinisikan secara bersamaan, dengan memisahkan nilai-nilai tersebut
menggunakan spasi.
Berikut adalah contoh penggunaan Padding Shorthand Notation dalam CSS:
p {
padding: 10px 20px 30px 40px;
}
Dalam contoh di atas, nilai padding seperti atas, kanan, bawah, dan kiri dapat didefinisikan secara bersamaan.
Nilai-nilai tersebut diambil dari atas, kanan, bawah, dan kiri secara berurutan.
Jika Anda ingin memberikan nilai padding yang sama untuk semua sisi, Anda dapat menulis seperti ini:
p {
padding: 10px;
}
Jika Anda ingin memberikan nilai padding yang berbeda untuk atas dan bawah, tetapi sama untuk kanan dan
kiri, Anda dapat menulis seperti ini:
p {
padding: 10px 20px;
}
Perlu diingat bahwa Padding Shorthand Notation sangat efisien dan mudah dibaca, dan sangat disarankan
untuk digunakan dalam pengembangan web.
Border Longhand Notation
39 / 46
Border Longhand Notation adalah metode penulisan properti border pada CSS (Cascading Style Sheets)
dengan menggunakan syntax atau penulisan yang lebih panjang dan detail. Dalam Longhand Notation, masing-
masing properti border seperti ukuran, jenis garis, dan warna dapis didefinisikan secara terpisah.
Berikut adalah contoh penggunaan Border Longhand Notation dalam CSS:
p {
border-top-width: 2px;
border-top-style: solid;
border-top-color: #ff0000;
border-right-width: 4px;
border-right-style: dotted;
border-right-color: #00ff00;
border-bottom-width: 6px;
border-bottom-style: double;
border-bottom-color: #0000ff;
border-left-width: 8px;
border-left-style: groove;
border-left-color: #ffff00;
}
Dalam contoh di atas, masing-masing properti border seperti ukuran, jenis garis, dan warna dapat didefinisikan
secara terpisah untuk setiap sisi elemen.
Perlu diingat bahwa Border Longhand Notation membutuhkan lebih banyak baris kode dan menjadi lebih rumit
dibandingkan menggunakan Border Shorthand Notation. Oleh karena itu, sangat disarankan untuk
menggunakan Border Shorthand Notation yang lebih efisien dan mudah dibaca.
Border shorthand notation adalah cara singkat untuk menentukan properti-border pada elemen HTML
menggunakan satu nilai shorthand daripada menentukan setiap properti secara individual. Properti shorthand
border menerima hingga tiga nilai dalam urutan berikut:
border-width border-style border-color
Sebagai contoh, notasi shorthand berikut ini menetapkan border merah solid dengan lebar 1 piksel untuk
elemen HTML:
Border shorthand notation
Border shorthand notation adalah cara singkat untuk menentukan gaya, lebar, dan warna border pada elemen
HTML. Format umumnya adalah sebagai berikut:
border: [lebar] [gaya] [warna];
Di mana:
40 / 46
[lebar] adalah nilai numerik yang menentukan lebar border dalam piksel. Nilai ini opsional dan jika tidak
disertakan, lebar border akan diatur ke nilai default yaitu 1px.
[gaya] adalah jenis garis border yang ingin Anda terapkan. Ada beberapa nilai yang dapat digunakan
seperti: solid, dotted, dashed, double, groove, ridge, inset, outset. Nilai ini juga opsional, jika tidak
disertakan, maka nilai default yaitu solid akan digunakan.
[warna] adalah nilai yang menentukan warna border. Ini bisa berupa nama warna, kode hex, atau nilai
rgb/rgba. Nilai ini juga opsional, jika tidak disertakan, maka nilai default yaitu warna hitam (#000) akan
digunakan. Contoh penggunaannya adalah sebagai berikut:
border: 1px solid black; /* border hitam dengan lebar 1px dan jenis
garis solid */
border: 2px dashed #f00; /* border merah dengan lebar 2px dan jenis
garis dashed */
border: dotted; /* border default dengan jenis garis dotted
*/
border: 3px groove #00f; /* border biru dengan lebar 3px dan jenis
garis groove */
Jenis-jenis Border Style

Berikut adalah jenis-jenis border style yang dapat digunakan pada CSS:
. Solid Jenis border ini berbentuk garis lurus dengan ketebalan yang dapat diatur. Nilai default
ketebalannya adalah 1px.
. Dotted Jenis border ini terdiri dari titik-titik kecil yang berjajar membentuk garis. Ketebalannya dapat
diatur.
. Dashed Jenis border ini terdiri dari garis-garis pendek yang berjajar membentuk garis. Ketebalannya juga
dapat diatur.
. Double Jenis border ini terdiri dari dua garis yang paralel satu sama lain. Kedua garis tersebut dapat
diatur ketebalan dan warnanya.
. Groove Jenis border ini memberikan efek 3 dimensi pada border. Terlihat seperti lubang dalam yang
diberi efek bayangan.
. Ridge Jenis border ini memberikan efek 3 dimensi pada border. Terlihat seperti permukaan yang diberi
efek timbul.
. Inset Jenis border ini memberikan efek seperti ditekan ke dalam. Terlihat seperti lubang yang ditekan ke
dalam.
. Outset Jenis border ini memberikan efek seperti menonjol keluar. Terlihat seperti permukaan yang
menonjol keluar.
Contoh penggunaannya adalah sebagai berikut:
41 / 46
border-style: solid;
border-style: dotted;
border-style: dashed;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
Property margin
Properti margin pada CSS digunakan untuk menentukan jarak antara elemen dengan elemen lain di sekitarnya.
Properti margin dapat diterapkan pada keempat sisi elemen (atas, kanan, bawah, kiri) secara terpisah atau
secara bersamaan menggunakan nilai yang sama. Berikut adalah sintaks dan nilai yang dapat digunakan dalam
properti margin:
Sintaks:
margin: nilai;
margin: nilai_atas nilai_kanan nilai_bawah nilai_kiri;
Nilai:
Angka: Jarak margin diatur dalam piksel. Misalnya, margin: 10px; akan memberikan jarak margin sebesar
10 piksel pada keempat sisi elemen.
Persentase: Jarak margin diatur sebagai persentase dari lebar atau tinggi elemen. Misalnya, margin: 5%
10%; akan memberikan jarak margin 5 persen dari tinggi elemen pada sisi atas dan bawah, dan 10 persen
dari lebar elemen pada sisi kiri dan kanan.
auto: Jarak margin diatur secara otomatis oleh browser. Misalnya, margin: 0 auto; akan memberikan jarak
margin nol pada sisi atas dan bawah, dan jarak margin otomatis pada sisi kiri dan kanan. Anda juga dapat
menentukan jarak margin secara terpisah pada masing-masing sisi elemen menggunakan sintaks
berikut:
margin-top: nilai;
margin-right: nilai;
margin-bottom: nilai;
margin-left: nilai;
Contoh penggunaannya adalah sebagai berikut:
/* Margin pada keempat sisi */

div {
margin: 10px;
}
42 / 46
/* Margin pada sisi atas dan bawah 5%, sisi kiri dan kanan 10% */
p {
margin: 5% 10%;
}
/* Margin nol pada sisi atas dan bawah, margin otomatis pada sisi kiri dan
kanan */
img {
margin: 0 auto;
}
/* Margin 10px pada sisi atas, margin 20px pada sisi kanan, margin 30px
pada sisi bawah, margin 40px pada sisi kiri */
span {
margin-top: 10px;
margin-right: 20px;
margin-left: 40px;
}
Margin Collapsing
Margin collapsing atau penggabungan margin adalah perilaku di mana margin luar dari dua elemen yang
berdekatan bergabung menjadi satu margin yang lebih besar daripada margin masing-masing elemen. Ini
terjadi ketika salah satu elemen tidak memiliki padding atau border dan margin atas atau bawahnya bertemu
dengan margin atas atau bawah elemen lainnya.
Margin collapsing hanya terjadi pada margin atas dan bawah, bukan pada margin kiri atau kanan. Ketika margin
atas atau bawah elemen bersentuhan, maka nilai margin yang digunakan adalah yang lebih besar dari margin
masing-masing elemen, tidak dari kedua margin dijumlahkan.
Beberapa aturan margin collapsing adalah sebagai berikut:
Margin collapsing hanya terjadi pada elemen yang berdekatan secara vertikal (di atas dan di bawah),
bukan secara horizontal (di kiri dan di kanan).
Margin collapsing hanya terjadi pada elemen yang berbeda, tidak pada elemen yang sama.
Margin collapsing hanya terjadi pada
margin blok (blok-level), bukan pada margin inline. Margin collapsing hanya terjadi pada margin atas dan
bawah, bukan pada margin kiri dan kanan. Contoh margin collapsing:
<body>
<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
h1 {
43 / 46
p {
margin-top: 10px;
}
Pada contoh di atas, margin atas Paragraph 1 dan margin bawah Heading akan bergabung menjadi margin
20px, dan margin atas Paragraph 2 dan margin bawah Paragraph 1 juga akan bergabung menjadi margin 30px.
Anda dapat menggunakan properti padding atau border pada salah satu elemen untuk menghindari margin
collapsing pada elemen tersebut. Misalnya, jika Anda ingin margin pada h1 dan p tidak saling bergabung, Anda
dapat menambahkan padding atau border pada h1 seperti ini:
h1 {
padding-bottom: 1px;
border-bottom: 1px solid black;
}
Dengan menambahkan padding atau border pada h1, margin dari h1 dan p tidak akan lagi bergabung.
CSS Background
Properti CSS background digunakan untuk menetapkan latar belakang elemen HTML, baik itu berupa warna,
gambar, atau kombinasi dari keduanya. Properti background memiliki beberapa nilai, di antaranya:
. background-color: untuk menentukan warna latar belakang elemen. Nilai bisa berupa nama warna
(seperti "red" atau "blue"), kode warna dalam bentuk hex (#RRGGBB), atau nilai RGB. Contoh
penggunaan:
div {
background-color: blue;
}
. background-image: untuk menentukan gambar yang akan digunakan sebagai latar belakang elemen.
Nilai bisa berupa URL menuju gambar. Contoh penggunaan:
div {
background-image: url("gambar.jpg");
}
. background-repeat: untuk menentukan apakah gambar latar belakang akan diulang atau tidak. Nilai bisa
berupa repeat (ulang secara horizontal dan vertikal), repeat-x (ulang hanya secara horizontal), repeat-y
(ulang hanya secara vertikal), atau no-repeat (tidak diulang). Contoh penggunaan:
44 / 46
div {
background-repeat: no-repeat;
}
. background-position: untuk menentukan posisi gambar latar belakang. Nilai bisa berupa kombinasi
antara nilai horisontal dan vertikal dalam satuan piksel, persen, atau kata kunci seperti top, bottom,
center, left, dan right. Contoh penggunaan:
div {
background-position: center;
}
. background-size: untuk menentukan ukuran gambar latar belakang. Nilai bisa berupa satuan piksel,
persen, kata kunci seperti contain (ukuran maksimum sehingga seluruh gambar terlihat), atau cover
(ukuran minimum sehingga seluruh area latar belakang terisi oleh gambar). Contoh penggunaan:
div {
background-size: cover;
}
. background-attachment: untuk menentukan apakah gambar latar belakang akan tetap berada pada
posisi tetap atau bergerak bersamaan dengan elemen ketika halaman digulir. Nilai bisa berupa scroll
(bergerak bersamaan dengan halaman), atau fixed (tetap pada posisi yang sama). Contoh penggunaan:
div {
background-attachment: fixed;
}
Anda juga dapat menggabungkan beberapa nilai di atas dalam properti background. Misalnya, Anda dapat
menentukan warna latar belakang dan gambar latar belakang sekaligus seperti ini:
div {
background-color: blue;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
45 / 46
46 / 46

Chapter4 PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Chapter4 PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

chapter4.

. Menentukan gaya dalam file CSS terpisah:

Sejarah dan Perkembangan CSS

Gambar 1. Gambar: Selector dan Declaration Block CSS

Gambar 2. Selector, Property dan Value dalam CSS

Berikut adalah contoh penggunaan CSS tanpa whitespace:

/* Ini adalah komentar CSS */

/* Komentar untuk elemen h1 */

/* Komentar untuk elemen p */

<p style="color: red;">This is a red paragraph.</p>

<p>Mohon jangan diganggu, lagi serius belajar CSS.</p>

<h2>Header h2 di luar tag div</h2>

<p>Ini adalah paragraf pertama.</p>

<a href="https://example.com">Link 1</a>

Structural Pseudo Class Selectors

Pseudo Selector :nth-of-type() dan :nth-last-of-type()

<p>This is a paragraph with multiple lines of text. The first letter of

Cascade dari Cascading Style Sheet

<p style="color: green;">This text will be blue, not green!</p>

Satuan Length CSS

<div style="padding: 20px;">

<div style="padding-top: 10px; padding-right: 20px; padding-bottom: 30px;

<div style="border: 2px solid black;">

border: [lebar] [gaya] [warna];

Jenis-jenis Border Style

Contoh penggunaannya adalah sebagai berikut:

/* Margin pada keempat sisi */

Anda mungkin juga menyukai