Tutorial CSS Lengkap (Indonesia)

CSS merupakan salah satu unsur dalam pembentukan website, digunakan untuk memberikan styling website.

9 min readJul 10, 2020

Pengenalan

CSS merupakan singkatan dari Cascading Style Sheet. CSS digunakan untuk mengubah tampilan dari halaman web yang dibuat menggunakan HTML.

Ada banyak yang bisa dilakukan menggunakan CSS, kita bisa mengubah ukuran font, memberi warna font dan background, mengatur layout atau tata letak, membuat animasi, dan lain-lain yang berkaitan dengan tampilan.

Dengan CSS kita bisa membuat halaman web menjadi lebih indah dan menarik.

Kita bisa memformat tampilan halaman web menggunakan HTML, namun cara ini sudah tidak digunakan lagi. Kita bisa memformat tampilan halaman web mengguankan CSS. karena kita memisahkan fungsional dari HTML, CSS, dan JavaScript sesuai tujuan masing-masing.

HTML digunakan untuk membuat kerangka website, CSS digunakan untuk membuat tampilan website, JavaScript digunakan untuk membuat website menjadi interaktif.

Sintaks CSS

CSS memiliki serangkaian aturan yang harus diikuti agar bisa digunakan untuk memformat tampilan halaman web.

Syntax CSS terdiri dari Selector, Declaration, Property, dan Value.

Selector digunakan untuk memilih element HTML yang ingin di-style. Terdapat banyak selector yang bisa digunakan untuk mencari bagian dari HTML.

Declaration adalah tempat untuk menulis style yang ingin diberikan, ditandai dengan kurung kurawal {}.

Property adalah style yang ingin diberikan ke suatu selector. Misal property color digunakan untuk memberikan warna teks.

Value adalah satuan nilai yang diberikan ke property. Misal property color diberikan value red.

Sebagai contoh, kita ingin memformat paragraf menjadi berwarna merah:

p {
 color: red;
}

Pada kode di atas, p adalah selector, di mana selector yang kita gunakan berdasarkan nama element. kurung kurawal {} adalah declaration di mana kita akan memulai untuk menulis style ke element p. color adalah nama property yang akan kita berikan ke element p. red adalah nilai yang kita berikan kepada property color.

Hasil kode di atas akan mengubah warna paragraf menjadi warna merah.

Dalam menggunakan CSS, kita akan sering menuliskan syntax CSS tersebut untuk memformat tampilan halaman web.

CSS Selectors

Selectors adalah salah satu pembahasan yang penting di dalam CSS karena dalam menulis CSS kita akan sering menggunakan Selectors.

Selectors adalah cara yang digunakan untuk memilih element html yang ingin di-style.

Terdapat banyak jenis selectors di dalam CSS:

Element Selectors
ID Selectors
Class Selectors
Universal Selectos
Grouping Selectos

Elements Selector

Element Selectors adalah salah satu jenis selector yang digunakan untuk memilih elment html berdasarkan nama tag atau nama element.

Berikut adalah contoh penggunaan Element Selector.

Kita memiliki element paragraf seperti ini:

<p>Saya sedang belajar CSS</p>
<p>CSS digunakan untuk memberikan style ke HTML</p>

Kemudian kita memilih element p berdasarkan nama element atau nama tag di CSS:

p {
 color: red;
}

Maka hasilnya adalah seluruh tag p akan berwarna merah.

Class Selector

Class Selector digunakan untuk memilih element berdasarkan nama class.

Berikut contoh penggunaan Class Selector

<p class="pertama">Ini adalah paragraf pertama</p>
<p class="kedua">Ini adalah paragraf kedua</p>

Kita memilih element p berdasarkan nama class “pertama”:

.pertama {
 background-color: red;
 font-size: 30px;
}

Maka hasilnya adalah paragraf yang memiliki class pertama akan memilih warna background merah dan ukuran font 30px.

ID Selector

ID Selector digunakan untuk memilih element berdasarkan nama id.

Berikut contoh penggunaan ID Selector

<h1 id="judul">Ini adalah judul</h1>
<h2>Ini adalah sub judul</h2>

Kita memilih element h1 berdasarkan nama id “judul”:

#judul {
 color: blue;
}

Maka hasilnya adalah element yang memiliki id “judul” akan berwarna biru.

Universal Selector
Universal selector digunakan untuk memilih semua element.

Berikut contoh penggunaan universal selector:

* {
 margin: 0;
}

Maka hasilnya adalah seluruh element HTML akan diberikan margin 0.

