CSS

CSS
Apa itu CSS?

CSS adalah bahasa komputer yang digunakan untuk menambahkan design ke suatu halaman website di
internet.
CSS adalah singkatan dari Cascading Style Sheets.
CSS
Fungsi CSS adalah sebagai 'baju' atau 'dekorator' dari sebuah website.
Bagaimana CSS Bekerja di Web Browser?

Web browser seperti Chrome, Firefox, Edge, Safari, atau Opera akan membaca dokumen HTML.
Dokumen HTML yang berisi tag-tag HTML akan memberitahu browser bagaimana cara menampilkan
sebuah konten.
Apabila di dokumen HTML itu terdapat konten CSS maka browser akan memproses CSS tersebut dan
menampilkan design sesuai dengan apa yang telah ditentukan.
Selain HTML dan CSS, ada juga bahasa JavaScript yang akan kita pelajari untuk membuat sebuah
tampilan website yang interaktif. Secara fungsi, ketiga bahasa tersebut bisa dianalogikan seperti ini:
HTML CSS JS
Fungsi HTML adalah sebagai 'kerangka', yang memberi struktur pada website.
Fungsi CSS sebagai 'baju' , yang memberi warna dan layout pada website.
Fungsi JavaScript, sebagai element yang membuat website menjadi interaktif.
Inline CSS
Ada 3 cara untuk menyisipkan CSS ke dalam HTML, yaitu:
Inline CSS, yaitu menggunakan attribute style untuk menyisipkan kode CSS langsung di dalam HTML
element.
Internal CSS, yaitu menggunakan element <style> untuk menyisipkan kode CSS. Element <style>
tersebut diletakkan di dalam element .
External CSS, yaitu sebuah file CSS terpisah yang disambungkan dengan file HTML dengan
menggunakan element <link>.
Inline CSS
Inline CSS adalah cara kita memberikan attribute style kepada sebuah element dengan menyisipkannya
langsung di dalam element HTML tersebut.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Website Pertamaku
</title>
</head>
<body>
<h1 style="color:blue;">Selamat Datang</h1>
</body>
</html>
Contoh di atas akan menghasilkan teks Selamat Datang di dalam element <h1> berwarna biru.
Internal CSS
Internal CSS menggunakan element <style> untuk menyisipkan kode CSS. Element <style> diletakkan di
dalam element <head>.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Website Pertamaku</title>
<style>
body {
background-color: yellow;
}
h1 {
color: blue;
}
p{
color: red;
}
</style>
</head>
<body>
<h1>Website Pertamaku</h1>
<p>Selamat Datang</p>
</body>
</html>
Contoh di atas akan menghasilkan <body> dengan latar belakang berwarna kuning, tulisan di dalam <h1>
berwarna biru, dan tulisan di dalam <p> berwarna merah.
External CSS
External CSS adalah cara menyisipkan kode CSS dengan cara membuat file CSS terpisah, dan lalu
menyambungkannya dengan file HTML dengan menggunakan element <link>. Element <link> tersebut
diletakkan di dalam element <head>.
Contoh:
Kita memiliki dua file: index.html untuk file HTML-nya dan styles.css untuk file CSS-nya.


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
</body>
</html>
/* File styles.css */
body {
background-color: pink;
}
h1 {
color: blue;
}
p{
color: black;
}
Contoh di atas akan menghasilkan warna <body> background bewarna pink, tulisan di dalam <h1>
berwarna biru, dan tulisan di dalam <p> berwarna hitam.
Kelebihan lain dari menyisipkan kode CSS dengan cara external CSS adalah kita bisa menyisipkan
beberapa external CSS file di halaman website kita.
Contoh:
Misalnya kita mempunyai 2 CSS file style1.css dan style2.css dan kita ingin menyisipkan kedua file ini
ke dalam index.html.


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style1.css" />
<link rel="stylesheet" href="style2.css" />
</head>
<body>
</body>
</html>
Sekarang semua element pada dokumen HTML di atas akan diberi efek yang sesuai dengan kedua file
CSS tersebut.
File CSS tersebut juga bisa kita gunakan di lebih dari satu file HTML. Jadi kalau kita punya dua atau tiga
halaman yang mirip, kita cukup menambahkan element <link> pada setiap halaman tersebut.
Satu kelemahan dari menggunakan cara ini adalah jika kita memiliki beberapa file CSS yang cukup besar,
browser perlu mendownload semua file itu terlebih dahulu. Jadi untuk sesaat di awal mungkin tampilan
website kita akan terlihat aneh sampai semua file CSS-nya selesai dibaca oleh browser.
CSS Syntax
CSS Syntax adalah syntax yang digunakan untuk menunjuk atau memilih HTML element mana yang
ingin diberi style (dihias). CSS syntax terdiri dari selector, property, dan value.
Syntaxnya seperti ini:

selector {
property: value;
}
Bisa kita gambarkan seperti vas bunga yang ingin kita hias. Kita ingin mencat vas bunga tersebut menjadi
berwana merah. Yang kita cat adalah bagian tubuh (body) dari vas bunga tersebut. Jika kita kaitkan
dengan CSS selector, maka:
Selector adalah vas bunga, yaitu benda (HTML element, misal paragraf) mana yang akan dihias.
Property adalah bagian mana dari vas bunga (dalam HTML misal, setiap huruf dari paragraf) yang akan
dihias, dalam kasus ini berarti warna dari vas tersebut.
Value adalah warna merah, yaitu nilai atau hiasan 'berupa apa' yang akan diberikan ke vas bunga.
Contoh:
Misalnya kita memiliki element paragraf <p> yang ingin kita ubah menjadi warna biru. Caranya mirip
dengan yang seperti di gambar:


<p>Hello world</p>
/* Pada file CSS */

p{
color: blue;
}
Ada banyak sekali CSS property dan CSS value. Pada modul setelah ini, kita akan membahas beberapa
property dan value yang sering digunakan.
Mengenal Lebih Dalam Dengan CSS Selector

Dari topik sebelumnya, kita sudah melihat beberapa contoh untuk menggunakan HTML tag sebagai CSS
selector. Yap, itu adalah salah satu dari sekian cara untuk menggunakan CSS selector. Ada banyak sekali
kombinasi cara menggunakan CSS selector. Yuk mari kita pelajari bersama!
Memberi Style pada Semua Element

Jika kita ingin memberikan style pada semua element di website, maka kita bisa menggunakan * sebagai
selector.
Contoh:


<body>
<h1>Selamat Datang di Website Pertamaku</h1>
<div>
<p>Namaku Sarah</p>
<p>Saya tinggal di Indonesia</p>
</div>
<p>Saya tinggal bersama orang tua saya</p>

