Home  >  HTML/CSS

Mengenal CSS: Dasar-dasar Styling

Setelah memahami dasar struktur HTML, langkah berikutnya dalam membangun sebuah website adalah memahami CSS (Cascading Style Sheets). CSS digunakan untuk mengatur tampilan elemen HTML agar lebih menarik dan sesuai dengan desain yang diinginkan. Artikel ini akan membahas dasar-dasar CSS, termasuk cara penggunaan, selector, properti dasar, dan contoh implementasi.

Apa Itu CSS?

Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mendesain tampilan halaman web. Dengan CSS, kita dapat mengubah warna, ukuran font, tata letak, dan berbagai aspek visual lainnya.

Cara Menyisipkan CSS

Terdapat tiga cara untuk menambahkan CSS ke dalam HTML:

  1. Inline CSS (langsung pada elemen HTML)
  2. Internal CSS (menggunakan tag <style> di dalam <head>)
  3. External CSS (menggunakan file terpisah dengan ekstensi .css)

1. Inline CSS

Inline CSS diterapkan langsung pada elemen HTML menggunakan atribut style.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Inline CSS</title>
</head>
<body>
    <p style="color: blue; font-size: 20px;">Ini adalah teks dengan inline CSS.</p>
</body>
</html>

2. Internal CSS

Internal CSS diletakkan di dalam tag <style> dalam bagian <head> HTML.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Internal CSS</title>
    <style>
        p {
            color: red;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p>Ini adalah teks dengan internal CSS.</p>
</body>
</html>

3. External CSS

External CSS menggunakan file .css terpisah yang dihubungkan dengan elemen <link> dalam <head>.

File HTML:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>Ini adalah teks dengan external CSS.</p>
</body>
</html>

File CSS (styles.css):

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

Selector Dasar dalam CSS

CSS menggunakan berbagai selector untuk memilih elemen HTML yang ingin diberi gaya:

  • Selector Elemen: Memilih semua elemen dengan nama tertentu (contoh: p untuk semua paragraf)
  • Selector ID (#id): Memilih elemen dengan ID tertentu
  • Selector Kelas (.class): Memilih elemen dengan kelas tertentu

Contoh penggunaan:

h1 {
    color: blue;
}

#judul-utama {
    font-size: 30px;
    text-align: center;
}

.paragraf-khusus {
    font-weight: bold;
    background-color: yellow;
}

Categories:HTML/CSS

Tags:

Related Posts