Insert CSS to HTML Document

styhtmlcssPada tulisan sebelumnya telah dibahas tentang style dan sedikit pendahuluan mengenai CSS. Dari namanya CSS (Cascading Style Sheet) penulis memahaminya sebagai barisan kode untuk menentukan style pada web yang anda buat.

Pada tulisan sebelumnya penulis hanya membahas tentang style pada baris kode html. adapun ada tiga jenis style, yaitu

  1. Style yang ditulis bersama di baris kode html.
  2. Style yang ditulis terpisah di baris kode tetapi masih dalam satu file html.
  3. Style yang terpisah dengan file html.

Dalam baris :

<!DOCTYPE html>
<html>

<body style="background-color:yellow;">
 <h2 style="background-color:red;">This is a heading</h2>
 <p style="background-color:green;">This is a paragraph.</p>
</body>
</html>

Masih dalam satu file disimpan diantara tag head :

<!DOCTYPE html>
<html>
 <head>
  <style type="text/css">
   h1 {color:red;}
   h2 {color:blue;}
   p {color:green;}
  </style>
 </head>
<body>
 <h1>All header 1 elements will be red</h1>
 <h2>All header 2 elements will be blue</h2>
 <p>All text in paragraphs will be green.</p>

</body>
</html>

Sedangkan untuk style yang terpisan (CSS) kita akan membuat dulu syle sheet nya. Sebagai latihan silahkan buat dulu file sytle.css berikut :

h1 {color:red;}
   h2 {color:blue;}
   p {color:green;}

tulis di notepad. kemudian pilih tipe file nya ‘All Files’ dan save dengan nama ‘style.css’ kemudian OK.
ss_style1
Setelah itu edit baris html di atas atau anda bisa membuat kembali baris kodenya sebagai berikut.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>All header 1 elements will be red</h1>
<h2>All header 2 elements will be blue</h2>
<p>All text in paragraphs will be green.</p>
</body>
</html>

ss_style4
kemudian save filenya.
ss_style3
Jelas terlihat kita mengkoneksikan file htmlnya dengan file css kita dengan menggunakan ‘rel’.
Hasilnya :
ss_style5

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s