</body>
/* Pada File CSS */
*{
background-color: green;
}
Semua element, termasuk <html> dan <body>, sekarang akan memiliki latar belakang berwarna hijau.
Kita juga bisa kita menunjuk semua element yang ada di dalam suatu element.
Contoh:

<body>
<div>
<p>Namaku</p>
<p>
<span>Sarah</span>
</p>
</div>

</body>
/* Pada File CSS */
div * {
}
Pada kode di atas, ada 2 element yang akan diberi latar belakang berwarna kuning:
element <p> yang berisi "Namaku"

element <span> yang berisi "Sarah"
Kenapa element <span> yang itu juga berlatar belakang kuning? Karena itu juga berada di dalam element
<div> yang pertama. Jadi selector CSS div * itu menunjuk ke semua element yang berada di dalam
sebuah <div>.
Memberi Style pada Semua Element Tertentu

Jika kita ingin memberikan style pada semua element tertentu di website kita, maka kita bisa
menggunakan nama tag element tersebut sebagai selector.
Contoh:

<body>
<div>
<p>Namaku Sarah</p>
<p>Saya tinggal di Indonesia</p>
</div>

</body>
/* Pada File CSS */
p{
font-size: 20px;
}
Kode CSS di atas akan mengubah ukuran huruf dari semua element <p> menjadi sebesar 20px.
Memberi Style di Element dengan Nama id Tertentu

Sebuah HTML element bisa kita beri id atau tanda pengenal. Setelahnya, kita bisa memberikan style pada
element dengan id tersebut dengan menuliskan sebuah tanda pagar # yang diikuti id dari element tersebut.
📝 Catatan:
Satu element hanya bisa mempunyai satu buah id. Dan sebuah id sebaiknya tidak digunakan dalam lebih
dari satu element pada tiap halaman.
Contoh:

<body>
<div class="highlight">
<p id="firstParagraph">Namaku Sarah</p>
<p id="secondParagraph">Saya tinggal di Indonesia</p>
</div>
<p class="highlight">Saya tinggal bersama orang tua saya</p>

</body>
/* Pada File CSS */
#firstParagraph {
border: solid yellow;
}
#secondParagraph {
border: solid pink;
}
Element dengan id firstParagraph sekarang akan memiliki kotak berwarna kuning di sekitarnya.
Sedangkan element dengan id secondParagraph memiliki kotak yang berwarna merah muda.
Memberi Style di Element dengan Nama class Tertentu

Selain menggunakan id, kita juga bisa memberikan tanda pengenal berupa class kepada element. Kali ini
selector untuk class dari sebuah element adalah tanda titik . yang diikuti dengan nama class dari element
tersebut.
📝 Catatan:
class bisa digunakan dalam lebih dari satu element. Serta sebuah element bisa memiliki lebih dari satu
class.
Contoh:

<body>
<div class="highlight">
<p>Saya tinggal di benua Asia</p>
<p>Persisnya di Indonesia</p>
</div>
<p class="highlight">Saya tinggal bersama orang tua saya</p>

</body>
/* Pada File CSS */
.highlight {
background-color: black;
color: white;
}
Sekarang element <div> dan <p> yang memiliki attribute highlight akan diberi latar belakang berwarna
hitam dan teks berwarna putih.
Memberikan Style di Element dengan Attribute Tertentu

Nah, kita juga bisa memberikan style pada element yang memiliki attribute tertentu.
Contoh:

<body>
<a>Whatsapp</a>
<a href="https://www.facebook.com">Facebook</a>
<a href="https://www.quora.com">quora</a>
</body>
/* Pada File CSS */
a[href] {
background-color: green;
}
Pada kode HTML di atas, kalian bisa lihat ada 3 buah element <a>, tapi hanya 2 di antaranya yang
memiliki attribute href. Jadi hanya element <a> kedua dan ketiga yang akan memiliki latar belakang
berwarna hijau.
Selain itu, kita juga bisa memberikan style pada element yang memiliki nilai tertentu pada attributenya.
Contoh:

<body>
<a href="google.com" download="search-engine.txt">Google</a>
<a href="google.co.id" download="seo.txt">Google Indonesia</a>
<a href="google.co.in">Google India</a>
</body>
/* Pada File CSS */
a[download='search-engine.txt'] {
}
Pada kode HTML di atas, hanya element <a> pertama yang memiliki attribute download bernilai search-
engine.txt. Sehingga hanya ia yang akan diberi latar belakang berwarna pink.
Memberikan Style di Child Element

Kita juga bisa memberikan style pada child element saja. Coba simak dua contoh kode berikut.
Contoh:

<body>
<div id="container">
<p>Selamat Datang di Website Kami</p>
<div>
<p>Semoga pengalaman kalian menyenangkan</p>
</div>
</div>
</body>
/* Pada File CSS */
#container p {
}
Pada kode CSS di atas, ada dua buah selector:
#container yang menunjuk kepada element <div> yang memiliki id bernilai container.
p yang menunjuk kepada element <p>.
Karena dua selector tersebut dipisah oleh sebuah spasi, maka artinya adalah semua element <p> yang ada
di dalam <div> dengan id bernilai container akan diberi latar belakang berwarna kuning.
Tapi coba lihat kode CSS yang berikut.
/* Pada File CSS */

#container > p {
}
Kali ini kedua selector tersebut dipisah oleh tanda ">" yang berarti semua element <p> yang merupakan
child dari element <div> dengan id bernilai container akan diberi latar belakang berwarna kuning.
Jadi bedakan kedua hal tersebut ya: kalau dipisah dengan spasi, berarti artinya semua element di dalam;
kalau dipisah dengan tanda ">" artinya semua element yang merupakan child.
Dan masih banyak lagi kombinasi lainnya untuk memberikan style kepada child element. Kita akan
mempelajarinya di topik-topik selanjutnya.
Memberikan Style yang Sama di Lebih dari Satu Element Sekaligus

Jika kita ingin memberikan style yang sama pada lebih dari satu element sekaligus, maka kita bisa
menulis lebih dari satu selector, namun dipisah dengan tanda koma (,) dari selector yang satu dengan
yang lain.
Contoh:

<body>
<h1>Selamat Datang</h1>
<p>Silahkan scroll ke bawah untuk informasi lebih lanjut</p>
<h2>Cara Reservasi</h2>
<p>Reservasi bisa dilakukan dengan menghubungi nomor 08122282xxx</p>
</body>
/* Pada File CSS */
h1,
h2 {
color: red;
}
Pada kode CSS tersebut, teks di dalam element <h1> dan <h2> akan diberi warna merah. Jadi kalau nanti
kalian menambahkan property lain, hal tersebut akan berefek ke kedua element tersebut.
Pseudo-class & Pseudo-element

