Penulisan CSS

Ada tiga konsep penulisan css untuk mengatur dokumen html antara lain Inline CSS, Internal CSS dan Exsternal CSS.

Inline CSS

Inline css adalah konsep penulisan syntax css di tempatkan langsung di dalam tag pembuka elemen html yang di tuju sebagai atribut html. atribut yang di gunakan untuk menampung perintah inline css adalah atribut khusus css yakni atribut style= "...".

Contoh penulisan Inline CSS sebagai berikut:

<p style=" color : red ; background : blue ; "> ini contoh inline CSS </p>

Internal CSS

cara penulisan inline css adalah mrnempatkan perintah CSS di antara tag pembuka <head> dan tag penutup </head>. intuk menyisipkan Inline CSS, kita membutuhkan tag html khusus Inline CSS yakni tag <style>.

contoh penggunaan Inline css di dokumen html sebagai berikut:

Contoh internal CSS di HTML

<html>
<head>
<title></title>

<style>

p {

color :red;
background:blue; 
}

</style>

</head>
<body>

<p>ini merupakan contoh penggunaan Inline css  </p> 

<p>ini juga contoh hasil Inline Css </p>


</body>
</html>

Copy dan coba jalankkan contoh di atas di aplikasi browser anda.

CSS akan mempengruhi semua elemen yang memiliki tag <p> sesuai dengan selector yang di gunakan.

Exsternal CSS

Exsternal css adalah penempatan css terpisah dari dokument html. perintah css di tulis di file berekstansi namafile.css, untuk menggunakannya kita harus menghubungkannya ke dokument html dengan cara membuat tag link <link rel="stylesheet" href="namafile.css"/> untuk mamangil file css.

Contoh pengunaan external CSS seperti contoh di bawah ini:

ContohCSS.CSS

contoh exsternal CSS

 
 p {color :red;background:blue; }

Copy dan simpan code css di atas dengan nama contohCSS.css.

ContohHtml.html

Contoh exstenal css

<html>
<head>
<title></title>
<head>
<link rel="stylesheet" href="contohCSS.css" />
</head>
<body>

<p>contoh Exsternal CSS  </p>
<p>ini juga contoh exsternal css  </p>

</body>
</html>

Copy dan simpan juga contoh html di atas simpan dengan nama contohHtml.html simpan di folder yang sama dengan file css sebelumnya dan coba jalankan di aplikasi web Browser anda.

Penulisan dengan konsep internal css dan exsternal css adalah penulisan yang sering digunakan untuk pembuatan web yang fleksibel dan praktis, dengan pola penulisan seperti di dua cara di atas dokumen html kita akan tampak lebih bersih dan memudahkan kita pada saat melakukan perawatan dokumen html kita.

Di artikel selanjutnya kita akan membahas tentang selector ID dan selector Class.

ZenTutorials

Penulisan CSS

Inline CSS

Internal CSS

Exsternal CSS

Tidak ada komentar:

Posting Komentar