Responsive Advertisement

Selector, Property dan Value CSS

judul

Pada pembahasan ini, kita akan lebih membahas tentanng selector, property, dan value pada CSS yang sebelumnya pada Belajar Basic CSS sudah dijelaskan beberapa tentang hal tersebut. Akan tetapi, penggunaan tersebut mempunyai banyak pembahasan yang akan dijelaskan pada tutorial ini.

Jika sebelumnya selector, property, dan value digunakan untuk hal tersebut.
head{
width: 1280px;
height: 300px;
color: blue;
}

Kali ini, penulisan tersebut dapat kamu kelompokan. Tetapi, kamu harus membutuhkan kodingan HTML terlebih dahulu untuk mengelompokannya. Contoh kodingan dapat kamu lihat dibawah ini.

<html lang="en-us">
<head>
 <title>Contoh Menarik</title>
 <link rel="stylesheet" type="text/css" href="cssku.css">
</head>
<body>
 <h1>Aku sebuah apel</h1>
 <p>Aku adalah apel. Aku berwarna merah dan terkadang hijau.</p>
 <h2>Aku sebuah pisang</h2>
 <p>Aku adalah pisang. Aku berwarna kuning.</p>
</body>
<footer>
 <p>Aku adalah footer</p>
</footer>
</html>

Jika kamu sudah membuat kodingan seperti diatas, kamu hanya harus membuat CSS untuk menambahkan warna dan sebagainya. Tetapi, kamu juga harus memakai pemanggilan yang benar untuk memanggil CSS tersebut. Kodingan di atas memakai cssku.css pada atribut href=”cssku.css” Contoh kodingan dapat kamu lihat dibawah ini.

body{
width: 500px;
}

h1, h2{
background-color: #0066ff;
color: black;
}

p{
background-color: black;
color: blue;
height: 120px;
}

footer{
background-color: black;
}

Coba kamu lihat perbedaan pada CSS, terdapat dua tag dalam satu selector. Pemanggilan dua tag tersebut dapat kamu lakukan ketika hal tersebut ingin kamu pakai pada property yang sama.  Kamu dapat mencobanya dengan copy kodingan diatas lalu paste ke dalam text editor.

Tag dan Atribut Dalam HTML #5

Terima kasih sudah berkunjung sekaligus belajar memahami CSS. Kamu dapat menemukan pembahasan atau tutorial lainnya pada blog ini mengenai CSS maupun HTML.