Nah, sebelumnya kita sudah mempelajari mengenai konsep dasar dari CSS. Perlu diketahui, bahwa fungsi CSS adalah untuk memberi pewarnaan terhadap sebuah objek.
Nah, sebenarnya apa aja sih yang bisa kita warnain dengan pewarnaan CSS. Ada 3 objek yang bisa kita warnain dengan CSS yaitu, Background, Text dan Border.
Ini Dia 3 Penerapan Pewarnaan CSS
1. Background Color
Nah, disini kalian bisa mewarnain bagian background dari HTML. Jadi, pewanaannya bisa 1 blok mengikuti objek yang dipilih. Dalam pewarnaan ini, kita menggunakan properti background-color.
Contoh:
Ini codingan Htmlnya
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title> Background Color </title>
</head>
<body>
<h1> Dafunda </h1>
<p> Dafunda.com adalah Media Geek dan Pop-Culture Indonesia, situs yang membahas tentang budaya kreatif paling populer di seluruh dunia. Kami membahas apapun yang berhubungan dengan Game, Film, TV, Gadget, Cosplay, dan Budaya Geek populer lainnya. </p>
</body>
</html>Ini codingan CSS-nya
h1{
background-color: red;
}
p{
background-color: blue;
}Hasilnya di browser
2. Text Color
Nah, selain untuk melakukan pewarnaan terhadap background. CSS juga dapat digunakan dalam pewarnaan text. Untuk properti yang digunakan adalah color.
Contoh:
Codingan Htmlnya sama seperti yang nomor 1. Jadi, kita langsung menuju codingan CSS saja.
h1{
color: red;
}
p{
color: blue;
}Hasilnya di browser akan terlihat seperti ini.
3. Border Color
Nah, yang terakhir ada border color. Jadi, nantinya CSS ini dapat memberikan pewarnaan border sesuai dengan text yang dikelilinginya (garis outline). Properti yang dipakai dalam border color adalah border-color.
Namun dalam border ini, dia juga perlu properti pelengkap. Yaitu properti border-width untuk menentukan lebar border dan border-style untuk menentukan jenis border.
Contoh dengan kode html yang sama dengan nomor 1. Jadi, langsung saja kita ke kode CSS nya saja.
h1{
border-color: red;
border-width: 10px;
border-style: solid;
}
p{
border-color: blue;
border-width: 10px;
border-style: solid;
}
Nah, hasil di browser nantinya akan seperti ini.
