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 #2 : Penulisan CSS
Series Mahir CSS #2 : Penulisan CSS

Hai, hai! Gimana nih, sudah siap belajar lebih jauh tentang CSS? Kali ini kita bakal bahas cara penu...

Baca Tutorial
Series Mahir CSS #18 : Box Model
Series Mahir CSS #18 : Box Model

Hai, bagaimana kabarnya? Kali ini kita akan membahas tentang CSS Box Model, yang merupakan konsep da...

Baca Tutorial
Series Mahir CSS #13 : CSS Grid – Layout yang Lebih Terstruktur
Series Mahir CSS #13 : CSS Grid – Layout yang Lebih Terstruktur

Hai teman-teman! Kali ini kita akan membahas salah satu fitur layout yang lebih powerful dan fleksib...

Baca Tutorial

Comments

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