CSS

Cascading Style Sheets

Anggota Kelompok

1 Christoforus Indra Bagus Pratama 5025231124

2 Argya Aptanagi 5025231221

3 Agung Eka Ramadhan 5025231244

 CSS
Cascading Style Sheets

Pengertian
CSS (Cascading Style Sheets) adalah Bahasa yang
diguanakan untuk menentukan tampilan dan format
halaman website. CSS digunakan Bersama dengan
Bahasa markup seperti HTML untuk membangun
website yang menarik dan memiliki fungsi yang
berjalan baik
 CSS
Cascading Style Sheets

Fungsi Contoh
1. Membuat website tampil rapi 1. Menentukan format paragraf
2. Menawarkan variasi tampilan 2. Mengubah warna link
3. Menghighlight baris dalam
tabel
 Jenis CSS

Inline CSS External CSS

Kode CSS yang hanya Kode CSS yang diletakkan di
mempengaruhi satu baris kode Internal CSS luar dokumen HTML sebagai
HTML, digunakan untuk file .css menggunakan <link>
menerapkan style secara
langsung pada elemen HTML Kode CSS yang dituliskan di
dalam tag <style> pada bagian
header file HTML
Inline CSS
Internal CSS
External CSS
Class Selector
Universal Selector Class Selector
Digunakan untuk menargetkan Digunakan untuk menargetkan
semua elemen dalam file HTML elemen berdasarkan atribut
class

Type Selector Id Selector

Digunakan untuk menargetkan Digunakan untuk menargetkan
suatu tag tertentu elemen berdasarkan atribut id
Class Selector
Class Selector
Child Selector Adjacent Sibling Selector
Digunakan untuk menargetkan Digunakan untuk menargetkan
anak LANGSUNG dari elemen yang elemen yang berada TEPAT
dicocokkan oleh pemilih pertama SETELAH elemen spesifik lainnya

Descendant Selector General Sibling Selector

Digunakan untuk menargetkan Digunakan untuk menargetkan
SEMUA anak dari elemen yang semua elemen yang berada
dicocokkan oleh pemilih pertama setelah elemen spesifik lainnya
Class Selector
 Cascade Rules

Importance Order of appearance

Aturan yang ditandai dengan
!importance akan menjadi Specify Ketika beberapa aturan yang
prioritas utama memiliki fungsi yang sama,
aturan yang ditulis terakhir
Aturan yang paling spesifik yang akan dimunculkan
yang akan dimunculkan.
Semakin spesifik selektor maka
akan semakin menjadi prioritas
(id > class > div, p)
Cascade Rules
Inheritance
● Color Name
Dengan menuliskan nama warna, terdapat 140 warna standar yang
dapat digunakan langsung.

● Hex Code
Menggunakan kode warna hexadecimal yang diawali # berisi Fitur CSS
kombinasi 6 digit angka atau huruf (0-9 dan A-F)
Color dan Background
color
●RGB Value
Memilih warna menggunakan fungsi rgb() yang berisi nilai intensitas
warna merah, hijau, dan biru (0-255)
Color dan Background Color
● RGBA (Red, Green, Blue, Alpha)
Variasi dari RGB dengan tambahan nilai alpha yang mewakili
transparansi. Semakin kecil semakin transparan (0-1)

● HSL (Hue, Saturation, Lightness)

H untuk menentukan warna dasar (R, G, B = 0, 120, 240). S untuk
Fitur CSS
intensitas warna (0% = abu abu, 100% = warna penuh). L untuk Alpha dan HSL
kecerahan (0% = hitam, 100% = putih)

● HSLA
Alpha dan HSL
●Font Family
Mengatur font yang akan digunakan.

● Font Size
Mengatur ukuran dari font yang
digunakan.

Font Weight
Fitur CSS
●
Mengatur ketebalan dari font yang
digunakan. Text

● Font Style
Biasanya digunakan untuk
memberikan style italic.

● Text Decoration
Untuk mengubah dekorasi teks,
seperti menambahkan garis bawah,
garis atas, dan garis tembus.
Text
●Text Transform
Mengubah huruf kapital.

● Text Align
Mengatur perataan teks.

● Text Shadow Fitur CSS

Memberi bayangan pada teks Text
dengan sintaks offset-x offset-y
Blur-radius color.

● Word dan Letter Spacing

Memberi jarak antara kata maupun
huruf

● Hover, Active, dan Visited

