<div style='background-color: none transparent;'><a href='http://www.rsspump.com/?web_widget/rss_ticker/news_widget' title='News Widget'>News Widget</a></div>

Minggu, 01 April 2012

Teknik Penulisan Dokumen CSS(Cascade Style Sheets)

Di dalam HTML setidaknya dikenal tiga macam teknik dalam penulisan CSS :

1. External Style Sheet
External Style Sheet sering juga disebut dengan istilah Linking Style Sheet. Disebut eksternal karena pada teknik ini kita menuliskan semua efek Style didalam sebuah dokumen tersendiri yang kita panggil dengan menggunakan link. Teknik pemanggilan ini dideklarasikan dalam sebuah tag head :

<link rel="stylesheet" type="text/css" href="alamat_file_css.css">

Contoh :
Buat script css dan beri nama : body.css
body {
color: black;
background: #FFFFFF;
font-family: arial;
margin-top: 1cm;
margin-bottom: 2cm;
margin-left: 5px;
}

Selanjutnya buat file html dengan nama file : body_css.html
<html>
<head>
<title>Body CSS</title>
<link rel="stylesheet" type="text/css" href="body.css">
</head>
<body>
Ini adalah file css
</body>
</html>


2. Internal Style Sheet
Internal Style Sheet sering disebut Embeding Style Sheet adalah sebuah metode penulisan dokumen CSS pada suatu halaman html, dokumen css diletakkan bercampur dengan tag html dan diletakkan di antara tag head.

Contoh :
<html>
<head>
<title>Body CSS</title>
<style type="text/css">
body {
color: black;
background: #FFFFFF;
font-family: arial;
margin-top: 1cm;
margin-bottom: 2cm;
margin-left: 5px;
}
</style>
</head>
<body>
Ini adalah file css
</body>
</html>

3. Inline Style Sheet
Metode penulisan ini adalah sebuah metode penulisan CSS langsung pada komponen tag html.
Contoh :
<html>
<head>
<title>Body CSS</title>
<style type="text/css">
body {
color: black;
background: #FFFFFF;
font-family: arial;
margin-top: 1cm;
margin-bottom: 2cm;
margin-left: 5px;
}
</style>
</head>
<body style="color: black;background: #FFFFFF;font-family: arial;margin-top: 1cm;margin-bottom: 2cm;margin-left: 5px;>
Ini adalah file css
</body>
</html>

0 komentar:

Posting Komentar

Related Posts Plugin for WordPress, Blogger...