Oke, pada bagian ini kita akan mempelajari tentang pseudo-class dan pseudo-element.
Pseudo-class
Perhatikan animasi di bawah ini:
Dari contoh animasi di atas, kita bisa melihat ketika kursor mouse kita melewati (hover) link-link
tersebut, maka akan muncul kotak berwarna merah. Ketika kursor mouse tidak lagi ada di link-link
tersebut, maka kotak merah akan hilang. Efek tersebut dihasilkan oleh sebuah pseudo-class.
pseudo-class digunakan untuk mendefinisikan keadaan khusus pada suatu element. Contoh:
Memberikan style pada link pada saat di-hover

Memberikan style pada link setelah di-klik (dikunjungi)
Memberikan style pada checkbox setelah dicentang
Syntax saat menggunakan pseudo-class adalah sebagai berikut:
selector:pseudo-class {
property: nilai;
}
Perhatikan syntax di atas, setelah selector, kita menggunakan titik dua (:) sebagai pertanda bahwa
selanjutnya kita akan menggunakan pseudo-class.
Ada banyak sekali pseudo-class. Kali ini, kita akan membahas beberapa di antaranya yang sering
digunakan.
:hover
:hover digunakan untuk memberikan style pada element ketika kursor kalian melewati suatu element.
Contoh:

<body>
<h1>Beranda</h1>
<h1>Galeri</h1>
<h1>Tentang Kami</h1>
<h1>Kontak</h1>
</body>
/* Pada File CSS */
h1:hover {
background: black;
color: white;
}
Hasilnya akan seperti di bawah ini:
:nth-child(number)
:nth-child(number) digunakan untuk memberikan style pada element yang merupakan child kesekian dari
parent elementnya.
Contoh:

<body>
<p>Nama saya Sarah</p>
<p>Saya warga negara Indonesia</p>
<p>Saya tinggal di Tangerang</p>
<div>
<p>Kalau mudik ke Jawa Barat</p>
<div>
</body>
/* Pada File CSS */
p:nth-child(2) {
}
Pada contoh di atas, p:nth-child(2) menunjuk kepada element <p> yang merupakan child kedua dari
parentnya -- dalam contoh di atas adalah teks "Saya warga negara Indonesia" karena ia merupakan child
kedua dari element <body>.
📝 Catatan:
Penghitungan child selalu dimulai dari 1 untuk child pertama, 2 untuk child kedua, dan seterusnya.
Pseudo-element
pseudo-element CSS digunakan untuk memberikan style pada bagian tertentu dari suatu element.
Contoh:
Memberikan style pada huruf pertama pada suatu kalimat

Memberikan style pada baris pertama dari dari suatu paragraf
Menyisipkan konten sebelum atau sesudah suatu element
Syntax pseudo-element adalah:
selector::pseudo-element {
property: nilai;
}
Perhatikan syntax di atas, setelah selector, kita menggunakan titik dua ganda (::) sebagai penanda bahwa
selanjutnya kita akan menggunakan pseudo-element.
Berikut ini adalah tabel yang menjelaskan tentang seluruh pseudo-element:
Pseudo-element Deskripsi
::before Menyisipkan suatu konten sebelum element dari selector
::after Menyisipkan suatu konten setelah element dari selector
::selection Memberikan style pada bagian element yang diselect oleh pengguna
::first-letter Memberikan style pada huruf pertama pada element dari selector
::first-line Memberikan style pada baris pertama pada element dari selector
Mari kita bahas satu-persatu.
::before
::before digunakan untuk menyisipkan suatu konten sebelum element yang dipilih.
Contoh:
Kita akan menyisipkan sepotong kata berupa link pada sebelum tiap-tiap element <a>.
<!DOCTYPE html>
<html>
<head>
<style>
a::before {
content: "Link - ";
}
</style>
</head>
<body>
<ul>
<li><a href="#">Download part 1</a></li>
</ul>
</body>
</html>
Hasilnya bukan lagi seperti ini
Download part 1
Download part 2
Download part 3
Melainkan seperti ini

Link - Download part 1
::after
Mirip dengan ::before, ::after digunakan untuk menyisipkan suatu konten setelah element tertentu.
::selection
::selection digunakan untuk memberikan style pada bagian element yang diselect oleh pengguna.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
h1::selection {
color: white;
background: black;
}
p::selection {
color: red;
background: yellow;
}
</style>
</head>
<body>
<h1>Cerita Hari ini</h1>
<p>
Aku senang sekali hari ini karena mendapatkan nilai sempurna pada
pelajaran programming.
</p>
</body>
</html>
Cobalah untuk meng-highlight teks dengan kursor mouse anda, maka bagian teks yang dihighlight akan
memiliki warna background sesuai kode CSS kita.
::first-letter
::first-letter digunakan untuk memberikan style pada huruf pertama dari selector yang terpilih.
Tidak semua properti CSS dapat digunakan dengan ::first-letter. Beberapa yang bisa digunakan adalah:
font
color
background
margin
padding
border
text-decoration
line-height
float
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<p>
pelajaran programming.
</p>
</body>
</html>
Kode di atas akan memperbesar huruf A pada "Aku" menjadi 50px dan memberinya warna merah.
::first-line
::first-line digunakan untuk memberikan style pada baris pertama dari selector terpilih.
Properti CSS yang bisa dan sering digunakan dengan ::first-line adalah:
font
background
word-spacing
letter-spacing
text-transform
line-height
color
📝 Catatan:
Kalau kita berpikir "Kan ukuran tiap layar komputer dan smartphone itu beda-beda, nanti baris pertama
juga beda-beda dong?" Benar sekali, baris pertama untuk tiap ukuran layar itu berbeda-beda. Coba simak
contoh berikut ini.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: red;
}
</style>
</head>
<body>
<p>
pelajaran programming. Ternyata jerih payahku belajar dari seminggu yang lalu terbayarkan hari ini.
Tapi pada saat yang bersamaan aku juga merasa sedih karena teman dekatku sedang sakit. Dia tidak
masuk sekolah hari ini.
</p>
</body>
</html>
Berapapun ukuran layar kita, browser akan otomatis memberi warna merah kepada hanya baris pertama
saja.
Definisi Box Model
Apa Itu Box Model?
Jadi, semua HTML element itu dianggap sebagai sebuah kotak (box). Karena hal inilah istilah box model
muncul.
Box model sendiri bisa kalian anggap sebagai kotak yang membungkus setiap HTML element.
Box model terdiri dari:
margin yaitu area terluar yang kosong setelah border. Margin bersifat transparan.
border yaitu garis tepi yang membungkus padding dan konten.
padding yaitu area kosong di antara konten dan border. Padding bersifat transparan.
content yaitu konten (value/nilai) dari HTML element. Bisa berupa teks, gambar, video, ataupun suara.
Jika digambarkan, box model berbentuk seperti ini:
Mari kita coba tulis kode HTML dan CSSnya, agar terlihat lebih nyata.
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: lightgrey;
width: 300px;
height: 100px;
border: 15px solid black;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Contoh Box Model</h2>
<p>
Tulisan ini adalah konten dari box. Konten sendiri memiliki lebar
(width) sebesar 300px dan tinggi (height) sebesar 100px. Pada box, kita
menambahkan padding sebesar 50px, border berwarna hitam sebesar 15px,
dan margin sebesar 20px.
</p>
</body>
</html>
Hasilnya akan seperti di bawah.
Kalau kalian lihat ada kotak berwarna hitam tebal, itu adalah border dari element <p> kita yang sudah
kita atur ketebalannya menjadi 15px.
Ada juga sedikit jarak di antara border dan teks "Contoh Box Model". Jarak itu adalah margin dari
element <p> kita.
Nah jarak di antara border dan content kita itulah padding dari element <p> kita.
Perhitungan Ukuran Lebar dan Tinggi Box Model

