Belajar CSS Dasar : Mengenal CSS #01
.png)
Apa Itu CSS?
Hai, sudah siap belajar CSS? Nah, sebelum kita mulai ngoding, yuk kenalan dulu dengan CSS! Jadi, CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan gaya halaman web. Ibaratnya, HTML itu struktur tulang-tulangnya, dan CSS adalah baju yang bikin tampilan web kita jadi cantik dan menarik.
Dengan CSS, kamu bisa mengubah warna, ukuran teks, tata letak, dan bahkan membuat animasi di halaman web. Seru, kan?
Cara Menyertakan CSS: Inline, Internal, dan Eksternal
Sekarang, kita masuk ke cara bagaimana CSS ini "menempel" ke halaman HTML. Ada tiga cara, yaitu inline, internal, dan eksternal. Yuk, kita bahas satu-satu biar paham.
1. Inline CSS
Cara ini menulis kode CSS langsung di dalam elemen HTML. Biasanya dipakai kalau kita hanya ingin menambahkan gaya ke satu elemen saja. Cara ini praktis tapi tidak efisien kalau elemen yang ingin kita gaya lebih dari satu.
Contoh code ditandai kotak hijau :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport"" content="width=device-width, initial-scale=1.0">
<title>Inline CSS</title>
</head>
<body>
<h1 style="color: blue;">Ini judul dengan warna biru</h1>
<p style="font-size: 18px;">Paragraf ini menggunakan ukuran font 18px.</p>
</body>
</html>
Hasilnya Di Browser:
Keterangan dari hasil di atas:
- Judul <h1> akan berwarna biru.
- Paragraf <p> akan memiliki ukuran teks 18px.
Poin Penting: Kamu bisa langsung kasih gaya di elemen HTML-nya dengan menambahkan atribut style. Tapi, cara ini kurang disarankan untuk proyek besar karena sulit di-maintain kalau kodenya makin banyak.
2. Internal CSS
Internal CSS adalah cara menulis kode CSS di dalam tag <style> di bagian <head> dokumen HTML. Cara ini efektif jika Anda ingin menambahkan gaya ke satu halaman HTML saja.
Contoh code ditandai kotak hijau :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS</title>
<style>
body {
background-color: lightgray;
}
h1 {
color: darkgreen;
text-align: center;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Selamat Datang di Web CSS!</h1>
<p>Ini adalah paragraf yang telah diberikan gaya menggunakan internal CSS.</p>
</body>
</html>
Hasilnya di browser :
Keterangan dari hasil di atas:
- Latar belakang : halaman jadi abu-abu muda.
- Judul berwarna hijau gelap dan ada di tengah.
- Paragra menggunakan font Arial dengan ukuran teks 16px.
Point Penting: Internal CSS cocok untuk halaman sederhana yang hanya terdiri dari satu halaman HTML. Semua styling ada di satu tempat (di tag <style>), jadi lebih mudah dikelola daripada inline.
3.Eksternal CSS
Nah, ini cara paling populer dan praktis, terutama kalau kamu membuat proyek web yang besar. Kita menulis CSS di file terpisah dengan ekstensi .css, kemudian kita link ke file HTML. Dengan cara ini, satu file CSS bisa digunakan untuk banyak halaman HTML sekaligus. Hemat, kan?
Contoh Code (File HTML) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eksternal CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Selamat Datang di Web CSS Eksternal</h1>
<p>Ini adalah paragraf dengan gaya yang diambil dari file CSS eksternal.</p>
</body>
</html>
Contoh Code (File Style.css) :
body {
background-color: #f0f0f0;
}
h1 {
color: darkblue;
text-align: left;
}
p {
font-family: 'Verdana', sans-serif;
font-size: 18px;
}
Hasilnya di browser :
Keterangan dari Hasilnya:
- Latar belakang halaman jadi abu-abu terang.
- Judul berwarna biru tua dan rata kiri.
- Paragraf menggunakan font Verdana dengan ukuran 18px.
Point Penting: Eksternal CSS adalah cara terbaik untuk proyek web yang besar karena memungkinkan kita memisahkan file HTML dan CSS, sehingga kode lebih terstruktur dan mudah diatur.
Struktur Dasar CSS
Nah, setelah tahu cara-cara menyertakan CSS, sekarang kita lihat struktur dasarnya. CSS terdiri dari tiga bagian utama:
- Selektor: Elemen HTML mana yang ingin kita beri gaya.
- Properti: Apa yang ingin kita ubah (misalnya warna, ukuran, dll).
- Nilai: Nilai spesifik dari properti tersebut.
Contonya seperti ini :
h1 {
color: red;
font-size: 24px;
}
Keterangan dari code di atas:
- Selektor adalah <h1> (kita memilih elemen <h1>).
- Properti adalah color dan font-size.
- Nilai adalah red dan 24px.
Selamat! Kamu telah menyelesaikan tahap pertama pembelajaran CSS. Di sini, kita telah mengenal dasar-dasar CSS, termasuk cara menyertakannya dalam HTML dan struktur dasarnya.
Sekarang, mari kita lanjut ke Tahap 2: Selektor dan Spesifisitas, di mana kita akan membahas berbagai jenis selektor CSS dan bagaimana mengatur spesifisitasnya. Ayo mulai!
LIST BELAJAR CSS DASAR
- BELAJAR CSS DASAR : MENGENAL CSS #01
- BELAJAR CSS DASAR : MENGENAL SELEKTOR DAN SPESIFISITAS #02
Kapan dilanjut kan tutorial ini min
ReplyDeleteMantap
ReplyDelete