Scribd
Unggah
4 tayangan2 halaman

Modul CSS Dasar

Modul ini menjelaskan dasar-dasar CSS, termasuk jenis-jenis selector, box model, dan properti display untuk layout. Selain itu, dibahas juga responsive design menggunakan media queries dan beberapa framework CSS populer seperti Bootstrap dan Tailwind CSS. Proyek kecil di akhir modul mengajak pembaca untuk menerapkan pengetahuan CSS dalam styling portofolio HTML.

Diunggah oleh

iansofiansyah
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
4 tayangan2 halaman

Modul CSS Dasar

Modul ini menjelaskan dasar-dasar CSS, termasuk jenis-jenis selector, box model, dan properti display untuk layout. Selain itu, dibahas juga responsive design menggunakan media queries dan beberapa framework CSS populer seperti Bootstrap dan Tailwind CSS. Proyek kecil di akhir modul mengajak pembaca untuk menerapkan pengetahuan CSS dalam styling portofolio HTML.

Diunggah oleh

iansofiansyah
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 2

Modul Pembelajaran CSS Dasar

1. Selectors
Selectors digunakan untuk memilih elemen HTML yang akan diberikan gaya. Jenis-jenis
selector meliputi:

- Tag selector: memilih berdasarkan nama tag, contoh: `p`, `h1`.

- Class selector: menggunakan tanda titik (`.`), contoh: `.container`.

- ID selector: menggunakan tanda pagar (`#`), contoh: `#header`.

- Attribute selector: memilih berdasarkan atribut, contoh: `input[type="text"]`.

- Pseudo-classes: memilih berdasarkan keadaan, contoh: `a:hover`, `input:focus`.

- Pseudo-elements: memilih bagian dari elemen, contoh: `p::first-line`, `::before`, `::after`.

2. Box Model
Box model adalah cara CSS memodelkan elemen sebagai kotak yang terdiri dari:

- Content: isi elemen.

- Padding: ruang di sekitar konten.

- Border: garis di sekitar padding.

- Margin: ruang di luar border.

3. Layout dengan Display Properties


Properti display digunakan untuk mengatur bagaimana elemen ditampilkan:

- `block`: elemen mengambil seluruh lebar baris.

- `inline`: elemen berada dalam satu baris tanpa lebar penuh.

- `inline-block`: seperti inline tapi bisa diatur ukuran.

- `flex`: menggunakan Flexbox untuk layout fleksibel.

- `grid`: menggunakan Grid untuk layout dua dimensi.


4. Responsive Design dengan Media Queries
Media queries memungkinkan desain berubah berdasarkan ukuran layar:

Contoh:

@media (max-width: 600px) {


body {
background-color: lightblue;
}
}

5. Framework CSS Populer


Framework CSS membantu mempercepat pengembangan dan menerapkan praktik terbaik.
Contoh populer:

- Bootstrap: menyediakan komponen siap pakai dan sistem grid.

- Tailwind CSS: utility-first framework untuk styling cepat.

6. Proyek Kecil: Styling Portofolio HTML


Lanjutkan proyek HTML sebelumnya dengan menambahkan styling menggunakan CSS.
Gunakan Flexbox atau Grid untuk layout, media queries untuk responsivitas, dan
framework seperti Bootstrap untuk komponen tambahan.

Contoh gaya sederhana:

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}

Anda mungkin juga menyukai