ASSALAMUALAIKUM PREEEEEEEEEEEN!!!!!!!!!
lagi lagi aku dapat tugas dari pak haris, tentang STYLING WITH CSS ,jadi yuk kita bahas pakai bahasa aku.
Nah pertama aku ingetin dulu ya
apa itu CSS : untuk mengatur tampilan / menghias / gaya di web
nah sekrang kita bulai bahas!!!!!
1.gimana sih caranya ubah warna teks, latar belakang, dan penulisan warna di CSS ?:
- MENGUBAH WARNA TEKS –> gambarannya p { color: red; },<p> ini itu fungsinya mengubah teks yang akan di ubah warna nya , setelah itu kalian lihat kan ada tulisan ” color:”,nah kalian tinggal isi aja nama warna yg kalian mau.
- MENGUBAH LATAR BELAKANG –> ini gambaran nya body { background-color: lightblue; },nah langsung ke intinya ,pokok nya latar belakang nya akan berubah warna yang sudah di tentukan
1.PENULISAN WARNA –> Ccontoh nama warnanya red berarti nama kode hex nya( #ff0000 ) ,nah contohnya udah nah sekarang aku kasih dartar namanya ya , (#ff0000 (merah), #0000ff (biru), #ffffff (putih).).nah terus ada kode GRB ,kalau itu pakai kombinasi angka dari 0 sampai 255.
2. gimana sih cara hubungin HTML ke CSS ? nah CSS juga harus kita hubungkan ke HTML / HTML HUBUNGKAN ke CSS,
- SYARAT UTAMA : harus punya 2 file di dalam 1 folder yg sama >
index.html(File dokumen HTML kamu) >style.css(File kode CSS kamu)
- KODE YG MENHUBUNGKNA NYA :Gunakan kode
<link>di dalam bagian<head>pada file HTML.Contoh diindex.html:
HTML
<!DOCTYPE html> <html> <head> <!– Baris ini yang menghubungkan ke file CSS –> <link rel=”stylesheet” href=”style.css”> </head> <body> <h1>Judul Halaman</h1> <p>Ini adalah paragraf contoh.</p> </body> </html>
- PENJELASAN TAG < link > :
rel="stylesheet": Memberi tahu browser bahwa file yang dipanggil adalah lembar gaya (stylesheet).
>
rel="stylesheet": Memberi tahu browser bahwa file yang dipanggil adalah lembar gaya (stylesheet).
>href="style.css": Menunjuk nama file CSS yang mau dihubungkan.
>Jika nama file CSS kamu adalah gaya.css, maka ganti menjadi href="gaya.css".
>Jika file CSS ditaruh di dalam folder khusus (misal folder css), kodenya menjadi href="css/style.css"
- CONTOH ISI FILE style.css
:di dalam .css, kalian cukup tulis kodenya langsung tanpa perlu tag HTML:
CSS
body {
background-color: lightgray;
}
h1 {
color: blue;
}
p {
color: black;
}
Sekarang, saat file index.html dibuka di browser, semua tampilan dan warnanya otomatis mengikuti aturan yang ada di style.css.
3.GIMANA CARA UBAH UKURAN TEKS?
- CARA PENULISAN DASAR:Kamu tinggal menentukan elemen mana yang ingin diubah ukurannya, lalu isi nilai
font-size-nya.
CSS
p {
font-size: 18px;
}
Artinya: Semua teks di dalam paragraf (<p>) akan berukuran 18 piksel.
SATUAN UKURAN YG SERING TERPAKAI:Ada beberapa satuan yang bisa kamu gunakan untuk menentukan ukuran teks:
>Piksel (px): Satuan paling umum dan nilainya tetap (paling mudah dipahami untuk pemula).
>Contoh: font-size: 14px; (teks kecil) atau font-size: 32px; (teks judul besar).
>Persen (%) / em / rem: Satuan relatif yang bisa menyesuaikan ukuran teks bawaan browser.
>Contoh: font-size: 150%; atau font-size: 1.5rem; (artinya ukuran teks 1,5 kali lebih besar dari ukuran standar).
Contoh Penggunaan Lengkap
Misalnya kamu mau membuat judul artikel yang besar dan isi paragraf dengan ukuran standar:
CSS
h1 { font-size: 28px; color: navy; } p { font-size: 16px; color: black; }
nah gitu yak ,udahan dulu yak sa ya udah ngantuk babay preeeeeen