Mari kita perhatikan struktur box model di HTML sekali lagi:
Dan coba lihat contoh kode dari topik sebelumnya:
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: lightgrey;
width: 300px;
height: 100px;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Contoh Box Model</h2>
<p>
Tulisan ini adalah konten dari box. Konten sendiri memiliki lebar
(width) sebesar 300px dan tinggi (height) sebesar 100px. Pada box, kita
menambahkan padding sebesar 50px, border berwarna hitam sebesar 15px,
dan margin sebesar 20px.
</p>
</body>
</html>
Jika kita perhatikan kode di atas, properti width dan height yang kita tulis berfungsi untuk mengatur lebar
dan tinggi dari konten dalam element <p>, bukan lebar dan tinggi dari seluruh element <p> itu sendiri.
Dari kode di atas, total lebar box yang mengelilingi element <p> sebenarnya adalah:
Lebar box = lebar konten (width) + padding kiri (left padding) + padding kanan (right padding) + border
kiri (left border) + border kanan (right border) + margin kiri (left margin) + margin kanan (right margin)
Lebar box = 300px + 50px + 50px + 15px + 15px + 20px + 20px = 470px
Sementara, total tinggi box sebenarnya adalah:

Tinggi box = tinggi konten (height) + padding atas (top padding) + padding bawah (bottom padding) +
border atas (top border) + border bawah (bottom border) + margin atas (top margin) + margin bawah
(bottom margin)
Tinggi box = 100px + 50px + 50px + 15px + 15px + 20px + 20px = 270px
box-sizing: border-box
Kita sudah mempelajari bagaimana cara menghitung lebar dan tinggi box.
Bagaimana dengan element?
Lebar dan Tinggi Element

Dalam CSS, pemberian properti width dan height itu hanya mempengaruhi lebar dan tinggi dari konten
suatu element. Jika element tersebut memiliki border dan padding, mereka baru akan ditambahkan
setelahnya. Jadi saat kita menentukan lebar dan tinggi dari sebuah element, kita juga harus
memperhitungkan border dan padding dari element tersebut.
Biar kita ingat apa itu border dan padding, mari kita perhatikan struktur box model di HTML sekali lagi:
Kenapa margin tidak ikut diperhitungkan ketika menentukan lebar dan tinggi dari sebuah element?
Margin itu hanyalah ruang di luar element untuk menentukan jaraknya dengan element lain. Meskipun ia
adalah bagian dari box sebuah element, ia bukan bagian dari element itu sendiri.
Misalnya kita mempunyai sebuah <div> dengan lebar 600px. Lalu di dalamnya kita isi dengan empat
<img> yang masing-masing memiliki lebar 150px.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<style>
div {
width: 600px;
background: lightblue;
}
img {
width: 150px;
background: lightgreen;
}
</style>
<body>
<div>
<img src="https://skilvul-assets-01.s3-ap-southeast-1.amazonaws.com/lesson/intro-to-css/cat.jpg"
/><img src="https://skilvul-assets-01.s3-ap-southeast-1.amazonaws.com/lesson/intro-to-css/cat.jpg"
/>
</div>
</body>
</html>
Tanpa tambahan border dan padding tentu ke-empat gambar tersebut akan ditempatkan berderet dalam
satu baris seperti ini.
Tetapi ketika salah satu (atau semua) dari element tersebut memiliki border atau padding (katakanlah
padding: 10px dan border: 2px solid black)
<style>
img {
width: 150px;
padding: 10px;
}
</style>
mereka tidak lagi bisa ditempatkan seperti di atas. Melainkan seperti di bawah ini sekarang.
Mengapa begitu?
Sebab sekarang lebar dari satu buah element <img> pada contoh di atas bukan lagi 150px. Melainkan
100px ditambah lebar padding dan border di kiri dan kanan. Jadi lebar element sekarang adalah 150px +
(2 x 10px) + (2 x 2px) atau sama dengan 174px.
Tentu empat buah element dengan lebar 174px tidak akan muat di dalam <div> dengan lebar 600px.
Makanya pada ilustrasi di atas ada satu gambar yang harurs ditempatkan di baris berikutnya.
"Lalu bagaimana solusinya kalau kita ingin semua gambar kucing tersebut tetap ditempatkan dalam satu
baris?"
Cara manual tentu adalah mengurangi nilai dari properti width pada <img> menjadi 126px sehingga jika
ditambahkan dengan lebar padding dan border kiri dan kanan, totalnya akan menjadi 150px.
Tapi kan repot kalau harus menghitung seperti itu. Apalagi kalau kita ingin mengubah besar padding dan
bordernya; kan berarti kita harus menghitung ulang semuanya.
Nah daripada capek-capek begitu, ada satu properti CSS yang dapat membantu kita untuk
menyederhanakan perhitungan tadi.
box-sizing
Sebenarnya nama "box-sizing" itu kurang tepat, sebab ia tidak mengatur ukuran dari box, melainkan
ukuran dari element. Properti box-sizing itu menentukan bagaimana cara menghitung tinggi dan lebar dari
sebuah element.
Secara default, semua element HTML memiliki properti box-sizing: content-box. Seperti yang dijelaskan
di awal tadi, pemberian properti width dan height itu hanya mempengaruhi lebar dan tinggi dari konten
suatu element.
Tapi kan kita lihat mulai ada kesulitan saat adanya border dan padding pada suatu element. Apa
alternatifnya? Ada nilai lain yang mungkin, yaitu border-box.
Saat kita memberi properti box-sizing: border-box pada sebuah element, pemberian properti width dan
height tidak lagi menentukan lebar dan tinggi dari konten, melainkan lebar dan tinggi dari element.
Jadi, ukuran element: ukuran konten + padding + border.
Kita ambil contoh kode tadi
<!DOCTYPE html>
<html>
<head>
</head>
<style>
div {
width: 600px;
}
img {
width: 150px;
padding: 10px;
/* tambahkan properti box-sizing: border-box */

box-sizing: border-box;
}
</style>
<body>
<div>
<img
src="https://skilvul-assets-01.s3-ap-southeast-1.amazonaws.com/lesson/intro-to-css/cat.jpg"
/>
<img
/>
<img
/>
<img
/>
</div>
</body>
</html>
Hasilnya seperti ini
Sekarang setiap element <img> memiliki lebar 150px dengan border setebal 2px dan padding sebesar
10px.
"Berarti gambar kucingnya jadi lebih kecil dong?"
Benar sekali. Saat kita memberi properti box-sizing: border-box pada sebuah element, ukuran dari konten
di dalamnya akan menyesuaikan dengan tinggi dan lebar element.
Dalam kasus di atas, lebar element kan 150px. Besar padding dari kedua sisi kanan dan kiri adalah 2 x
10px atau 20px. Besar border dari kedua sisi kanan dan kiri adalah 2 x 2px atau 4px. Sekarang lebar dari
konten adalah "sisa" lebarnya. Dengan kata lain 150px - 20px - 4px atau sama dengan 126px.
Misalkan kita ingin memperbesar padding dari element <img> menjadi 30px seperti ini
<style>
img {
width: 150px;
/* perbesar paddingnya */
padding: 30px;
box-sizing: border-box;
}
</style>
Sekarang ukuran dari konten akan mengecil untuk menjaga lebar dari element tetap 150px.
display: none vs visibility: hidden

