PROJECT 2
CSS
CSS atau Casscading Style Sheets,Secara bahasa berarti lembaran gaya yang mengalir ke bawah. merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemrogramantetapi css dipakai untuk mempercantik tampilan pada website.
Dengan CSS, Anda dapat mengatur tampilan semua aspek pada file yang berbeda, lalu menentukan style, kemudian mengintegrasikan file CSS di atas markup HTML. Alhasil, markup HTML bisa lebih mudah di-maintain.
*Struktur dasar CSS
1. Selector, nama nama untuk style yang berbeda.
2. Property, atribut style external atau elemen yang mendefinisikan style CSS
3. Value, nilai dri sebuah property.
*Macam Macam CSS
1. Internal style sheet
kode CSS di pasang di dalam tag <head> HTML, style ini sering di gunakan oleh para web desainer untuk mengatur laman web untuk menjadi tampilan lebih menarik.Tetapi kendala untuk internal style sheet yaitu load pada setiap me-refresh website dan waktu loading yang semakin lama.
2. Inline style sheet
kode CSS di pasang pada tag HTML dengan tag <style>.
3. External style sheet
kode CSS di ketik di file yang berbeda. Semua kode CSS di simpan dan di lakukan secara terpisan dalam file .css. CSS external style sheet menggunakan tag <link rel>, dimana tag yang menghubungkan halaman coding pada external style yang terpisah.
*Type Selector
Selektor akan memilih elemen berdasarkan tag.
contoh:
p {
color: blue;
}
yang artinya semua elemen <p> di atur warna teks nya menjadi biru.
*Selector Class
memilih elemen berdasarkan nama class yang di berikan. class selector di buat dengan tanda titik di depannya.
contoh:
.pink {
color:white;
background:pink;
padding:10px;
}
artinya selector class bernama .pink. menggunakan selektor ini adalah dengan menambah atribut class di dalamnya.
contoh:
<p> saya sedang belajar CSS <b class="red">HTML</b> </p>
maka hasilnya akan
saya sedang belajar CSS HTML
*Selector ID
bedanya pada selector class, selector ID bersifat unik, hanya boleh di gunakan pada satu elemen saja. Selector ID di tandai dengan tanda pagar (#)
contoh:
#header {
background:teal;
color:white;
height:100px;
padding:50px;
}
lalu pada kode HTML
<header id="header">
<h1> contoh header </h1>
</header>
*Child Selector
selector keturunan dimana penulisannya harus berurutan sesuai tingkatannya. tdak berlaku untuk keturunan kedua dan seterusnya
contoh:
*Descendant selector
penulisannya harus berurut sesuai tingkatannya, tetapi descendant berlaku untuk semua keturunannya.(seperti ibu, anak,cucu)
contoh:
<!DOCTYPE HTML>
<html>
<head>
<title> judul </title>
<style>
p strong a {color:blue;}
</head>
<body>
<p>
<strong>
<a href="#"> link </a>
</strong>
</p>
</body>
</html>
Komentar
Posting Komentar