Membberi gaya pada tautan atau
elemen tertentu
Text
● Height dan Width
height menentukan seberapa tinggi
elemen tersebut, sedangkan width
menentukan lebar elemen.

● Overflow
mengatur bagaimana konten yang melebihi ukuran kontainer
(ditentukan oleh height dan width) ditampilkan.
● Overflow Hidden Fitur CSS
Box dan Overflow
Menyembunyikan konten yang melampaui batas ukuran
elemen.

● Overflow Scroll

Menambahkan scrollbar (baik horizontal maupun vertikal)

pada elemen jika konten melebihi ukuran yang ditentukan
 Box

HTML CSS
Hasil
● Padding
Ruang di dalam elemen, antara konten elemen dan batas (border)
elemen tersebut
● Penulisan dan Penggunan Padding
1.
padding yang sama untuk semua sisi (atas, kanan, bawah, dan kiri)
2.
padding untuk sisi atas-bawah dan kiri-kanan Fitur CSS
3.
Padding

padding untuk sisi atas, kiri-kanan, bawah

4.
padding untuk sisi atas, kanan, bawah, kiri
 Padding

HTML CSS
Hasil
● Margin
ruang kosong di luar elemen, atau antara elemen satu dengan elemen
lainnya di dalam halaman web

● Penulisan dan Penggunan Margin

1.
margin yang sama untuk semua sisi (atas, kanan, bawah, dan kiri)
2.
margin untuk sisi atas-bawah dan kiri-kanan Fitur CSS
3. Margin

margin untuk sisi atas, kiri-kanan, bawah

4.
margin untuk sisi atas, kanan, bawah, kiri

● Margin Auto
Jika nilai auto diberikan untuk margin, elemen tersebut akan secara
otomatis diratakan. Ini paling sering digunakan untuk memusatkan
elemen secara horizontal.
 Margin

HTML CSS
Hasil
● Display
properti yang menentukan bagaimana sebuah elemen HTML ditampilkan di
halaman web. Mengatur tata letak elemen.

● Jenis Display
1. Inline
Elemen display hanya mengambil lebar sesuai dengan kontennya dan
tidak memulai baris baru (berbaris dengan elemen lain dalam satu baris).
2. Block Fitur CSS
Elemen display selalu menempati satu baris penuh (memulai baris baru)
Display
dan akan mengambil lebar penuh dari kontainer induknya secara
default.
3. Inline-Block
Gabungan antara inline dan block, di mana elemen tetap berada
dalam satu baris seperti elemen inline, tetapi bisa memiliki width dan
height seperti elemen block.
4. Flex
Elemen yang memiliki `display: flex` menjadi kontainer fleksibel, di
mana elemen anak (child elements) di dalamnya akan disusun sesuai
dengan aturan flexbox.
 Display

HTML CSS
Hasil
Contoh Gabungan
Sederhana
● Lists Style
Lists dapat distyle menggunakan CSS dengan fitur list-style yang dapat
mengubah seperti tipe list dan posisi list
● Syntax
1.
mengubah jenis atau tipe dari list seperti angka biasa, romawi, dll
2.
mengubah posisi dari marker list, bisa inside atau outside Fitur CSS
3.
Lists Style

mengubah marker list menjadi image custom

4.

mengubah tipe marker list dan position sekaligus dalam satu line
 Lists Style

HTML CSS
Hasil
● Table Style
Table dapat distyle menggunakan CSS dengan fitur border yang dapat
mengubah warna, size, dari tabel itu sendiri serta mengubah alignment
dari data yang terdapat di dalam tabel
● Syntax
1.
membuat garis tepi disekitar tabel, dipisah menjadi empat bagian
yaitu top, bottom, left, right
2.
Fitur CSS
Table Style
menggabungkan keseluruhan border dalam sebuah tabel
3.

memberikan spasi atau jarak antara border

 Lists Style

HTML CSS
Hasil
● Forms
CSS dapat meng-style bentuk form dalam HTML sehingga terlihat lebih
menarik
● Penjelasan
1. dapat mengubah ukuran, warna, border, padding, dan font dari text.
2. dapat mengubah tampilan tombol, seperti warna latar, hover
effects, dan border-radius.
3. dapat menggunakan pseudo-class seperti :focus dan :hover untuk
meningkatkan interaktivitas dan memudahkan pengguna untuk melihat Fitur CSS
elemen mana yang sedang diisi Forms
 Lists Style

HTML CSS
Hasil
 Referensi

- Playlist "CSS Dasar" oleh Kelas Terbuka di platform

YouTube
- w3schools.com