Selamat datang di materi CSS

Apa itu CSS ?

CSS adalah singkatan dari Cascading Style Sheets, yaitu bahasa yang digunakan untuk mendesain dan mengatur tampilan halaman web. CSS memungkinkan pengembang mengontrol tata letak, warna, font, dan elemen visual lainnya secara efisien.

Tujuan dan Manfaat CSS

CSS memiliki manfaat dan di gunakan untuk sebagai berikut :

• Memisahkan Konten dan Desain: Memungkinkan HTML tetap fokus pada struktur, sementara CSS menangani desain visual.
• Pengelolaan yang Mudah: Dengan satu file CSS, Anda dapat mengatur tampilan seluruh situs.
• Responsivitas: Responsivitas: Memungkinkan desain web yang dapat beradaptasi pada berbagai ukuran layar.
• Peningkatan Kinerja: Mengurangi redundansi kode HTML karena gaya dapat diterapkan secara global.

Apa itu Anatomi CSS ?

Anatomi CSS mengacu pada komponen-komponen dasar yang membentuk sebuah aturan CSS. Ini terdiri dari tiga bagian utama: selektor, properti, dan Value. Dengan memahami anatomi CSS, Anda dapat dengan mudah menulis aturan gaya untuk mengubah tampilan elemen-elemen HTML di halaman web.

Struktur Anatomi CSS Dasar

CSS terdiri dari tiga komponen utama: selektor, properti, dan nilai. Berikut penjelasan singkat tentang masing-masing komponen:

• Selektor : bagian dari CSS yang digunakan untuk memilih elemen HTML yang ingin Anda beri gaya (style). Selektor dapat berupa tag HTML, kelas, atau ID.
• Properti : atribut yang ingin Anda ubah pada elemen HTML yang dipilih. Ini mengatur aspek visual elemen tersebut. Contoh properti: color, font-size, margin, padding, border, dll.
• Value : nilai yang diterapkan pada properti untuk memberikan gaya yang diinginkan. Nilai dapat berupa angka, warna, ukuran, atau jenis font.

Apa itu Font Styling dan Text Styling?

Font Styling dan Text Styling dalam CSS adalah teknik untuk mengubah tampilan teks di halaman web. Font Styling mengatur jenis, ukuran, dan gaya font, sedangkan Text Styling mempengaruhi aspek lain seperti warna, jarak antar huruf, dan perataan teks.

Struktur Font Styling dan Text Styling

CSS untuk Font Styling dan Text Styling terdiri dari beberapa properti yang mengatur tampilan dan pengaturan teks di halaman web. Berikut adalah elemen-elemen dasar yang sering digunakan:

• Font Family : Menentukan jenis font yang di gunakan
• Font size menentukan ukuran font yang di gunakan
• Font Weight: Menentukan ketebalan font yang di gunakan
• Font Style: Menentukan Gaya font seperti italic atau normal
• color : Mengatur warna teks.
• Text align : mengatur perataan text (left,rigtht, center)
• Text decoration : Menambahkan dekorasi pada teks seperti garis bawah, garis tengah, atau garis atas.

Apa itu Selector dan Pseudoclass pada CSS ?

Selector dan Pseudoclass adalah bagian dari CSS yang digunakan untuk memilih elemen HTML dan memberikan gaya tertentu berdasarkan kondisi spesifik. Selector digunakan untuk memilih elemen HTML tertentu, sementara Pseudoclass digunakan untuk menargetkan elemen berdasarkan status atau keadaan tertentu yang tidak dapat dipilih langsung dengan selector biasa.

Struktur Selector dan Pseudoclass pada CSS

CSS untuk Selector dan Pseudoclass terdiri dari berbagai jenis selector untuk memilih elemen dan pseudoclass untuk menerapkan gaya berdasarkan kondisi tertentu. Berikut adalah elemen-elemen dasar yang sering digunakan:

• Element Selector : Memilih elemen HTML berdasarkan nama tag-nya.
• Class Selector : Memilih elemen berdasarkan kelasnya. Digunakan dengan tanda titik (.).
• ID Selector : Memilih elemen berdasarkan ID-nya. Digunakan dengan tanda pagar (#).
• Universal Selector : Memilih semua elemen dalam dokumen.
• Descendant Selector : Memilih elemen yang merupakan keturunan dari elemen lain.
• Attribute Selector : Memilih elemen berdasarkan atributnya.

Pseudoclass pada CSS

Pseudoclass memungkinkan Anda menambahkan gaya berdasarkan keadaan atau status elemen. Berikut adalah beberapa pseudoclass yang umum digunakan:

• :hover - Mengubah gaya elemen saat kursor berada di atas elemen tersebut.
• :active - Mengubah gaya elemen saat elemen aktif (misalnya saat diklik).
• :focus - Mengubah gaya elemen saat elemen tersebut mendapatkan fokus (misalnya saat elemen input aktif).
• :nth-child() - Memilih elemen berdasarkan posisi anak dalam sebuah elemen induk.
• :first-child - Memilih elemen pertama di dalam elemen induk.
• :last-child - Memilih elemen terakhir di dalam elemen induk.
• :not() - Memilih elemen yang tidak sesuai dengan selector tertentu.

Apa itu CSS Flexbox ?

CSS Flexbox adalah metode layout yang digunakan untuk mendistribusikan ruang di dalam container dan mengatur elemen-elemen di dalamnya secara lebih fleksibel dan efisien. Flexbox memungkinkan pengaturan elemen dalam satu dimensi (baik secara horisontal maupun vertikal) dengan kontrol yang lebih besar terhadap perataan dan distribusi ruang antar elemen.

Struktur Dasar Flexbox

Flexbox bekerja dengan dua komponen utama: flex container (kontainer fleksibel) dan flex items (elemen fleksibel). Flex container adalah elemen induk yang menggunakan display flex, dan flex items adalah elemen-elemen di dalamnya yang akan diatur oleh flexbox.

• Flex Container : Elemen yang diatur dengan flexbox. Untuk membuat container fleksibel, Anda harus menetapkan properti display: flex;.
• Flex Items : Elemen-elemen di dalam flex container yang diatur menggunakan properti flexbox.

Properti Utama pada Flexbox

Flexbox menyediakan berbagai properti yang membantu dalam pengaturan elemen. Berikut adalah beberapa properti utama yang sering digunakan:

• display: flex; - Menetapkan elemen sebagai flex container.
• flex-direction: Menentukan arah layout flex items dalam flex container. Nilai yang umum digunakan adalah row (default), column, row-reverse, dan column-reverse.
• justify-content: Mengatur perataan elemen-elemen secara horizontal dalam flex container. Nilai yang umum digunakan adalah flex-start, flex-end, center, space-between, dan space-around.
• align-items: Mengatur perataan elemen-elemen secara vertikal dalam flex container. Nilai yang umum digunakan adalah flex-start, flex-end, center, baseline, dan stretch.
• align-self: Mengatur perataan individual elemen dalam flex container, yang menimpa pengaturan align-items pada container.
• flex-wrap: Menentukan apakah flex items akan dibungkus atau tidak dalam beberapa baris (wrap). Nilai yang digunakan adalah nowrap, wrap, dan wrap-reverse.

Contoh Penggunaan Flexbox

Berikut adalah contoh implementasi Flexbox pada sebuah layout sederhana:

                    
/* Menentukan flex container */
.container {
    display: flex;
    justify-content:space-between; 
    /* Menyebar elemen 
    secara merata */

    align-items: center;            
    /* Menyejajarkan elemen 
    secara vertikal */
}

/* Flex item */
.item {
    flex: 1;                        
    /* Membuat elemen fleksibel 
    untuk mengisi ruang */

    padding: 10px;
    background-color: lightblue;
}
                    
                    

Contoh Layout Flexbox

Berikut adalah contoh layout flexbox yang menggunakan flex-direction: column; untuk menata elemen secara vertikal:

                        
/* Menentukan flex container 

flex-direction column */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Flex item */
.item {
    margin: 10px;
    padding: 15px;
    background-color:lightcoral;
}
                        
                    

Dengan menggunakan Flexbox, Anda dapat dengan mudah mengatur layout halaman web, baik secara horizontal maupun vertikal, dan mengontrol distribusi ruang di dalam container.

Sekarang coba latihan membuat navbar menggunakan css flexbox