Nah, sebelumnya kita sudah mempelajari mengenai konsep dasar dari CSS. Perlu kamu ketahui, bahwa fungsi CSS adalah untuk memberi pewarnaan terhadap sebuah objek.
Baca Juga: Belajar Konsep Dasar CSS: Bahasa Pemrograman Untuk Desain Website
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.
Contents Navigation
Ini Dia 3 Penerapan Pewarnaan CSS
1. Background Color
Nah, di sini kalian bisa mewarnain bagian background dari HTML. Jadi, pewanaannya bisa 1 blok mengikuti objek yang kamu pilih. Dalam pewarnaan ini, kita menggunakan properti background-color.
Baja Juga: Belajar Dasar HTML Untuk Bahasa Programmer Pemula
Contoh:
Ini adalah codingan Html-nya
<!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 akan seperti ini:
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.
