Series Mahir CSS #1 : Pengenalan CSS

Author Hilya Zea
24 Dec 2024
Series Mahir CSS #1 : Pengenalan CSS

Hai! Gimana kabarnya? Semoga selalu sehat dan semangat ya. Kali ini kita akan mulai perjalanan belajar CSS dari awal banget, biar kamu paham dasarnya. CSS (Cascading Style Sheets) itu apa sih? Secara sederhana, CSS adalah bahasa yang digunakan untuk mendesain tampilan website.

Kalau HTML itu ibarat kerangka tubuh manusia, maka CSS adalah pakaian yang bikin tampilannya keren. Dengan CSS, kamu bisa mengatur warna, font, layout, bahkan animasi!

Contoh Struktur Dasar CSS

CSS bisa digunakan dengan tiga cara utama:

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

Contoh Inline CSS

<p style="color: blue;">Ini teks dengan warna biru!</p>

Contoh Internal CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pengenalan CSS</title>
    <style>
        p {
            color: green;
        }
    </style>
</head>
<body>
    <p>Ini teks dengan warna hijau!</p>
</body>
</html>

Contoh External CSS

File style.css:

p {
    color: red;
}

File index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pengenalan CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Ini teks dengan warna merah!</p>
</body>
</html>

Mudah, kan? Nah, ini baru pengenalan. Kalau sudah siap, kita lanjut ke pembahasan berikutnya ya. Kalau ada yang bingung, langsung tanya aja. ?

 

 

 

 

 

 

Tutorial Terkait Lainnya

Series Mahir CSS #15 : CSS Transition
Series Mahir CSS #15 : CSS Transition

Hai, kembali lagi! Kali ini kita akan belajar tentang CSS Transitions, yaitu cara memberi efek trans...

Baca Tutorial
Series Mahir CSS #16 : Responsive Design
Series Mahir CSS #16 : Responsive Design

Halo lagi! Kali ini kita akan bahas tentang Responsive Design. Ini adalah teknik penting dalam penge...

Baca Tutorial
Series Mahir CSS #10 : List dengan CSS
Series Mahir CSS #10 : List dengan CSS

Hai, teman-teman! Ketemu lagi di tutorial CSS kita. Kali ini kita bakal bahas sesuatu yang sering ba...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!