Group Selector

Group Selectors digunakan untuk memilih beberapa selectors sekaligus dan ingin memberikan style yang sama.

Berikut contoh penggunaan selector tanpa group selector:

<h1></h1>
<h2></h2>
<p></p>

Kita memilih element h1, h2, dan p untuk diberikan style

h1 {
 text-align: center;
 color: red;
}h2 {
 text-align: center;
 color: red;
}p {
 text-align: center;
 color: red
}

Kita menulis style yang sama untuk ketiga element tersebut, maka pada kasus ini kita bisa menggunakan group selector yaitu menggabungkan beberapa selector dan diberikan style yang sama.

Berikut contoh penggunaan group selectors:

h1, h2, p {
 text-align: center;
 color: red;
}

Kita memilih beberapa selector sekaligus kemudian kita memberikan style ke beberapa selector tersebut. Hasilnya element h1, h2, dan p memiliki style berada di tengah dan font berwana merah.

CSS Typography

Terdapat banyak property yang berkaitan dengan typography, typography sendiri merupakan istilah yang berkaitan dengan tulisan.

Pada pembahasan sebelumnya kita sudah membahas beberapa property yang berkaitan dengan typography seperti property color, text-align.

Ada banyak property yang berkaitan dengan typography:

color
font-family
font-size
font-style
font-weight
text-align
text-transform
text-decoration
text-shadow
line-height
letter-spacing
word-spacing

Color

Property color digunakan untuk mengatur warna text atau font.

Nilai warna dapat diberikan dengan 3 cara:

Nama warna: “Merah”
Nilai HEXA: “#ff0000”
Nilai RG: “rgb(255, 0, 0)”

Berikut contoh penggunaan property color:

<h1>Ini merupakan judul</h1>

Selanjutnya kita berikut poperty color:

h1 {
 color: red;
}

Kita juga bisa memberikan warna dalam format hexa:

h1 {
 color: #fff;
}

Font Family

Property font-family digunakan untuk mengatur jenis font.

Ada banyak jenis font yang dapat digunakan seperti: Arial, Times New Roman, Calibri, dll.

Berikut contoh penggunaan property font-family:

<h1>Ini merupakan judul</h1>

Selanjutnya kita berikan property font-familty:

h1 {
 font-family: "Arial"
}

Font Size

Property font-size digunakan untuk mengatur ukuran font.

Satuan nilai dari font-size terdiri dari:

px (pixel)
em
rem
%

Berikut contoh penggunaan property font-size:

<p>Ini adalah sebuah paragraf</h1>

Selanjutnya kita berikan property font-size

p {
 font-size: 30px;
}

Font Style

Property font style digunakan untuk mengatur font italic (garis miring).

Value dari property font style terdiri dari:

normal
italic
oblique

Berikut contoh penggunaan font style:

<p>Ini adalah sebuah paragraf</p>

Selanjutnya kita berikan property font-style

p {
 font-style: italic
}

Font Weight

Property font weight digunakan untuk mengatur ketebalan font.

Value dari property terdiri dari:

normal
200–800

Berikut contoh penggunaan property font weight:

<p>ini adalah sebuah paragraf</p>

Selanjutnya kita berikan property font-weight

p {
 font-weight: bold
}

Text Align

Property text align digunakan untuk mengatur tata letak font.

Value dari properti ini terdiri dari:

left: rata kiri
right: rata kanan
center: rata kanan
justiry: rata kiri kanan

Berikut contoh penggunaan property text align:

<p>Ini adalah sebuah parafgraf

Selanjutnya kita berikan property text-align

p {
 text-align: center
}

Text Transform

Property text transform digunakan untuk mengatur kapital.

Value dari text transform terdiri dari:

uppercase
lowercase
capitalize

Berikut contoh penggunaan property text transform:

<p>Ini adalah sebuah paragraf</p>

Selanjutnya kita berikan property text transform:

p {
 text-transform: uppercase
}

Text Decoration

Property text decoration digunakan untuk mengatur dekorasi teks.

Value dari text decoration terdiri dari:

none
underline

Berikut contoh penggunaan property text decoration:

<p>Ini adalah sebuah paragraf</p>

Selanjutnya kita berikan property text decoration:

p {
 text-decoration: underline;
}

Text Shadow

Property text shadow digunakan untuk memberikan bayangan di teks.

Property text shadow membutuhkan beberapa parameter nilai:

nilai pertama: nilai bayangan sumbu h
nilai kedua: nilai bayangan sumbu v
nilai ketiga: blur radius
nilai keempat: warna bayangan

