Pada artikel sebelumnya saya saya telah membahas tentang Pengertian HTML dan Dasar Penggunaan HTML. Dan pada tahap ini saya anggap bahwa Anda telah memahami cara penggunaan HTML sehingga saya akan melanjutkan ke tahap selanjutnya yaitu CSS (Casading Style Sheet).
Pengertian CSS
CSS (Cascading Style Sheet) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading,subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.CSS dapat mengendalikan ukuran gambar, warna bagian body pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.
CSS adalah bahasa Style Sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Cara Penulisan CSS
Inline style sheet
Penulisan di dalam elemen HTML.
Contoh script 1
Embedded Style Sheet
Penulisan CSS di dalam dokumen HTML dan menggunakan tag <style></style>
Contoh script 2
Linked Style Sheet
Penulisan skrip CSS dihalaman berbeda atau terpisah dari html.
Contoh script 3
Contoh script style1.css
Aturan Penulisan CSS
SelectorTerdiri dari tag,class,ID
Declaration
Mendeskripsikan property dan value
Contoh
H1
{
Color : #0000FF
}
Keterangan :
Selector : H1
Properti : Color
Value : #0000FF
Macam-macam Selector
Tag/ElemenSetiap tag yang ada pada HTML bisa dijadikan selector
Class
Diawal penulisan menggunakan tanda titik, pada HTML ditambahkan class
style1.css
h1
{
color:red;
}
.isiteks
{
font-family:arial,halvetica;
font-size:24px;
color:#6699FF;
}
contoh script
<html>
<head>
<link href='style1.css' rel="stylesheet" type='text/css'>
</head>
<body>
<p class='isiteks'>Contoh Class</p>
</body> </html>
Contoh Class
ID
Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain web karena didefiniskan denga ID berbeda.
Misal.
style1.css
h1
{
color:red;
}
.isiteks
{
font-family:arial,halvetica;
font-size:24px;
color:#6699FF; }
.judul1 { font-family:arial,halvetica;
font-size:12px; color:#6699FF;
}
contoh script
<html>
<head>
<link href='style1.css' rel="stylesheet" type='text/css'>
</head> <body>
<p id='judul1'>Contoh ID</p>
</body> </html>
Contoh ID