CSS Display
Properti display adalah salah satu yang sering digunakan dalam pengembangan web. Dari topik
sebelumnya kita belajar kalau tiap element dalam halaman web itu berbentuk box. Dengan properti
display, kita bisa mengatur bagaimana box tersebut ditampilkan: apa box tersebut ditampilkan sebaris
dengan box lain? atau satu box menempati satu baris penuh? bahkan kita juga bisa mengatur apakah box
tersebut ditampilkan atau disembunyikan.
"Lho apa gunanya sebuah element kalau disembunyikan?"
Bayangkan ada sebuah menu yang akan ditampilkan jika kita menekan sebuah tombol seperti ini
"Kok bisa seperti itu?"
display: none
Dengan mengganti-ganti nilai dari properti display, kita bisa mengatur untuk ditampilkan atau tidaknya
element menu itu.
Tapi kalian tahu tidak? Kalau kita menggunakan properti display: none, tampilan dari element di
sekitarnya juga ikut berubah. Kenapa? Saat kita menggunakan properti itu, halaman web kita akan
ditampilkan seolah-olah element tersebut tidak ada. Coba simak ilustrasi berikut ini.
Ada sebuah tombol yang jika ditekan akan menyembunyikan dan menampilkan gambar di samping
paragraf.
Kelihatan kan kalau paragraf tersebut tampilannya berubah jika gambarnya hilang? Ketika gambarnya
ditampilkan lagi, element paragraf kembali seperti di awal. Hal ini tidak hanya terlihat buruk, tapi
pengunjung web kita akan merasa tidak nyaman karena paragrafnya berubah-ubah dan sulit membacanya.
visibility: hidden
Untuk mengatasi masalah ini, ada properti CSS lain yang fungsinya mirip dengan display, yaitu visibility.
Properti visibility mengatur ditampilkan atau tidaknya sebuah element.
"Lho terus bedanya dengan display: none apa dong?"
Coba lihat ilustrasi berikut ini. Tiap kali kita menekan tombol, properti visibility dari gambar akan
berganti antara hidden (tidak ditampilkan) dan visible (ditampilkan).
Perbedaannya dengan display: none terletak di bagaimana ia mempengaruhi posisi element di sekitarnya.
Saat kita memberi nilai hidden pada properti visibility si gambar, ia akan tidak ditampilkan, namun ruang
yang tadinya ia tempati tetap akan ada di situ. Karena ruang yang ia tempati masih ada, element paragraf
di sebelahnya tidak akan berubah posisi. Hal ini akan membuat pengunjung web merasa lebih nyaman
saat membaca paragrafnya.
display: inline
Setelah belajar display: block, kalian mungkin bertanya-tanya:
"Bagaimana kalau saya ingin menempatkan beberapa element dalam satu baris yang sama?"
Inline-Level Element
Setelah block-level element seperti <div> dan <p>, ada juga element seperti <span> dan <img> yang
merupakan inline-level element. Apa lagi tuh? Inline-level element merupakan element yang secara
default memiliki properti display: inline.
Keberadaan properti display: inline pada sebuah element akan membuat ukuran box dari element tersebut
tidak lagi sebaris penuh seperti dalam kasus display: block, melainkan hanya sebesar konten di dalamnya
saja. Hal ini memungkinkan adanya element lain untuk ditempatkan di sebelah element dengan display:
inline ini.
Salah satu contoh inline-level element yang kalian mungkin masih ingat dari kelas HTML adalah <span>.
Mirip seperti <p>, element <span> menampilkan sebuah teks. Bedanya, box dari element <span> hanya
sebesar konten dari element itu saja; tidak sebaris penuh seperti <p>.
Coba simak perbedaannya dengan contoh kode berikut.
<!DOCTYPE html>
<html>
<head>
<style>
.green-text {
}
.blue-text {
}
</style>
</head>
<body>
<p class="green-text">Teks dengan latar belakang hijau</p>
<p class="blue-text">Teks dengan latar belakang biru</p>
<span class="green-text">Teks dengan latar belakang hijau</span>
<span class="blue-text">Teks dengan latar belakang biru</span>
</body>
</html>
Hasilnya akan seperti ini:
Untuk kedua element <p>, meskipun panjang teksnya hanya sekitar 2/3 dari panjang baris, box mereka
tetap memenuhi satu baris penuh. Sebab <p> adalah block-level element.
Sementara untuk <span> dengan latar belakang hijau, ukuran box hanya selebar teks "Teks dengan latar
belakang hijau" saja. Oleh karena itu ada ruang sedikit di sebelah kanannya yang bisa diisi oleh element
<span> dengan latar belakang warna biru.
Element lain yang merupakan inline-level element adalah
<a>
<img>
<label> dan <input>
<select>
Lebar dan Tinggi Element dengan display: inline
Oh iya, ada satu hal yang perlu kalian ingat saat menggunakan properti display: inline. Element yang kita
beri properti itu tidak bisa diatur lebar maupun tingginya.
Kalau kita ambil kode di atas dan menambahkan properti height pada class blue-text dan green-text
seperti ini:
<style>
.green-text {
height: 30px;
}
.blue-text {
height: 30px;
}
</style>
Element <p> tentu akan berubah tingginya. Namun tinggi dari element <span> tidak berubah karena
secara default ia memang memiliki properti display: inline. Jadi kalaupun kita menambahkan properti
tinggi padanya, tingginya tidak akan terpengaruh.
display: inline-block
Setelah mempelajari display: inline dan display: block, kalian mungkin berpikir?
"Kalau saya ingin mengatur tinggi lebar element kan pakai display: block, tapi jadi tidak bisa
bersebelahan dengan element lain.
Untuk bisa bersebelahan, saya cukup pakai display: inline, tapi sekarang saya tidak bisa mengatur tinggi
lebarnya dong. Jadi pilih yang mana dong?"
Selain inline dan block, properti display memiliki nilai lain yang bisa menyelesaikan permasalahan di
atas.
"Wah apa itu?" 🤔
display: inline-block
Berbeda dengan element yang memiliki properti display: inline di mana lebar dan tinggi element tidak
dapat kita atur, element dengan display: inline-block bisa kita atur lebar dan tingginya.
Berbeda juga dengan element dengan properti display: block yang selalu mengambil penuh ruang dalam
satu baris, element dengan display: inline-block secara default hanya akan mengambil ruang sebesar
konten di dalamnya. Dengan adanya sisa ruang di sebelah kiri atau kanannya, element dengan display:
inline-block bisa ditempatkan bersebelahan dengan yang lainnya.
Coba perhatikan contoh kode berikut
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
display: inline-block;
}
</style>
</head>
<body>
<h1 id="demo1">Saya bahagia</h1>
<h1 id="demo2">karena besok libur</h1>
</body>
</html>
Sekilas element <h1> terlihat seperti saat menggunakan display: inline: yaitu bersebelahan dengan
element lainnya.
Namun perbedaannya akan terlihat apabila kita mulai menambahkan tinggi dan lebar pada element
tersebut. Misalnya kita menambahkan properti width dan height seperti di bawah ini.
<style>
h1 {
}
#demo1 {
width: 150px;
height: 100px;
}
#demo2 {
width: 200px;
height: 150px;
}
</style>
Tinggi dan lebar dari element <h1> akan berubah mengikuti nilai yang kita berikan. Element dengan
display: inline tidak melakukan hal seperti ini.
Jadi dari penjelasan dan contoh di atas, kita bisa simpulkan bahwa properti inline-block itu seperti
persilangan antara inline dan block.
Ada beberapa karakteristik dari inline dan beberapa dari block yang diikuti saat kita menggunakan inline-
block, antara lain:
lebar box sebanding lebar dari konten di dalamnya; tidak sebaris penuh.
element dengan display: inline atau display: inline-block bisa ditempatkan di sebelah kiri atau kanannya.
jika kita memberikan nilai untuk properti height dan width, ia akan mengikutinya.
position: static
Secara default, seluruh properti position dari HTML element memiliki nilai static. Element dengan
properti tersebut tidak akan terpengaruh oleh properti top, bottom, left, dan right. Element tersebut akan
selalu berada sesuai dengan alur normal penempatan element dalam halaman web.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 600px;
height: 150px;
}
.yellow-boxes {
margin: 10px;
background: yellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="yellow-boxes" style="top: 20px;"></div>
<div class="yellow-boxes" style="right: 20px;"></div>
<div class="yellow-boxes" style="bottom: 20px;"></div>
<div class="yellow-boxes" style="left: 20px;"></div>
</div>
</body>
</html>
Keempat kotak kuning akan ditempatkan sebagaimana mestinya tanpa ada perubahan posisi.
Mungkin untuk sekarang kalian belum lihat perbedaannya. Pada topik selanjutnya kalian akan belajar
position: relative
position: relative
Element dengan posisi relative akan diposisikan relatif dari posisi normalnya. Kita bisa memberikan
properti top, right, bottom, dan left pada element dengan posisi relative. Element lain di sekitar element
dengan posisi relative tidak akan disesuaikan dengan ruang yang ditinggalkan oleh element.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
.inline-block {
background: blue;
width: 100px;
height: 100px;
margin: 4px;
}
</style>
</head>
<body>
<div>
<div class="inline-block"></div>
</div>
</body>
</html>
Kode di atas akan menampilkan tiga buah kotak berukuran 100px x 100px berwarna biru dalam satu
baris.
Sekarang coba tambahkan kode berikut ke dalam element <style>
/* Pada File CSS */

.relative {
position: relative;
top: 40px;
}
Lalu ubah kode HTML untuk kotak-kotaknya menjadi seperti ini
<div class="inline-block relative"></div>
Kotak kedua baru saja kita beri properti position: relative dan top: 40px yang berarti posisi ia sekarang
adalah 40px lebih ke bawah dari yang biasanya. Seperti ini.
position: absolute
Element dengan posisi absolute akan diposisikan relative dengan posisi ancestor terdekat yang posisinya
bukan static.
Apa itu ancestor?

Misalkan kalian mempunyai kode seperti berikut:

<body>
<div id="A">
<div id="B">
<div id="C">
<div id="D"></div>
</div>
<div id="E"></div>
</div>
</div>
</body>
Ancestor dari sebuah element merupakan semua element yang berada di tingkat atasnya. Misalnya
element <div id="D">, ia dibungkus oleh 3 buah element lainnya:
<div id="C">
<div id="B">
dan <div id="A">
Ketiga itu merupakan ancestor dari element <div id="D">. Sebab kalau kalian gambar diagram
pohonnya, ketiga element tersebut memiliki posisi yang lebih di atas dan terhubung langsung element
<div id="D">.
position: absolute
Sekarang coba perhatikan kode di bawah ini:
<!DOCTYPE html>
<html>
<head>
<style>
.small-square {
position: absolute;
right: 0;
height: 80px;
width: 80px;
background: yellow;
}
.medium-square {
height: 200px;
width: 300px;
background: red;
}
.big-square {
position: relative;
height: 400px;
width: 400px;
background: deepskyblue;
}
</style>
</head>
<body>
<div class="big-square">
<div class="medium-square">
<div class="small-square"></div>
</div>
</div>
</body>
</html>
Element <div class="small-square"> memiliki properti position:absolute dan right:0.
Sementara kalau kita analisa, yang manakah ancestor terdekatnya yang memiliki properti bukan position:
static?
Element <div class="medium-square"> merupakan parentnya. Tapi kita tidak memberinya properti
position. Dari topik sebelumnya, kalian tahu kalau secara default, sebuah element itu memiliki properti
position: static. Jadi ancestor yang kita inginkan bukan element ini.
Lalu ada <div class="big-square">. Nah kali ini ia memiliki properti position: relative. Berarti element
<div class="small-square"> akan diposisikan relatif terhadap element ini. Sehingga hasilnya menjadi
seperti di bawah ini:
Kotak yang kecil (kuning) memiliki properti right:0. Tapi itu relatif terhadap kotak yang besar (biru),
bukan yang berukuran sedang (merah).
position: fixed
Element dengan posisi fixed akan diposisikan relatif terhadap viewport browser, di mana akan selalu
berada di tempat yang sama jika walaupun halaman website di-scroll.
Ini biasa dipakai untuk element-element yang memang posisinya selalu konstan seperti navigation bar
dari sebuah halaman web yang selalu berada di bagian atas halaman. Atau chatbox yang selalu ada di
pojok layar agar mudah diakses seperti animasi di bawah ini.
position-fixed chatbox
Kita bisa memberikan properti top, bottom, right, dan left pada element yang memiliki style position:
fixed. Posisinya relatif pada viewport browser, jadi kalau diberi properti left:0px maka ia akan terus
berada di bagian kiri jendela browser.
Element dengan posisi fixed tidak akan menempati ruang pada halaman seperti element dengan attribute
position yang lainnya.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
top: 100px;
width: 300px;
padding: 10px 20px;
background: #73ad21;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
</html>
Pada kode di atas, element <div class="fixed"> akan berada 100px dari bagian atas viewport browser
(karena diberi properti top: 100px) meskipun halaman webnya di-scroll.
position: sticky
Setelah mempelajari position: fixed, mungkin kalian ingin membuat sebuah element yang tetap berada di
layar saat user men-scroll halaman webnya. Namun kalian ingin element itu juga menempati ruang pada
halaman seperti element lainnya.
Untuk itu, ada satu lagi nilai dari position yang kalian perlu tahu.
position: sticky
Element dengan posisi sticky akan diposisikan berdasarkan scroll halaman dari user.position:sticky pada
dasarnya adalah seperti gabungan dari position:relative dan position: fixed.
Awalnya, element dengan properti ini akan memiliki posisi seperti dia memiliki properti position:
relative. Namun ketika user melakukan scroll halaman web hingga element berada di sebuah lokasi
relative terhadap viewport, maka posisi element tersebut akan berubah seperti layaknya dia memiliki
properti position: fixed. Dengan kata lain ia akan diam di lokasi relatif terhadap viewport tadi.
📝 Catatan:
Viewport merupakan area di layar, di mana halaman web ditampilkan. Ukuran viewport di laptop tentu
berbeda dengan ukuran viewport di smartphone.
Untuk melihat hasil dari position:sticky, kita setidaknya butuh mengatur salah satu nilai dari properti top,
right, bottom, left.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
.sticky {
position: sticky;
top: 30px;
padding: 5px;
border: 2px solid blue;
}
p.content {
height: 100vh
}
</style>
</head>
<body>
<p>Cobalah scroll halaman website ini</p>
<div class="sticky">I am sticky!</div>
<p class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
</div>
</body>
</html>
Contoh di atas akan kelihatan seperti ini:
Element kuning bertuliskan I am sticky! akan berperilaku seperti ia memiliki position: relative pada
awalnya. Namun saat halaman web di-scroll dan element tersebut posisinya naik, ia akan berperilaku
seperti ia memiliki position: fixed saat jaraknya dengan batas atas viewport adalah 30px — sama dengan
properti top: 30px yang kita berikan.
Mengatur Viewport
Dulu banyak situs web yang didesain menggunakan pengukuran (seperti lebar element, besar huruf) yang
tetap. Saat tablet dan smartphone belum ada tentu hal itu tidak menjadi masalah sebab ukuran layar
komputer tidak jauh berbeda. Tapi jika halaman web tersebut sekarang kita coba buka di smartphone,
tentu kontennya akan terlalu besar jika dibandingkan viewport browser pada smartphone kita.
Apa Itu Viewport?

Secara umum viewport adalah daerah pada layar yang menampilkan suatu konten. Dalam konteks kita
kali ini, tentu viewport adalah daerah yang menampilkan halaman web yang sedang kita akses.
Perlu kalian ingat bahwa ukuran viewport tidak selalu sama dengan resolusi layar perangkat.
Coba kalian cermati tangkapan layar berikut.
Viewport
Gambar di kiri merupakan tangkapan layar pada komputer; gambar di kanan pada smartphone.
Kotak berwarna hijau mewakili keseluruhan layar perangkat. Namun area yang kita sebut viewport tadi
itu digambarkan oleh kotak berwarna biru.
Kembali ke permasalahan di awal: Bagaimana kita membuat halaman web kita menjadi responsif?
Bagaimana kita memastikan halaman web yang kita buat nanti itu tidak terlihat buruk atau terlalu besar
pada perangkat mobile?
Untuk membuat halaman website menjadi responsif, maka kita perlu menambahkan meta data berikut ini
di dalam element <head> di file HTML.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Meta data di atas akan mengatur viewport dari halaman website, di mana meta data tersebut akan
memberikan instruksi kepada browser untuk mengatur bagaimana dimensi dan skala dari halaman
website kita.
📝 Catatan:
Tag <meta> digunakan untuk menulis info tentang suatu dokumen HTML seperti deskripsi, nama
pengarang, keywords, dan tanggal terakhir dokumen diperbaharui. Tag <meta> tidak akan tampil di
halaman HTML.
Jika dituliskan di dalam file HTML, maka akan seperti ini:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Halo Dunia</h1>
<p>
Ini adalah contoh untuk mengatur file HTML agar bisa menjadi responsif.
</p>
</body>
</html>
Penjelasan kode di atas:
width=device-widthmemberitahu browser untuk mengikuti lebar layar dari perangkatnya. Sebab lebar
layar tiap perangkat berbeda-beda.
initial-scale=1.0 memberitahu browser tingkat pembesaran (zoom level) dari halaman itu.
Menggunakan Persentase Untuk Menentukan Nilai Lebar Suatu Element

Kita bisa menggunakan persentase untuk menentukan lebar suatu element agar sama dengan lebar parent
element-nya.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100%;
}
img {
width: 60%;
}
</style>
</head>
<body>
<div>
<img
src="https://skilvul-assets-01.s3-ap-southeast-1.amazonaws.com/lesson/intro-to-css/responsive-
design-percentage-cat.jpeg"
alt="kucing"
/>
<div>
</body>
</html>
Sekarang lebar foto kucing itu akan selalu sebesar 60% dari lebar <div> dengan latar belakang kuning;
berapapun lebar layarnya.
Properti `max-width: 100%`

