Bagaimana Teknik Penulisan CSS pada Situs dalam desain web?


Bagaimana Teknik Penulisan CSS pada Situs dalam desain web?

Terus bagaimana cara menggunakannya atau cara memasangnya pada HTML? Untuk lebih jelasnya dapat dilihat pada artikel ini.

Bagaimana Teknik Penulisan CSS pada Situs dalam desain web.

Setelah kita mengetahui apa itu Cascading Style Sheet  atau CSS, maka kita bisa menuliskan pada HTML yang kita targetkan. Jika sahabat belum tahu apa itu CSS bisa anda baca artikel pada link ini.

Penulisan CSS ada 3 jenis yaitu

1. Internal CSS

Syntaks:

<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style type="text/css">
h1 {color:blue; text-align: center;}
p {color:white; background: green; padding: 10px 10px;}
</style>
</head>
<body>
<h1>Ini Contoh Internal CSS</h1><br />
<p>Selamat Datang! ini adalah bagian contoh penggunaan internal CSS. Semoga bermanfaat ya!</p>
</body>
</html>
 

Untuk hasil Tampilannya Dapat dilihat pada gambar dibawah ini:

2. Inline CSS

Syntaks:

<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<h1>Ini Contoh Inline CSS</h1><br />
<p style="background: green; color: white; font-weight: bold; padding: 5px 5px; border-radius: 2px 2px;">Selamat Datang! ini adalah bagian contoh penggunaan inline CSS. Semoga bermanfaat ya!</p>
</body>
</html>
 

Untuk hasil Tampilannya Dapat dilihat pada gambar dibawah ini:

3. Eksternal CSS

Syntaks:

<!DOCTYPE html>
<html>
<head>
<title>Eksternal CSS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Ini Contoh Eksternal CSS</h1><br />
<p>Selamat Datang! ini adalah bagian contoh penggunaan Eksternal CSS. Semoga bermanfaat ya!</p>
</body>
</html

Untuk file style.css sebagai berikut:

h1 {color:blue; text-align: center;}
p {color:white; background: green; padding: 10px 10px;}

Untuk hasil Tampilannya Dapat dilihat pada gambar dibawah ini:

Jika masih bingung bisa download syntaks nya di link ini. Semoga bermanfaat.

 

penulis

About Catur Budi Waluyo

Suka otak atik yang penting menyenangkan dan bermanfaat saja. Administrator www.calesmart.com

Learn More

Artikel Yang Lain