Berikut penggunaan property text shadow:

<h1>Ini adalah judul</h1>

Selanjutnya kita berikan property text shadow:

h1 {
 text-shadow: 2px 2px 2px shadow;
}

Line Height

Property line height digunakan mengatur ketinggian baris.

Value dari property dari line height terdiri dari:

number: dalam bentuk angka (1, 2, 5)
length: dalam bentuk satuan (px, cm)
persen: dalam bentuk persen (2%, 5%)

Berikut contoh penggunaan property line height:

<p>
 ini adalah sebuah paragraf <br>
 ini paragraf ke dua
<p>

Selanjutnya kita berikan property line height:

p {
 line-height: 2;
}

Letter Spacing

Property letter spacing digunakan untuk mengatur jarak antar huruf.

Value dari property letter spacing berupa satuan seperti px, em, rem.

Berikut contoh penggunaan letter spacing:

<p>Ini adalah sebuah paragraf</p>

Selanjutnya kita berikut property letter spacing:

p {
 letter-spacing: 3px;
}

Word Spacing

Property word spacing digunakan untuk mengatur jarak antar kata.

Value dari property word spacing berupa satuan seperti px, em, rm

Berikut contoh penggunaan word spacing:

<p>Ini adalah sebuah paragraf</p>

Selanjutnya kita berikan property word spacing:

p {
 word-spacing: 20px;
}

Box Model

CSS Box Model adalah box model yang diterapkan pada setiap element.

Setiap element HTML ditampilkan sebagai box model.

Pemahaman box model penting untuk diketahui karena kita akan mengatur design dan layout untuk setiap element.

Box Model pada setiap element terdiri dari 4 bagian:

Content Box — Content dari element (teks atau gambar).
Padding — Jarak bagian dalam element
Border — Pembatas atau garis tepi dari element
Margin — Jarak bagian luar dari element

Gambar berikut menggambarkan box model dari suatu element

image here.

Box model memungkinkan kita untuk mengatur widht dan height dari content, padding, border, margin.

Kita akan membahas bagian dari content box satu-satu.

Content Box

Content box adalah tempat di mana content seperti teks atau gambar ditampilkan.

Pada content box kita bisa mengatur lebar dan tinggi content dari suatu element.

Berikut contoh penggunaan width dan height:

<p>Ini adalah sebuah paragraf</p>

Berikut kita berikan property width dan height:

p {
 width: 100px;
 height: 50px;
}

Padding

Padding digunakan untuk mengatur jarak konten bagian dalam.

Padding sering digunakan agar content tidak terlalu dekat dengan border.

Padding memiliki beberapa property:

padding-top: mengatur padding atas
padding-right: mengatur padding kanan
padding-bottom: mengatur padding bawah
padding-left: mengatur padding kiri
padding (shorthand): mengatur padding atas, kanan, bawah dan kiri

Berikut contoh penggunaan padding:

<p>Ini adalah paragraf</p>

Berikut kita berikan property padding:

p {
 padding-top: 2px;
 padding-right: 5px;
 padding-bottom: 7px;
 padding-left: 9px;
}

Selain itu, kita bisa menggunakan penulisan yang lebih singkat dengan property padding.

Property padding membutuhkan beberapa parameter nilai:

nilai pertama: padding bagian atas
nilai kedua: padding bagian kanan
nilai ketiga: padding bagian bawah
nilai keempat: padding bagian kiri

Berikut contoh penggunaan property (shorthand):

<p>Ini adalah paragraf</p>

Berikut kita berikan property padding (shorthand):

p {
 padding: 2px, 3px, 5px, 7px;
}

Border

Border digunakan untuk mengatur garis tepi dari suatu element.

Kita bisa memberikan warna, bentuk, lebar, posisi untuk border.

Property border membutuhkan beberapa parameter nilai:

lebar border: 2px
jenis border: solid, dotted
warna border: red

Berikut contoh penggunaan property border:

<p>Ini adalah sebuah paragraf</p>

Berikut kita berikan property border:

p {
 border: 2px solid red;
}

Margin

Margin digunakan untuk mengatur jarak element bagian luar.

Margin digunakan untuk mengatur jarak antara satu element dengan yang lainnya.

Margin memiliki format property yang sama seperti padding, terdiri dari:

margin-top
margin-right
margin-bottom
margin-left
margin

Berikut contoh penggunaan margin:

<h1>Ini adalah judul<h1>
<h2>Ini adalah sub judul<h2>

