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.

ARTIKEL TERKAIT
Ingin Jadi Web Developer? Tapi Mulai Belajar Bahasa Pemrograman yang Mana Dulu?

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)


Suka? Ayo Bagikan konten ini Ke teman agar makin Seru!

0 Komentar

Bagaimana perasaan kamu setelah membaca konten ini?

Ngakak Ngakak
0
Ngakak
Bingung Bingung
0
Bingung
Takjub Takjub
0
Takjub
Suka Suka
0
Suka
Marah
0
Marah
Sedih
0
Sedih
channabeck

Editor in Chief di Dafunda Tekno. Mahasiswa yang sedang tertatih mengembangkan bisnis startup.

Mau Berbagi Apa Hari ini?
Artikel
Konten Original dari Kamu atau Berita Seputar Geek dan Pop-culture
Daftar / List
Daftar atau List Klasik yang Sering kamu temukan di dunia maya
Peringkat
List Peringkat yang Bisa di Upvote atau Downvote oleh Komunitas untuk menentukan Urutan Terbaik