Tiga Cara Penulisan Kode CSS di HTML

Selamat datang di tutorial tutorial pemrorgraman website di dumet school. Kali ini saya akan menjelaskan Tiga Cara Penulisan Kode CSS di HTML, Dalam pembuatan website tentunya kita tak bisa lepas dengan CSS, karena fungsi dari CSS ini adalah menghias Website kita menjadi lebih bagus dan lebih indah di lihat :P. Lalu bagaimana cara pemasangannya atau nyambunginnya dengan HTML, berikut penjelasannya.

Cara pertama adalah Inline Stylesheet, cara ini adalah cara dimana kita menuliskan kode CSS di dalam baris kode atau tag HTML tersebut. berikut adalah contoh penerapannya.

 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title> Inline Stylesheet </title>
 </head>
 <body>
 	<h1 style = "color: red"> ini judul yang hurufnya berwarna Merah </h1>
 	<h1 style = "color: blue"> ini judul yang hurufnya berwarna Biru </h1>
 	<h1 style = "color: yellow"> ini judul yang hurufnya berwarna kuning </h1>
 </body>
 </html>

Cara di atas tidak di sarankan yah teman teman kalo untuk style css yang banyak, maka kita akan kerepotan dalam menghias website.

Cara kedua adalah Internal Stylesheet, nah cara ini adalah dimana kita menuliskan kode kode CSS kita diantara pembuaka dan penutup tag <head>, atau bisa kita taro di bawah tag <title>. Berikut contoh penerapannya.

 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title> Internal Stylesheet </title>
        <style> p{ color : orange; }</style>
 </head>
 <body>
 	<p>Lorem ipsum dolor sit amet, consectetur adipisicing eliusdam aus quos animi fugit!</p>
 </body>
 </html>

yang Terakhir adalah External Stylesheel. Ini adalah cara di mana pemanggilan File CSS terpisah dengan HTML.

berikut penerapannya

<!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>External Stylesheet</title>
	<link rel="stylesheet" href="style.css">
 </head>
 <body>
 	<p>Lorem ipsum dolor sit amet, consectetur aprnimi. Praesentium ipsam accusantium, similique accusamus quos animi fugit!</p>
 </body>
 </html>

kita tulis kode <link rel=”stylesheet” href=”style.css”>, dan buat file css yang bernama style.css, dan di dalam style.css masukan kode css berikut.

p{
	color: lightblue;
	padding: 20px;
}

demikian Tiga Cara Penulisan Kode CSS di HTML, semoga bermanfaat yah teman teman..

Kategori