Berikut kita berikan property margin:

h2 {
 margin-top: 20px;
 margin-left: 10px;
}

Selain itu, kita bisa menuliskan property yang lebih singkat dengan property margin.

Property margin membutuhkan beberapa parameter nilai:

nilai pertama: margin bagian atas
nilai kedua: margin bagian kanan
nilai ketiga: margin bagian bawah
nilai keempat: margin bagian kiri

Berikut contoh property margin:

<h1>Ini adalah judul<h1>
<h2>Ini adalah sub judul<h2>

Berikut kita berikan property margin (shorthand):

h2 {
 margin: 20px, 0, 0, 10px;
}

CSS Background

Background digunakan untuk memberikan warna background pada sebuah element.

Terdapat banyak property yang berkaitan dengan background:

background-color: mengatur warna background
background-image: mengatur gambar background

Background Color

Background color digunakan untuk memberikan warna pada sebuah element.

Background color dapat diberikan nilai:

color name: nama warna
hexa: kode hexa
rgb: kode rgb

Berikut contoh penggunaan background color:

<h1>Ini adalah sebuah judul</h1>

Berikut kita berikan property background color:

h1 {
 background-color: red;
}

Background Image

Background image digunakan untuk memberikan gambar pada sebuah element.

Nilai dari background image adalah nama gambar yang ingin ditampilkan (lengkap beserta alamat atau pathnya).

Berikut adalah contoh penggunaan background image:

<div>
 <p>Ini adalah sebuah paragraf</p>
<div>

Berikut kita berikan property background image:

div {
 min-height: 100vh;
 background-image: url('bg.png');
}

Terdapat, beberapa property background yang berkaitan dengan background-image, property ini sering digunakan bersamaan dengan background-image.

Berikut bebrapa di antaranya:

background-repeat
background-size
background-position
background-attachment

Position

Position digunakan untuk mengatur posisi dari suatu element.

Setiap element di dalam HTML sudah memiliki nilai default untuk property position, nilai default yang diberikan ke setiap element adalah static.

Property position memiliki beberapa nilai:

static: posision default
relative
absolute
fixed

Position akan berhubungan dengan property yang lain untuk mengatur posisi dari suatu element, seperti property:

top
right
bottom
left

Static

Nilai static merupakan nilai bawaan untuk setiap element, tanpa dituliskan pun setiap element sudah menggunakan nilai static.

Jika kita memberikan nilai static pada sebuah element, maka element tersebut akan kembali ke normal document flow.

Nilai static tidak akan berpengaruh dengan property top, right, bottom, dan left.

Berikut contoh penggunaan nilai static:

<p>Ini adalah sebuah paragraf</p>

Berikut kita berikan property static

p {
 position: static;
}

Relative

relative merupakan nilai kedua yang dapat digunakan untuk mengatur posisi element.

Nilai relative akan membuat element diposisikan secara relative dari posisi normalnya.

Jika kita ingin mengatur posisi element ke manapun, maka nilai relative dapat digunakan.

Menggunakan nilai relative kita bisa mengatur posisi element ke mana saja menggunakan property top, right, bottom, left.

Berikut contoh penggunaan nilai relative:

<p>ini adalah sebuah paragraf</p>

Berikut kita berikan nilai relative:

p {
 position: relative;
 left: 50px;
}

Absolute

Position absolute adalah position yang bersifat relatif yang bergantung terhadap posisi element ancestor terdekat yang memiliki nilai relative.

Jika position absolute tidak menemukan element ancestor relatif terdekat, maka position akan mengacu pada element body.

Berikut contoh penggunaan position absolute:

<div class="relative">
 <span>Element ini memiliki nilai relatif</span>
 <div class="absolute">Element ini memiliki nilai absolute</div>
</div>

Berikut kita berikan nilai relative:

.relative {
 position: relative;
 width: 800px;
 height: 400px;
 border: 1px solid green;
}.absolute {
 position: absolute;
 width: 200px;
 height: 100px;
 top: 50px;
 right: 10px;
 border: 1px solid red;
}

Fixed

Position fixed akan membuat element relative terhadap viewport.

Element yang diberikan nilai fixed posisinya tidak akan berubah walaupun halaman web di-scrool karena elementnya mengacu pada viewport.

Berikut contoh penggunaan position fixed:

<p>Ini adalah sebuah paragraf</p>

Berikut kita berikan property fixed:

p {
 position: fixed;
 bottom: 0;
 right: 0;
 width: 300px;
 border: 1px solid green;
}