Skip to content Skip to sidebar Skip to footer
Home / css

Mempercantik Halaman dengan CSS – Dasar-Dasar CSS yang Perlu Kamu Pelajari

Post a Comment



Setelah mempelajari struktur dasar HTML, sekarang saatnya kita berkenalan dengan CSS (Cascading Style Sheets). CSS adalah bahasa yang digunakan untuk mengatur tampilan halaman web. Dengan CSS, kamu bisa mengubah warna, tata letak, dan desain keseluruhan halaman HTML.

Pada artikel ini, kita akan mempelajari dasar-dasar CSS yang akan membantu kamu mempercantik halaman web pertama kamu!




1. Apa Itu CSS?

CSS, atau Cascading Style Sheets, adalah bahasa yang digunakan untuk mengontrol tampilan dan tata letak elemen di halaman web. Dengan CSS, kita bisa menentukan gaya, warna, ukuran, margin, dan elemen visual lainnya.




2. Cara Menyisipkan CSS ke dalam HTML

Ada tiga cara untuk menambahkan CSS pada HTML:

Inline CSS: Langsung menambahkan gaya pada elemen HTML.

<p style="color: blue;">Ini teks berwarna biru</p>

Internal CSS: Menulis CSS di dalam tag <style> pada bagian <head> di file HTML.

<style>
    p { color: blue; }
</style>

External CSS: Menyimpan kode CSS dalam file terpisah dengan ekstensi .css. Contoh:

/* style.css */
p {
    color: blue;
}

Di file HTML, kita link file CSS ini:

<link rel="stylesheet" href="style.css">





3. Memahami Selektor CSS

Selektor adalah cara untuk memilih elemen tertentu di HTML dan memberi gaya padanya. Berikut beberapa selektor dasar:

Selektor Tag: Menerapkan gaya pada semua elemen dengan tag tertentu.

p { color: green; }

Selektor Kelas (.class): Menerapkan gaya pada elemen dengan kelas tertentu.

.teks-merah { color: red; }

Selektor ID (#id): Menerapkan gaya pada elemen dengan ID tertentu.

#judul { font-size: 24px; }





4. Sifat-Sifat CSS yang Sering Digunakan

Berikut adalah beberapa sifat dasar CSS yang sering dipakai:

Warna (color): Mengubah warna teks.

p { color: blue; }

Latar Belakang (background-color): Mengatur warna latar belakang.

body { background-color: lightgrey; }

Ukuran Font (font-size): Mengatur ukuran teks.

h1 { font-size: 32px; }

Padding dan Margin: Memberi jarak dalam dan luar elemen.

p { padding: 10px; margin: 15px; }





5. Contoh Kode CSS Sederhana

Berikut adalah contoh sederhana dari kode HTML dan CSS yang akan mengubah tampilan halaman:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        p {
            color: #666;
            font-size: 18px;
            padding: 10px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>Belajar CSS Dasar</h1>
    <p>Dengan CSS, kita bisa mempercantik tampilan halaman HTML.</p>
</body>
</html>

Coba salin kode di atas ke code playground yang kita buat di artikel pertama, dan lihat bagaimana perubahan sederhana pada CSS dapat memengaruhi tampilan halaman.




Kesimpulan
CSS adalah cara yang efektif untuk mempercantik dan memperbaiki tampilan halaman web. Dengan memahami dasar-dasar CSS, kamu bisa mengubah elemen dasar HTML menjadi halaman yang menarik. Pada artikel selanjutnya, kita akan melangkah lebih dalam dengan mempelajari tata letak atau layout di CSS!




Selamat belajar, dan sampai jumpa di artikel berikutnya!


Post a Comment for "Mempercantik Halaman dengan CSS – Dasar-Dasar CSS yang Perlu Kamu Pelajari"