KONSEP CSS
š Apa itu CSS :
a. Feature untuk
membuat dynamic HTML.
b. Style sheet
mendeskripsikan bagaimana tampilan document HTML di layar (template)
c. Membuat special
efek (mendefinisikan style untuk <H1> dengan style bold dan italic dan
berwarna biru)
d. Support ke
semua browser.
š Aturan
penulisan :
·
Nilai
untuk property tidak boleh dalam tanda petik.
contoh
: color : green;
·
Nama
property bersifat case sensitive.
color
: green;
property
: color
value
: green
Rumus :
Selector {Declaration}
Declaration
dijabarkan
kembali menjadi :
Selector {Property : Value}
š Aturan penuliasan CSS :
1. Inline style sheets.
Contoh Inline Style :
<html>
<head>
<title> Inline Style Sheets </title>
</head>
<body>
<p style=”color:blue”;>
CSS </p>
<p> Saya sedang belajar
format Inline Style Sheet dalam CSS </p>
</body>
</html>
2. Embedded style sheets / Internal style sheets.
Contoh Embedded Style Sheet :
<html>
<head>
<title> Embedded Style Sheets </title>
<title> Embedded Style Sheets </title>
<style>
H2{color:yellow;}
p{font-family:Arial;font-size:14pt;}
</style>
</head>
<body>
<h2> Saya siswa kelas X RPL 3 </h2>
<p> Saya sedang belajar format Embedded Style
Sheet dalam CSS </p>
</body>
</html>
3. External style sheets.
Contoh External Style Sheets :
File
berextensi .html :
<html>
<head>
<title> External Style Sheets </title>
<title> External Style Sheets </title>
<link rel=”stylesheet”
type=”text/css” href=”(namafile).css”>
</head>
<body>
<H2> CSS </H2>
</body>
</html>
</html>
File
berextensi .css:
H2{color:grey;}
p{font-size:14 pt;}
š Istilah –Istilah Dalam CSS
1) Class Selector
Dengan class selector kita dapat mendefinisikan
perbedaan style untuk tag elemen html yang sama. Misalnya 2 tipe paragraf,
paragraf pertama menggunakan align-left & yang paragraf 1 lagi menggunakan
align-center. Contoh penggunaan atribut class didalam HTML :
<p class=”left”>
Paragraf ini rata kiri </p>
<p class=”center”>
Paragraf ini rata tengah </p>
Maka penulisan pada file CSS-nya menjadi :
.left{text-align:left}
.center{text-align:center}
š Ketentuan Nama Class :
ü Pada penulisan nama class dalam file CSS diawali dengan tanda titik (.).
ü Tidak dianjurkan memberi nama class dengan angka.
ü Nama class tidak boleh menggunakan spasi, jika nama class lebih dari 2 suku
kata maka berikan tanda hubung (-) / (_).
2)
ID Selector
Digunakan dengan tujuan mendefinisikan per-elemen
dasar. Setiap halam ID Selector hanya boleh digunakan dengan 1 ID unik, itulah
yang menjadi perbedaannya dengan class selector.
Dengan class selector kita dapat mendefinisikan
perbedaan style untuk tag element HTML yang sama. Tetapi dengan ID Selector
kita hanya diperbolehkan memanggil 1 ID untuk 1 element yang sama.
Contoh :
<p ID=”tebal”> Paragraf
ini ditulis dengan huruf tebal & warna merah. </p>
<p ID=”miring”> Paragraf
ini ditulis dengan huruf miring & warna biru. </p>
Maka penulisan pada file CSS-nya menjadi :
#tebal{font-weight:bold;color:red;}
#miring{font-style:Italic;color:blue;}
Ketentuan Nama ID:
*Pada penulisan nama ID dalam file CSS diawali dengan tanda pagar (#).
*Nama ID dapat ditulis dengan angka, huruf / garis bawah.
*Karakter pertama sebaiknya huruf / underline (_).
Postingan
0 komentar:
Posting Komentar