Kita bisa menggunakan properti max-width: 100% untuk menentukan lebar maksimal dari suatu element.
Contoh: Kita mengambil gambar kucing dari internet yang memiliki lebar sebesar 640px. Maka, jika kita
menggunakan max-width: 100%, lebar gambar tidak akan melebihi 640px. Walaupun begitu, jika kita
membuka website kita di handphone, lebar gambar kucing akan mengikuti lebar layar handphone.
Jadi properti max-width itu menentukan batas atas dari lebar suatu element.
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img
alt="kucing"
/>
</body>
</html>
Satuan Unit "vw"

Suatu teks bisa diatur ukurannya dengan menggunakan vw, yang artinya viewport width. Viewport adalah
ukuran lebar window browser.
📝 Catatan:
1vw = 1% lebar viewport

Jika lebar viewport sebesar 100cm, maka 1vw adalah 1cm
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 5vw;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Contoh di atas akan kelihatan seperti ini:
viewport-width
Media Query
Jaman sekarang, perangkat itu ada bermacam-macam: mulai dari perangkat mobile sampai laptop.
Semuanya dengan resolusi layarnya masing-masing. Bagaimana cara kita memastikan website kita
terlihat bagus di semua layar tersebut?
Media Query
Dengan menggunakan media query, kita bisa mengatur lebar suatu element dan/atau memberikan style
lain yang berbeda-beda sesuai dengan ukuran dari browser.
Coba kalian simak kode berikut:
<!DOCTYPE html>
<html>
<head>
<style>
body {
max-width: 800px;
}
.button-group {
display: flex;
}
button {
font-size: 25px;
width: 100%;
}
</style>
</head>
<body>
<h1>Cat Ltd.</h1>
<img
width="100%"
/>
<div class="button-group">
<button>Talk to Us</button>
<button>Download Syllabus</button>
<button>Be a Partner</button>
<button>Join Class</button>
</div>
</body>
</html>
Kode HTML di atas akan menghasilkan halaman web seperti ini
media query example 1
Sekilas terlihat bagus memang. Tapi saat dibuka di layar yang lebih kecil, tombolnya menjadi semakin
berdempet dan teks di dalamnya terkesan terlalu besar.

