1.

Pengenalan CSS
CSS (Cascading Style Sheets) sejauh ini mempunyai 3 versi mulai dari CSS1, CSS2 dan CSS3.

CSS1 di rilis pada 1996, lalu CSS2 diliris pada 1999, dan yang versi ketiga di rilis pada 1999 dengan
memiliki banyak pembaruan fitur seperti rounded borders, split text dan grid system.

2. Sintaks dan Selektor CSS

Elemen Selector:
p{

color: red

Ini mengaplikasikan gaya ke semua elemen <p> di dalam dokumen HTML. Dalam contoh ini, teks dalam
elemen <p> akan berwarna merah.

Class Selector:
.kotak{

width: 100px;

height: 100px;

background-color: blue;

Selector ini mengaplikasikan gaya ke semua elemen dengan kelas "kotak". Dalam contoh ini, semua
elemen dengan kelas "kotak" akan memiliki lebar dan tinggi 100px, serta latar belakang

ID Selector:
#judul{

font-size: 24px;

font-weight: bold;

Selector ini mengaplikasikan gaya ke elemen dengan ID "judul". Dalam contoh ini, teks pada elemen
dengan ID "judul" akan memiliki ukuran font 24px dan tebal.

Attribute Selector:
input[type="text"]{

width: 200px;

}
Selector ini mengaplikasikan gaya ke elemen input dengan atribut type yang nilainya adalah "text".
Dalam contoh ini, lebar input dengan tipe teks akan diatur menjadi 200px.

Pseudo-class Selector:
a:hover{

color:orange;

Selector ini mengaplikasikan gaya ke hyperlink saat kursor berada di atasnya. Dalam contoh ini, warna
teks hyperlink akan berubah menjadi orange saat dihover.

Pseudo-element Selector:
p::first-line{

font-weight: bold;

color: blue;

Selector ini memungkinkan Anda menerapkan gaya khusus pada bagian tertentu dari elemen, seperti
baris pertama. Dalam contoh ini, baris pertama dalam elemen <p> akan menjadi tebal dan berwarna
biru.

3. Properti CSS
Mengubah warna teks paragraf menjadi merah:

p{

color: red;

Mengatur ukuran font h1 menjadi 36px

h1{

font-size:36px;

Menambahkan background warna biru pada div dengan class 'container'

.container{

background-color: blue;

Mengatur margin atas elemen dengan id 'header' menjadi 10px

#header{

margin-top: 10px;

Menambahkan padding 10px pada semua sisi elemen

li{

padding: 20px;

Menambahkan border solid hitam dengan lebar 2px pada elemen img

img{

border: 2px solid black;

4. Box Model
Box Model adalah konsep fundamental dalam CSS yang mendefinisikan cara browser menangani ruang
yang ditempati oleh setiap elemen HTML. Ini penting karena memungkinkan pengembang web untuk
mengatur dan mengontrol tata letak dan dimensi elemen-elemen tersebut.

Box Model terdiri dari empat bagian utama: content, padding, border, dan margin.

1. Content (Konten): Ini adalah bagian sebenarnya dari elemen HTML, seperti teks, gambar, atau
elemen lainnya yang dimasukkan di dalamnya. Ukuran konten ini ditentukan oleh properti width
dan height.

2. Padding (Isian): Padding adalah ruang kosong di sekeliling konten elemen. Ini memberikan jarak
antara konten dan batas elemen. Padding didefinisikan menggunakan properti padding dan
dapat diatur secara independen untuk setiap sisi (atas, kanan, bawah, kiri) dengan padding-top,
padding-right, padding-bottom, dan padding-left.

3. Border (Batas): Border adalah garis yang mengelilingi konten dan padding elemen. Ini
membentuk kerangka elemen. Anda dapat menentukan tipe, ketebalan, dan warna border
menggunakan properti border. Seperti padding, border juga dapat diatur secara independen
untuk setiap sisi dengan border-top, border-right, border-bottom, dan border-left.

4. Margin: Margin adalah ruang kosong di luar border elemen. Ini memberikan jarak antara
elemen tersebut dan elemen-elemen lainnya di sekitarnya. Margin didefinisikan menggunakan
properti margin dan dapat diatur secara independen untuk setiap sisi dengan margin-top,
margin-right, margin-bottom, dan margin-left.
5. Layout CSS
Dalam layout CSS, terdapat block, inline-block, dan inline.

 Block: Elemen yang mengisi lebar penuh kontainer, dimulai di baris baru.

 Inline: Elemen yang tidak memulai baris baru, hanya sebesar kontennya.

 Inline-block: Seperti inline, tapi bisa atur lebar dan tinggi.

6. Responsive Design
Media Queries dalam CSS:

 Adaptif: Media queries memungkinkan pembuatan tampilan web yang responsif, menyesuaikan
dengan berbagai ukuran layar dan perangkat.

 Sintaks: Menggunakan sintaks @media untuk menerapkan gaya berbeda berdasarkan kondisi
tertentu seperti lebar layar, resolusi, orientasi, dan lainnya.

 Breakpoints: Menentukan titik pemutus (breakpoints) untuk mengubah tata letak saat
mencapai ukuran layar tertentu.

 Contoh Penggunaan: Misalnya, @media (min-width: 768px) { ... } akan menerapkan gaya hanya
ketika lebar layar minimal 768 piksel.

7. Preprocessor CSS
Preprocessor CSS adalah alat yang memperluas kemampuan CSS dengan menambahkan fitur seperti
variabel, fungsi, dan mixin. Ini memudahkan pengelolaan kode CSS, membuatnya lebih modular dan
efisien. Contoh populer termasuk SASS, LESS, dan Stylus. Mereka memungkinkan penulisan kode yang
lebih canggih dan kemudian mengkompilasinya menjadi CSS standar yang dapat digunakan oleh browser

8. Framework CSS
Framework CSS adalah kumpulan kode CSS yang telah ditulis sebelumnya dan siap digunakan untuk
mempercepat proses pengembangan web.

Framework seperti Bootstrap, Tailwind CSS, dan Foundation adalah beberapa contoh yang populer
digunakan oleh pengembang web.