Jika berbicara pengertian CSS ini kita bisa ambil sebuah kesimpulan bahwa CSS hanya bertugas untuk bagaian desain, seperti pewarnaan, ukuran teks, background, warna teks dan lain-lain. Kalau diibaratkan sebuah bangunan, html adalah kerangkanya nya saja, nah sedangkan CSS bisa diasumsikan sebagai desain rumah, seperti ukuran, warna rumah dan lainnya.
Beberapa hal yang dapat dilakukan dengan CSS
•Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.
• Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yangberbeda
Ada 3 cara untuk memasang CSS pada dokument HTML yaitu :
1. External Style Sheet
Aturan CSS disimpan pada suatu file sehingga
terpisah dari dokumen HTML. Kemudian tambahkan
kode pemanggilan file CSS dalam dokumen HTML.
Akhiran file CSS adalah .css
File CSS (misalnya style.css) berisi :
Dokumen html berisi :
<head>
<title> CSS secara eksternal</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>Paragraph yang ini diatur CSS secara eksternal </p>
</body>Aturan CSS ditulis pada bagian HEAD dokumen HTML menggunakan tag <style>
<head>
<title> CSS secara internal</title>
<style type="text/css">
p {text-align:justify;}
</style>
</head>
<body>
<p> Paragraph yang ini diatur CSS secara internal </p>
</body>Aturan CSS ditulis langsung pada tag HTML yang
akan diatur tampilannya menggunakan atribut
style:
<p style="text-align:justify;">Paragraph ini diatur CSS secara inline</p>Berikut Aturan CSS
Selector --> Declaration
h1 {color:blue; font-size:12px;}
Aturan CSS terdiri 2 bagian:
Selector
Biasanya berupa tag HTML, id, class
id menggunakan tanda # di depan nama selector
class menggunakan tanda titik di depan nama selector
contoh : h1 { color : blue ; } --> tag html h1
#teks { color :green; } --> id
.warna { color : red; } --> class
Declaration
Berisi aturan-aturan css yang terdiri dari properti dan nilainya yang dipisahkan oleh tanda titik dua. Setiap aturan css harus diakhiri dengan tanda titik koma.
Selector ID dan Class pada CSS
Untuk selector id pada css ditandai dengan
tanda #(pagar) contoh penulisan seperti
berikut :
#teks
{
color:blue;
font-family: Calibri;
}
Penggunaannya dalam script HTML :
<body>
<p id="teks"> TEST </p>
</body>
Class pada CSS
Untuk selector class pada css ditandai dengan
tanda .(titik) contoh penulisan seperti berikut :
.warna
{
background-color: lightgreen;
}
Penggunaannya dalam script HTML:
<body class="warna">
</body>
