Ada 3 cara memasukkan CSS ke dalam dokumen html :
- Dengan menambahkan langsung di tag dokumen html.
Contoh tag CSS :
<p style=”color:blue”>
Isi paragraf.
</p>
- Dengan meletakkannya di dalam header dokumen html.
Contoh tag CSS :
<html>
<head>
<title>Latihan CSS</title>
<style type="text/css">
b{
color: purple;
font-size: 20px;
background: yellow;
}
i{
color: red;
}
u{
color: yellow;
font-size: 8px;
}
</style>
</head>
<body>
<b>Mari belajar CSS</b><br>
Pertama-tama kita kenalan dulu dengan <b>CSS</b>. CSS merupakan kependekan dari <i>Cascading Style Sheet</i> yang memungkinkan kita untuk mendesain (style) tampilan dokumen (<u>terutama HTML</u>) dengan memisahkan isi dari dokumen <u>HTML</u> dengan kode untuk <i>menampilkannya</i> (CSS).
</body>
</html>
- Dengan membuat file CSS tersendiri yang terpisah dari dokumen html.
Contoh tag CSS :
<html>
<head>
<title>Desain Web</title>
<style type="text/css">
body {
background: #30BA05;
font-family: Monotype Corsiva;
padding: 0;
margin: 0;
}
#container{
width: 815px;
background:url("container1.jpg");
margin: 0 auto;
font-size:20;
font-family:Trebuchet MS;
}
#header{
height: 200px;
background:url("header.jpg");
margin:0 20px 0 20px;
Font-family:Tahoma;
Font-size:28;
}
#sidebar{
width: 250px;
height: 400px;
float: left;
}
#footer{
height: 100px;
background: url("footer.jpg");
margin:0 20px 0 20px;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
JUDUL WEB<br>
</div>
<div id="sidebar">
Link to artikel
</div>
<div id="content">
Artikel web .........
</div>
<div id="footer">
Footer web
</div>
</div>
</body>
<</html>>
Desain Web
Beberapa kelebihan memformat halaman web dengan CSS:
- Memisahkan presentation sebuah dokumen dari content dokumen itu sendiri.
- Mempermudah dan mempersingkat pembuatan dan pemeliharaan.
- Mempercepat proses ”rendering” pembacaan HTML.
- Meningkatkan aksesibilitas isi.
- Memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan.
- Ukuran file lebih kecil daripada table-based.
- Lebih mudah terbaca oleh search engine.
Adapun kekurangan memformat halaman web dengan CSS adalah :
- Menyesuaikan code CSS dengan code pada setiap browser yang pada umumnya berbeda-beda.
- Menyesuaikan standar pixel gambar di CSS dengan standar pixel di setiap web browser.
