yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa
markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara
bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain
suatu halaman HTML.
2. 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) yang berbeda.
layers (lapisan) yang berbeda.
3. Cara Pemasangan CSS Pada Dokumen HTML
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:
• External Style Sheet
Aturan CSS disimpan pada suatu file sehingga terpisah dari dokumen HTML.
Kemudian tambahkan kode pemanggilan file CSS dalam dokumen HTML.
Aturan CSS disimpan pada suatu file sehingga terpisah dari dokumen HTML.
Kemudian tambahkan kode pemanggilan file CSS dalam dokumen HTML.
File CSS(Misalnya disimpan dengan nama style.css) berisi :
p{text-align: justify;}
Dokumen HTML berisi :
<html>
<head>
<title>CSS Secara Internal</title>
<link rel=”stylesheet” type=text/css” href=”style.css” />
</head>
<body>
<p> Paragraph yang diatur CSS Secara External</p>
</body>
</html>
Akhiran dari file CSS adalah .css
• Internal Style Sheet
Aturan CSS ditulis pada bagian HEAD dokumen HTML menggunakan tag
<style>
<html>
<head>
<title>CSS Secara Internal</title>
<style type="text/css">P{text-align:justify;}
</style>
</head>
<body>
<p> Paragraph yang diatur CSS Secara Internal</p>
</body>
</html>
• Inline Style Sheet
Aturan CSS ditulis langsung pada tag HTML yang akan diatur
tampilannya menggunakan atribut style:
<html>
<head>
<title>CSS Secara Internal</title>
<style type="text/css">P{text-align:justify;}
</style>
</head>
<body>
<p style =”text-align:justify;”> Paragraph yang diatur
CSS Secara Internal</p>
</body>
</html>
SATUAN DALAM CSS
1. Statik
* in → satuan inchi
* cm → satuan centimeter
* mm → satuan milimeter
* pt → satuan point (1point = 1/72 inchi)
* pc → satuan pica (1pica = 12 point)
* px → satuan pixel (satu titik gambar terkecil dalam layar monitor)
2. Relatif
* % → satuan persen
* em → atau ems (1em = ukuran font yang tengah ada dalam elemen)
* ex → 1ex = x-height suatu font (x-height biasanya setengah ukuran
font)
4. Penulisan CSS
Sintaks penulisan CSS nya sebagai berikut:
Penjelasan:
Aturan CSS terdiri 2 bagian:
1. Selector
Biasanya berupa tag HTML, id, class
• id menggunakan tanda # didepan nama selector
• class menggunakan tanda titik didepan nama selector
contoh :
h1 { color : blue ; } ➔ tag html h1
#teks { color :green; } ➔ id
.warna { color : red; } ➔ class
2. 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.
a. Selector ID pada CSS
Untuk selector id pada css ditandai dengan tanda #(pagar) contoh
penulisan seperti berikut :
#teks
{
Color : blue;
Font-family: Calibri;
}
Penggunaanya dalam script HTML :
<body>
<p id=”teks”>TEST
</p>
</body>
Yang perlu di perhatikan jika menggunakan selector id :
1) Sebuah elemen HTML hanya boleh memiliki 1 id
2) Setiap halaman hanya boleh memiliki 1 elemen dengan id
tersebut
3) Dapat di gunakan sebagai penanda halaman untuk link
4) Digunakan juga untuk javascript
5) Sebaiknya tidak digunakan untuk css ( lebih baik gunakan class)
b. Selector Class pada CSS
Untuk selector class pada css ditandai dengan tanda . (titik) contoh
penulisan seperti berikut :
.warna
{ background-color: lightgreen; }
#. Penggunaanya dalam script HTML :
<body class=”warna”>
</body>