Bagi pengguna komputer/laptop mungkin ini bukan sesuatu yang buruk. Tapi bagi pengguna mobile,
website ini akan terlihat aneh.
Coba kalian tambahkan potongan kode ini ke dalam element style:
/* Pada File CSS */

@media (max-width: 600px) {
.button-group {
display: flex;
flex-direction: column;
}
}
Penjelasan kode di atas:
@media (max-width: 600px) merujuk kepada jendela browser yang lebarnya maksimal 600px. Dengan
kata lain, semua rule/kode CSS di dalam @media ini akan diterapkan jika layarnya memiliki lebar 600px
atau kurang.
Sesuai kode di atas, saat lebar layar itu 600px atau kurang, element dengan class button-group akan
memiliki properti display:flex dan flex-direction:column.
Sehingga halaman profil kucing kita tadi akan menjadi seperti di bawah saat dilihat di layar yang kecil.

Sekarang tombol dan teks di dalamnya tidak lagi terlihat aneh bukan? Itu adalah kegunaan dari media
query.

CSS

Diunggah oleh

Informasi Dokumen

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

CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

CSS

Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheets.

Bagaimana CSS Bekerja di Web Browser?

Fungsi JavaScript, sebagai element yang membuat website menjadi interaktif.

Syntaxnya seperti ini:

/* Pada file CSS */

Mengenal Lebih Dalam Dengan CSS Selector

Memberi Style pada Semua Element

<p>Saya tinggal bersama orang tua saya</p>

<p>Saya tinggal bersama orang tua saya</p>

element <p> yang berisi "Namaku"

Memberi Style pada Semua Element Tertentu

<p>Saya tinggal bersama orang tua saya</p>

Memberi Style di Element dengan Nama id Tertentu

<p class="highlight">Saya tinggal bersama orang tua saya</p>

Memberi Style di Element dengan Nama class Tertentu

<p class="highlight">Saya tinggal bersama orang tua saya</p>

Memberikan Style di Element dengan Attribute Tertentu

Memberikan Style di Child Element

Tapi coba lihat kode CSS yang berikut.

/* Pada File CSS */

Memberikan Style yang Sama di Lebih dari Satu Element Sekaligus

Pseudo-class & Pseudo-element

Memberikan style pada link pada saat di-hover

Memberikan style pada huruf pertama pada suatu kalimat

Berikut ini adalah tabel yang menjelaskan tentang seluruh pseudo-element:

Melainkan seperti ini

Box model terdiri dari:

Perhitungan Ukuran Lebar dan Tinggi Box Model

Dan coba lihat contoh kode dari topik sebelumnya:

Sementara, total tinggi box sebenarnya adalah:

Bagaimana dengan element?

Lebar dan Tinggi Element

Jadi, ukuran element: ukuran konten + padding + border.

Kita ambil contoh kode tadi

/* tambahkan properti box-sizing: border-box */

"Berarti gambar kucingnya jadi lebih kecil dong?"

display: none vs visibility: hidden

"Lho apa gunanya sebuah element kalau disembunyikan?"

"Kok bisa seperti itu?"

"Lho terus bedanya dengan display: none apa dong?"

Coba simak perbedaannya dengan contoh kode berikut.

Element lain yang merupakan inline-level element adalah

"Wah apa itu?" 🤔

Coba perhatikan contoh kode berikut

Sekarang coba tambahkan kode berikut ke dalam element <style>

/* Pada File CSS */

Apa itu ancestor?