Pengertian CSS
CSS atau Cascading Style Sheets adalah bahasa
pemrograman untuk mengatur tampilan suatu website. CSS merupakan script
yang telah embedded dengan HTML.
Manfaat dari CSS:
Atribut ID
Aturan penamaan ID:
contoh :
<html>
<head>
<style type = "text/css">
#header {
width:900px;
height:50px;
border: 1px solid #640404;
}
#headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
#headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
<h1>Sample</h1>
<div id = "header">
<div id="headerLeft">Header Left</div>
<div id="headerRight">Header Right</div>
</div>
</body>
</html>
Penempatan CSS dalam HTML
Manfaat dari CSS:
- Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
- Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
- Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
- Dapat berkolaborasi dengan JavaScript.
- Digunakan dalam hampir semua web browser.
Atribut ID
Aturan penamaan ID:
- Dapat mengandung huruf, angka, atau karakter garis bawah,
- Karakter pertama harus berupa huruf atau karakter garis bawah,
- Diawali dengan tanda #,
- Jangan memberi nama id sama dengan value,
- Jangan memberi nama id dengan tag html kemudian diikuti tanda #.
contoh :
<html>
<head>
<style type = "text/css">
#header {
width:900px;
height:50px;
border: 1px solid #640404;
}
#headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
#headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
<h1>Sample</h1>
<div id = "header">
<div id="headerLeft">Header Left</div>
<div id="headerRight">Header Right</div>
</div>
</body>
</html>
Penempatan CSS dalam HTML
- Internal CSS
Metode penulisan kode CSS langsung dalam file HTML. contoh:
<html>
<head>
<style type = "text/css">
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
</body>
</html> - Eksternal CSS
file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”public.css”/>
</head>
<body>
</body>
</html> - Inline CSS
Penulisan kode CSS dalam tag HTML. contoh:
<html>
<head>
</head>
<div style="background-color:#999999; text-align:center;">Inline CSS</div>
</body>
</html>
More
Tidak ada komentar:
Posting Komentar