Scribd
Unggah
9 tayangan2 halaman

Materi CSS

Diunggah oleh

fhrzzz122
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
9 tayangan2 halaman

Materi CSS

Diunggah oleh

fhrzzz122
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

Materi CSS

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendesain dan mengatur
tampilan halaman HTML. CSS memungkinkan kita untuk mengontrol tata letak, warna, font,
dan berbagai aspek desain lainnya dari elemen HTML tanpa mengubah struktur HTML itu
sendiri. CSS membantu memisahkan konten dari presentasi, membuat website lebih mudah
dikelola dan lebih fleksibel.

1. Struktur Dasar CSS


CSS dapat ditulis dalam tiga cara:
- Inline CSS: Ditulis langsung dalam atribut style pada tag HTML.
- Internal CSS: Ditulis dalam tag <style> di dalam bagian <head> dari halaman HTML.
- External CSS: Ditulis dalam file terpisah dengan ekstensi .css dan ditautkan ke halaman
HTML menggunakan tag <link>.

2. Selektor CSS
Selektor digunakan untuk memilih elemen HTML yang akan diberi style.

- Selektor Elemen (Tag): Menargetkan semua elemen dari tipe tertentu.


- Selektor ID: Menargetkan elemen dengan atribut id tertentu. ID harus unik dalam satu
halaman.
- Selektor Kelas (Class): Menargetkan elemen yang memiliki atribut class tertentu. Kelas
dapat digunakan berulang kali dalam satu halaman.
- Selektor Atribut: Menargetkan elemen berdasarkan atribut tertentu.

3. Properti CSS Dasar


- Warna: color, background-color
- Font dan Teks: font-family, font-size, font-weight, text-align
- Tata Letak (Layout): width, height, margin, padding, border
- Posisi dan Tampilan: position, display, float, clear

4. CSS Flexbox
Flexbox adalah model layout yang memungkinkan kita untuk membuat desain yang
responsif dan fleksibel. Ini sangat berguna untuk mengatur elemen dalam baris atau kolom.

5. CSS Grid
Grid adalah sistem layout dua dimensi yang memungkinkan penataan elemen dalam baris
dan kolom secara lebih kompleks.

6. Animasi dan Transisi


CSS memungkinkan kita untuk menambahkan animasi dan transisi untuk efek interaktif.
- Transisi: Mengubah properti elemen dengan efek yang halus.
- Animasi: Membuat perubahan berulang pada elemen.

7. Media Queries
Media queries digunakan untuk membuat desain responsif yang menyesuaikan tampilan
halaman berdasarkan ukuran layar perangkat.

8. Pseudo-Classes dan Pseudo-Elements


- Pseudo-Classes: :hover, :focus, :active, :first-child
- Pseudo-Elements: ::before, ::after, ::first-letter

9. CSS Variables
CSS variables memungkinkan kita untuk mendefinisikan nilai yang bisa digunakan kembali
di seluruh file CSS.

Anda mungkin juga menyukai