Buat Apa Sih CSS? Ini Dia 3 Penerapan Pewarnaan CSS

Pewarnaan Css Min

Nah, sebelumnya kita sudah memperlajari 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

Background Css Min

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.

Text Color Css Min

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.

Border Css Min (1)

Ayo mulai berdiksusi