CSS adalah singkatan dari Cascading Style Sheets
Merupakan
suatu
cara
untuk
memformat
atau
membuat
layout halaman
web menjadi
lebih
menarik
dan
mudah
dikelola.
Dapat
digunakan
untuk :
- Merubah ukuran font
- Merubah warna background
- Mengatur perataan paragraf
Cara menambahkan CSS ke dalam HTML
1. Linked/External Style Sheets
External style sheets merupakan
dokumen
css
yang disimpan
dalam
file berbeda
dengan
file HTML.
File ini berekstension .css. Untuk
menyertakan
file css,
letakkan
tag berikut
ke
dalam
<head>…</head>
<link rel="stylesheet" type="text/css" href=“namafile.css" />
Biasa
dipakai
jika
beberapa
halaman
akan
menggunakan
style yang sama.
CSS
dapat didefinisikan untuk semua halaman hanya dengan menulis definisi
CSS di dalam sebuah
file teks
yang selanjutnya dirujuk oleh setiap halaman
web yang akan menggunakannya.
Dengan demikian jika suatu saat ingin dilakukan perubahan style
yang
berlaku untuk semua halaman
Web maka
yang diubah ada
file teks eksternal tersebut.
Contoh :
ini file eksternalnya :
.headlines, .sublines, .infotext
{
font-family:arial;
color:blue;
background:cyan;
font-weight:bold;
}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size:10pt;}
ini script HTML nya
<html>
<head>
<title>Penggunaan CSS Eksternal</title>
<link rel=stylesheet href="style.css" type="text/css">
</head>
<body>
<span class="headlines">Selamat Datang</span><br>
<div class="sublines">
Ini adalah contoh penggunaan web yang menggunakan CSS.<br>
Contoh ini menggunakan CSS Eksternal.<br>
Pendefinisian pemanggilan style dilakukan dengan menggunakan tag link.<br>
</div>
<table border="2"><tr>
<td class="sublines">
Style juga dapat dilakukan dalam elemen table.
</td></tr>
</table>
<hr>
<div class="infotext">contoh penggunaan CSS eksternal</div>
<hr>
</body>
</html>
2. Internal Style
CSS
dapat didefinisikan untuk satu halaman secara keseluruhan hanya dengan menambahkan suatu definisi style
pada bagian head dokumen
HTML.
contoh :
<html>
<head>
<title>Penggunaan CSS untuk satu halaman Web</title>
<style type="text/css">
.headlines, .sublines,
.infotext {
font-family:arial;
color:blue;
background:cyan;
font-weight:bold;}
.headlines {font-size:14pt;}
.sublines
{font-size:12pt;}
.infotext
{font-size:10pt;}
</style>
</head>
<body>
<span class="headlines">Selamat Datang</span><br>
<div class="sublines"> Ini adalah contoh penggunaan web yang menggunakan CSS.<br>
Contoh ini menggunakan CSS untuk satu halaman Web.<br>
Pendefinisian style cukup dilakukan di tag head.<br>
</div>
<br>
<table border="2"><tr>
<td
class="sublines"> Style juga dapat dilakukan dalam elemen table. </td></tr>
</table>
<br>
<hr>
<div class="infotext"> contoh penggunaan CSS untuk satu halaman
</div>
<hr>
</body>
</html>
3. Inline Style
CSS mendefinisikan tag tunggalnya hanya dengan menambahkan style seperti style="styledefinition:styleattribute;"
contoh :
<html>
<head>
<title>Penggunaan CSS Tag Tunggal</title>
</head>
<body>
Ini adalah contoh
<b style="font-size:16px;color:blue;"> bold </b>
dengan menggunakan CSS.
</body>
</html>
Istilah dalam CSS
Style rule
Pendeklarasian :
selector
{ property1: value; property2:value, . . .}
contoh :
H1{
color:green; background-color:orange}
Style sheets terdiri dari dua bagian:
1. Selector
Bagian pertama sebelum tanda “{}” disebut selector
2. Declaration
Terdiri dari property dan
value
Antara property yang satu
dan
yang lainnya
dipisahkan
dengan tanda ; (titik koma)
Komentar dalam CSS
- Komentar biasa digunakan untuk memberi keterangan pada css yang dibuat.
- Komentar tidak akan ditampilkan pada browser
- Komentar dalam CSS dibuat dengan
/* tulis komentar di sini */
HTML Selector
Diawali dengan tag html yang akan diberikan style
namatag {….}
Digunakan agar sebuah TAG bisa menggunakan deklarasi CSS tersebut
Misalnya P{font-color:red;}
Artinya paragraf tersebut akan di redefinisi menjadi warna merah
Contoh :
<html>
<head>
<title>Selector HTML</title>
<style type="text/css">
b {font-family:arial;
font-size:14px; color:red}
</style>
</head>
<body>
<!-- memanggil selector b yang me-redefinisi-kan <b> -->
<b>Tulisan ini tebal karena menggunakan style CSS</b>
</body>
</html>
Class Selector
Diawali dengan tanda titik (.) dan diikuti nama class
.namakelas {….}
Digunakan agar sebuah objek bisa menggunakan deklarasi CSS tersebut
Misalnya <p class=‘judul’>…</p>
Artinya paragraf tersebut menggunakan aturan yang ditetapkan dalam class selector judul
Contoh :
<html>
<head>
<title>Selector Class</title>
<style type="text/css">
.headline {font-family:arial;
font-size:14px; color:red}
</style>
</head>
<body>
<b class="headline">
Tulisan ini tebal karena pengaruh selector class headline
</b><br>
<i class="headline">
Tulisan ini dicetak miring karena selector class headline
</i>
</body>
</html>
ID Selector
Diawali dengan tanda titik (#) dan diikuti nama id
#namaid {….}
Digunakan agar sebuah objek bisa menggunakan deklarasi CSS tersebut dan biasanya bersifat unik dalam sebuah halaman
Misalnya <p id=‘header’>…</p>
Artinya paragraf tersebut menggunakan aturan yang ditetapkan dalam id selector header
Contoh :
<html>
<head>
<title>Selector ID</title>
<style type="text/css">
#layer1 {position:absolute;
left:100;top:75; z-index:2}
#layer2 {position:absolute;
left:130;top:120; z-index:1}
</style>
</head>
<body>
<div id="layer1">
<table
border="1" bgcolor="cyan">
<tr> <td>Ini adalah layer 1<br>Diletakkan pada posisi (100,100)</td></tr>
</table>
</div>
<div id="layer2">
<table
border="1" bgcolor="yellow">
<tr><td>Ini adalah layer 2<br>Diletakkan pada posisi (130,120)</td></tr>
</table>
</div>
</body>
</html>
Pengelompokkan Selector
Untuk beberapa
style yang sebagian properti-nya
memiliki nilai yang sama, misalnya
jenis font yang sama;
mendefinisikan
font tidak perlu dilakukan
satu demi satu untuk setiap
selector. Pendefinisian dapat
dikelompokkan,
dengan cara melewatkan
font
ke semua selector dalam satu kali.
Contoh :
Sebelum pengelompokkan
.headlines
{
font-family:arial;
color:black;
background:yellow;
font-size:14pt;
}
.sublines
{
font-family:arial;
color:black;
background:yellow;
font-size:12pt;
}
.infotext
{
font-family:arial;
color:black;
background:yellow;
font-size:10pt;
}
Setelah pengelompokkan
.headlines, .sublines, .infotext
{
font-family:arial;
color:black;
background:yellow;
}
.headlines
{font-size:14pt;}
.sublines
{font-size:12pt;}
.infotext
{font-size: 10pt;}
Tidak ada komentar:
Posting Komentar