Professional Documents
Culture Documents
aufaroot18.medium.com/tutorial-css-lengkap-indonesia-73386cd6eb29
Aufa Billah
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.
1/14
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.
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.
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.
Element Selectors
ID Selectors
Class Selectors
Universal Selectos
2/14
Grouping Selectos
Elements Selector
Element Selectors adalah salah satu jenis selector yang digunakan untuk memilih elment
html berdasarkan nama tag atau nama element.
Kemudian kita memilih element p berdasarkan nama element atau nama tag di CSS:
p { color: red;}
Class Selector
Maka hasilnya adalah paragraf yang memiliki class pertama akan memilih warna
background merah dan ukuran font 30px.
ID Selector
Maka hasilnya adalah element yang memiliki id “judul” akan berwarna biru.
Universal Selector
Universal selector digunakan untuk memilih semua element.
3/14
* { margin: 0;}
Group Selector
Group Selectors digunakan untuk memilih beberapa selectors sekaligus dan ingin
memberikan style yang sama.
<h1></h1><h2></h2><p></p>
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.
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.
color
font-family
font-size
font-style
font-weight
text-align
text-transform
text-decoration
text-shadow
line-height
4/14
letter-spacing
word-spacing
Color
Property color digunakan untuk mengatur warna text atau font.
h1 { color: red;}
h1 { color: #fff;}
Font Family
Ada banyak jenis font yang dapat digunakan seperti: Arial, Times New Roman, Calibri,
dll.
h1 { font-family: "Arial"}
Font Size
px (pixel)
em
rem
%
5/14
<p>Ini adalah sebuah paragraf</h1>
p { font-size: 30px;}
Font Style
Property font style digunakan untuk mengatur font italic (garis miring).
normal
italic
oblique
p { font-style: italic}
Font Weight
normal
200–800
p { font-weight: bold}
Text Align
6/14
Berikut contoh penggunaan property text align:
p { text-align: center}
Text Transform
uppercase
lowercase
capitalize
p { text-transform: uppercase}
Text Decoration
none
underline
p { text-decoration: underline;}
Text Shadow
7/14
nilai keempat: warna bayangan
Line Height
p { line-height: 2;}
Letter Spacing
Value dari property letter spacing berupa satuan seperti px, em, rem.
p { letter-spacing: 3px;}
Word Spacing
Value dari property word spacing berupa satuan seperti px, em, rm
8/14
p { word-spacing: 20px;}
Box Model
CSS Box Model adalah box model yang diterapkan pada setiap element.
Pemahaman box model penting untuk diketahui karena kita akan mengatur design dan
layout untuk setiap element.
image here.
Box model memungkinkan kita untuk mengatur widht dan height dari content, padding,
border, margin.
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.
Padding
Padding sering digunakan agar content tidak terlalu dekat dengan border.
9/14
padding-bottom: mengatur padding bawah
padding-left: mengatur padding kiri
padding (shorthand): mengatur padding atas, kanan, bawah dan kiri
Selain itu, kita bisa menggunakan penulisan yang lebih singkat dengan property padding.
Border
Margin
10/14
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
Selain itu, kita bisa menuliskan property yang lebih singkat dengan property margin.
CSS Background
Background digunakan untuk memberikan warna background pada sebuah element.
Background Color
11/14
hexa: kode hexa
rgb: kode rgb
h1 { background-color: red;}
Background Image
Nilai dari background image adalah nama gambar yang ingin ditampilkan (lengkap
beserta alamat atau pathnya).
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.
12/14
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.
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.
Absolute
Position absolute adalah position yang bersifat relatif yang bergantung terhadap posisi
element ancestor terdekat yang memiliki nilai relative.
13/14
Jika position absolute tidak menemukan element ancestor relatif terdekat, maka position
akan mengacu pada element body.
.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
Element yang diberikan nilai fixed posisinya tidak akan berubah walaupun halaman web
di-scrool karena elementnya mengacu pada viewport.
p { position: fixed; bottom: 0; right: 0; width: 300px; border: 1px solid green;}
14/14