Adifahram

Kategori: Laravel

Materi Dasar CSS

Dipublikasikan pada 2025-05-17 10:06:11

Gambar

Materi Dasar CSS

1. Apa Itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan desain halaman web yang dibuat dengan HTML. Jika HTML adalah kerangka dari sebuah rumah, maka CSS adalah cat dan dekorasi yang membuat rumah tersebut lebih menarik.

Dengan CSS, kita bisa:

  • Mengubah warna teks dan latar belakang
  • Mengatur ukuran dan jenis font
  • Mengatur posisi elemen di halaman
  • Membuat animasi dan efek interaktif

Tanpa CSS, halaman web akan terlihat polos dan kurang menarik.

2. Cara Menggunakan CSS di HTML

Ada tiga cara utama untuk menambahkan CSS ke dalam HTML:

a. Inline CSS (Di dalam Tag HTML)

CSS ditulis langsung di dalam elemen HTML menggunakan atribut style.

<p style="color: blue; font-size: 20px;">Teks ini berwarna biru dan berukuran 20px.</p>
  • Kelebihan: Mudah digunakan untuk perubahan cepat.
  • Kekurangan: Tidak efisien untuk halaman yang besar karena harus menulis CSS di setiap elemen.

b. Internal CSS (Di dalam <style> dalam HTML)

Menulis CSS di dalam bagian <head> dari HTML menggunakan tag <style>.

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>Teks ini berwarna merah dan berukuran 18px.</p>
</body>
</html>
  • Kelebihan: Bisa digunakan untuk mengatur beberapa elemen dalam satu halaman.
  • Kekurangan: Tidak bisa digunakan untuk banyak halaman sekaligus.

c. External CSS (File Terpisah)

CSS ditulis dalam file terpisah dengan ekstensi .css, lalu dipanggil dalam HTML dengan <link>.

File CSS (style.css):

p {
    color: green;
    font-size: 16px;
}

File HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Teks ini berwarna hijau dan berukuran 16px.</p>
</body>
</html>
  • Kelebihan: Bisa digunakan di banyak halaman sekaligus, lebih rapi dan terorganisir.
  • Kekurangan: Membutuhkan file tambahan.

3. Selektor dalam CSS

Selektor digunakan untuk memilih elemen HTML yang akan diberi gaya.

a. Selektor Elemen

Menargetkan elemen berdasarkan nama tag HTML.

h1 {
    color: blue;
}

Ini akan mengubah semua <h1> menjadi warna biru.

b. Selektor Kelas (.)

Menargetkan elemen dengan atribut class tertentu.

<p class="highlight">Teks ini spesial.</p>

.highlight {
    color: orange;
    font-weight: bold;
}

Hanya elemen dengan class="highlight" yang akan berubah.

c. Selektor ID (#)

Menargetkan elemen dengan atribut id unik.

<p id="special">Teks ini unik.</p>

#special {
    color: purple;
    font-size: 24px;
}
  • Gunakan id hanya untuk satu elemen unik di halaman.
  • Gunakan class jika ingin mengatur banyak elemen sekaligus.

4. Properti Dasar CSS

a. Warna dan Latar Belakang

body {
    background-color: lightgray; /* Warna latar belakang */
}

p {
    color: navy; /* Warna teks */
}

Warna bisa ditulis dengan:

  • Nama warna (red, blue, green)
  • Kode heksadesimal (#ff0000 untuk merah)
  • RGB (rgb(255, 0, 0)) atau HSL (hsl(0, 100%, 50%))

b. Teks dan Font

p {
    font-size: 20px; /* Ukuran teks */
    font-family: Arial, sans-serif; /* Jenis font */
    font-weight: bold; /* Ketebalan teks */
    text-align: center; /* Posisi teks */
}

c. Padding dan Margin

  • Padding: Ruang dalam elemen
  • Margin: Ruang luar elemen
div {
    padding: 20px; /* Ruang di dalam kotak */
    margin: 10px; /* Ruang di luar kotak */
    border: 1px solid black; /* Garis tepi */
}

d. Border (Garis Tepi)

div {
    border: 2px dashed red;
}

Border bisa berupa solid, dashed, atau dotted.

5. Layout dengan CSS

a. Display

  • block → Elemen mengambil seluruh lebar
  • inline → Elemen hanya mengambil lebar sesuai kontennya
span {
    display: block;
}

b. Positioning

  • static → Posisi default
  • relative → Bergerak relatif terhadap posisi awal
  • absolute → Posisi relatif terhadap elemen induk
  • fixed → Tetap di posisi meskipun halaman di-scroll
div {
    position: absolute;
    top: 50px;
    left: 20px;
}

c. Flexbox (Tata Letak Fleksibel)

Membantu mengatur elemen secara responsif.

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

6. Responsif dengan Media Query

Agar tampilan menyesuaikan ukuran layar.

@media (max-width: 600px) {
    body {
        background-color: yellow;
    }
}

Jika lebar layar kurang dari 600px, latar belakang akan menjadi kuning.

7. Animasi dengan CSS

@keyframes warnaBerubah {
    from { background-color: red; }
    to { background-color: blue; }
}

.box {
    width: 100px;
    height: 100px;
    animation: warnaBerubah 2s infinite alternate;
}

Elemen .box akan berganti warna dari merah ke biru terus-menerus.

8. Kesimpulan

CSS adalah kunci untuk membuat halaman web terlihat menarik dan profesional. Dengan memahami dasar-dasar CSS, kamu bisa mulai mendesain halaman web sendiri. Langkah berikutnya adalah memperdalam CSS dengan grid, animasi, dan teknik lanjutan lainnya!


← Kembali ke daftar blog