Scribd
Unggah
2 tayangan7 halaman

Modul CSS

Dokumen ini adalah modul tentang Tailwind CSS yang mencakup pengenalan CSS, selektor, properti warna dan teks, box model, layouting, animasi, dan desain responsif. Setiap modul menjelaskan konsep dasar dan teknik yang diperlukan untuk mengatur tampilan dokumen HTML secara efektif. Terdapat juga penekanan pada penggunaan media query dan pendekatan mobile-first dalam desain.

Diunggah oleh

septemberfoundation2022
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 PDF, TXT atau baca online di Scribd
2 tayangan7 halaman

Modul CSS

Dokumen ini adalah modul tentang Tailwind CSS yang mencakup pengenalan CSS, selektor, properti warna dan teks, box model, layouting, animasi, dan desain responsif. Setiap modul menjelaskan konsep dasar dan teknik yang diperlukan untuk mengatur tampilan dokumen HTML secara efektif. Terdapat juga penekanan pada penggunaan media query dan pendekatan mobile-first dalam desain.

Diunggah oleh

septemberfoundation2022
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 PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 7

Modul Tailwind CSS

Modul 1: Pengenalan CSS

- CSS (Cascading Style Sheets) adalah bahasa desain untuk mengatur tampilan dokumen HTML.

- Kelebihan CSS:

- Memisahkan konten dan desain

- Styling konsisten di banyak halaman

- Cara penggunaan:

- Inline CSS

- Internal CSS

- External CSS
Modul Tailwind CSS

Modul 2: Selektor CSS

- Selektor menentukan elemen mana yang akan diberi style.

- Jenis selektor:

- Selektor Elemen: h1 { color: blue; }

- Selektor Class: .menu { font-size: 14px; }

- Selektor ID: #header { padding: 20px; }

- Selektor Universal: * { margin: 0; }


Modul Tailwind CSS

Modul 3: Properti Warna dan Teks

- Warna:

- color: untuk teks

- background-color: untuk latar belakang

- Properti Teks:

- font-size

- font-weight

- text-align

- line-height
Modul Tailwind CSS

Modul 4: Box Model

- Setiap elemen HTML adalah box yang terdiri dari:

- Content

- Padding

- Border

- Margin

- Properti:

- width, height

- padding

- border

- margin
Modul Tailwind CSS

Modul 5: Layouting dengan CSS

- Display:

- block, inline, inline-block

- Position:

- static, relative, absolute, fixed, sticky

- Flexbox:

- display: flex

- justify-content, align-items

- Grid:

- display: grid

- grid-template-columns
Modul Tailwind CSS

Modul 6: Animasi dan Transisi

- Transition:

transition: property duration ease;

- Animasi:

@keyframes animasi {

from { opacity: 0; }

to { opacity: 1; }

- Animation properties:

- animation-name

- animation-duration
Modul Tailwind CSS

Modul 7: Responsive Design

- Media Query:

@media (max-width: 768px) {

body { background: lightgray; }

- Mobile-first approach

- Unit fleksibel: %, vh, vw, em, rem

Anda mungkin juga menyukai