Pengenalan dasar tentang #CSS 1
Hai Hai kembali lagi dengan saya Query🌸 Disini saya akan memperkenalkan tentang css dasar kuy simak><
Apa itu Css?
CSS adalah singkatan dari Cascading Style Sheets.
- Cascading mengacu pada cara CSS menerapkan satu gaya di atas yang lain.
- Style Sheets mengontrol tampilan dan nuansa dokumen web.
CSS dan HTML bekerja bersama:
- HTML memilah struktur halaman.
- CSS mendefinisikan bagaimana elemen HTML ditampilkan.
Kenapa harus menggunakan Css?
CSS memungkinkan Anda menerapkan gaya khusus ke elemen HTML tertentu.
Manfaat utama CSS adalah memungkinkan Anda memisahkan gaya dari konten.
Dengan hanya menggunakan HTML, semua gaya dan pemformatan berada di tempat yang sama, yang menjadi agak sulit dipertahankan saat halaman bertambah.
MACAM MACAM CSS:
-CSS sebaris
Menggunakan gaya sebaris adalah salah satu cara untuk memasukkan lembar gaya. Dengan gaya inline, gaya unik diterapkan ke elemen tunggal.
Untuk menggunakan gaya sebaris, tambahkan atribut gaya ke tag yang relevan.
Contoh di bawah ini menunjukkan cara membuat paragraf dengan latar belakang abu-abu dan teks putih:
<p style="color:white; background-color:gray;">
This is an example of inline styling.
</p>
-Embedded / Internal CSS Gaya internal didefinisikan dalam elemen <style>, di dalam bagian kepala dari halaman HTML. Sebagai contoh, kode berikut gaya semua paragraf:
<html>
<head>
<style>
p {
color:white;
background-color:gray;
}
</style>
</head>
<body>
<p>7sebunTomodhaci. </p>
<p>ig: qry_riri </p>
</body>
</html>
-CSS eksternal
Dengan metode ini, semua aturan gaya terdapat dalam satu file teks, yang disimpan dengan ekstensi .css.
File CSS ini kemudian direferensikan dalam HTML menggunakan tag <link>. Elemen <link> masuk ke dalam bagian kepala.
Berikut ini sebuah contoh:
Html:
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<p>7sebun Tomodhaci.</p>
<p>ig: query7. </p>
<p>ig: qry_riri. </p>
</body>
Css:
p {
color:white;
background-color:gray;
}
-Penyeleksi Tipe
Selektor yang paling umum dan mudah dipahami adalah selektor tipe. Pemilih ini menargetkan jenis elemen pada halaman.
Misalnya, untuk menargetkan semua paragraf di halaman:
p {
color: red;
font-size:130%;
}
-Selektor id dan kelas
pemilih id memungkinkan Anda untuk menata elemen HTML yang memiliki atribut id, terlepas dari posisinya di pohon dokumen. Berikut ini contoh pemilih id:
Selektor id dan kelas
pemilih id memungkinkan Anda untuk menata elemen HTML yang memiliki atribut id, terlepas dari posisinya di pohon dokumen. Berikut ini contoh pemilih id:
Html:
<div id="intro">
<p> ig: query7.</p>
</div>
<p> ig: qry_riri .</p>
Css:
#intro {
color: white;
background-color: gray;
}
-CSS syntx
CSS terdiri dari aturan gaya yang diinterpretasikan oleh browser dan kemudian berlaku untuk elemen yang sesuai dalam dokumen Anda.
Aturan gaya memiliki tiga bagian: pemilih, properti, dan nilai.
Misalnya, warna judul dapat didefinisikan sebagai:
h1 { color: orange; }
-Selektor Keturunan
Selektor ini digunakan untuk memilih elemen yang merupakan turunan dari elemen lain. Saat memilih level, Anda dapat memilih level sedalam yang Anda butuhkan.
Misalnya, hanya menargetkan elemen <em> di paragraf pertama bagian "intro":
Html:
<div id="intro">
<p class="first">This is a <em> Query><.</em></p>
<p> Query kawaii🌸. </p>
</div>
<p class="first"> 7sebunTomodhaci.</p>
<p> Aku sayang kamu tapi boong. </p>
Css:
#intro .first em {
color: pink;
background-color:gray;
}
KOMENTAR:
Komentar
Komentar digunakan untuk menjelaskan kode Anda, dan dapat membantu Anda ketika Anda mengedit kode sumber nanti. Komentar diabaikan oleh browser.
Komentar CSS terlihat seperti ini:
/* Comment goes here */
Contoh:
p {
color: green;
/* This is a comment */
font-size: 150%;
}
RIAS/Cascade:
Rias
Tampilan akhir halaman web adalah hasil dari berbagai aturan gaya.
Tiga sumber utama informasi gaya yang membentuk kaskade adalah:
- Lembar gaya yang dibuat oleh penulis halaman
- Gaya default browser
- Gaya yang ditentukan oleh pengguna
WARISAN/Inheritance:
Pewarisan mengacu pada cara properti mengalir melalui halaman. Elemen anak biasanya akan mengambil karakteristik elemen induk kecuali ditentukan lain.
Sebagai contoh:
<html>
<head>
<style>
body {
color: green;
font-family: Arial;
}
</style>
</head>
<body>
<p>
QUERY KAWAII🌸.
</p>
</body>
</html>
Komentar
Posting Komentar
Jangan komentar yang aneh aneh ya guys><