Panduan Dasar Menggunakan HTML dan CSS

HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets) adalah dua teknologi dasar yang digunakan untuk membuat dan merancang halaman web. HTML memberikan struktur dasar sebuah halaman web, sementara CSS memberikan tampilan visual seperti warna, font, margin, dan tata letak. Dalam artikel ini, kita akan membahas berbagai aspek penggunaan CSS dalam mengatur tampilan elemen-elemen HTML.

Table of Contents

Apa itu CSS?

CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mengatur tampilan dokumen HTML. CSS memungkinkan Kamu untuk mengontrol warna, font, ukuran teks, jarak antar elemen, dan banyak aspek visual lainnya dari halaman web. Dengan CSS, Kamu bisa memisahkan konten (HTML) dari tampilan visual (CSS), yang membuat pengelolaan dan pembaruan desain lebih mudah.

Menggunakan CSS

Ada tiga cara utama untuk menerapkan CSS ke dalam dokumen HTML: Inline CSS, Internal CSS, dan External CSS. Setiap metode memiliki kelebihan dan kekurangannya sendiri.

Inline CSS

Inline CSS diterapkan langsung pada elemen HTML menggunakan atribut style. Metode ini berguna untuk perubahan tampilan yang spesifik dan kecil, tetapi tidak dianjurkan untuk proyek besar karena sulit diatur.

<p style="color: blue; font-size: 14px;">Ini adalah teks dengan warna biru dan ukuran font 14px.</p>

Hasilnya:

Internal CSS

Internal CSS ditempatkan dalam tag <style> di dalam bagian <head> dokumen HTML. Metode ini memungkinkan Kamu untuk mengatur gaya beberapa elemen di satu halaman web, tetapi tidak dapat digunakan di halaman web lain.

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: green;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>Ini adalah teks dengan warna hijau dan ukuran font 16px.</p>
</body>
</html>

Hasilnya:

External CSS

External CSS adalah cara terbaik untuk mengelola desain di beberapa halaman web. CSS ditulis dalam file terpisah dengan ekstensi .css dan dihubungkan ke dokumen HTML menggunakan tag <link>.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>Ini adalah teks yang akan mengikuti aturan CSS di file eksternal.</p>
</body>
</html>

File styles.css:

p {
    color: red;
    font-size: 18px;
}

Hasilnya:

CSS Colors

CSS memungkinkan Kamu untuk menetapkan warna pada teks, latar belakang, dan elemen lainnya. Warna bisa ditentukan dengan nama warna (seperti red), kode hex (#ff0000), atau nilai RGB (rgb(255, 0, 0)).

p {
    color: navy;
    background-color: lightyellow;
}

hasilnya:

Fonts and Sizes

CSS juga digunakan untuk menentukan jenis font, ukuran, dan properti teks lainnya. Kamu bisa mengatur font melalui properti font-family dan ukuran melalui font-size.

p {
    font-family: 'Arial', sans-serif;
    font-size: 20px;
}

Hasilnya:

CSS Border

Border adalah garis yang mengelilingi elemen HTML. Kamu bisa mengatur ketebalan, jenis garis, dan warna border dengan properti border.

p {
    border: 2px solid black;
}

Hasilnya:

CSS Padding

Padding adalah ruang di dalam border antara border dan konten elemen. Properti padding digunakan untuk mengatur ruang ini.

p {
    padding: 10px;
}

Hasilnya:

CSS Margin

Margin adalah ruang di luar border antara elemen HTML dengan elemen lainnya. Properti margin digunakan untuk mengatur ruang ini.

p {
    margin: 20px;
}

hasilnya:

Link to External CSS

Untuk menghubungkan file CSS eksternal ke dokumen HTML, Kamu harus menggunakan tag <link> di dalam bagian <head> dokumen HTML. Ini adalah contoh cara menghubungkan file CSS eksternal:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Judul Halaman</h1>
    <p>Ini adalah paragraf contoh yang mengikuti aturan dari file CSS eksternal.</p>
</body>
</html>

Kesimpulan

Menggunakan CSS sangat penting untuk membuat halaman web yang menarik dan fungsional. Dengan memahami dan menerapkan metode seperti Inline CSS, Internal CSS, dan External CSS, serta menggunakan properti CSS untuk mengatur warna, font, border, padding, dan margin, Kamu dapat sepenuhnya mengontrol tampilan halaman web Kamu. CSS juga memungkinkan Kamu untuk membuat desain yang konsisten dan mudah dikelola di seluruh halaman web.