Untuk menambah pengetahuan kita tentang CSS disini saya menulis sedikit tentang dasar-dasar CSS.
Cascading Style Sheet atau yang biasa disebut dengan CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan. CSS biasa juga diartikan sebagai suatu teknik penulisan kode untuk memperindah dan mempermudah dalam pengkodean HTML dengan tujuan untuk memperindah tampilan situs.
Beberapa Keuntungan dari menggunakan CSS adalah pertama, memisahkan presentasi sebuah dokumen dari conten dokumen itu sendiri. Kedua, mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen web. Dan yang ketiga adalah mempercepat proses rendering/pembacaan HTML.
Contoh format dasar penulisan CSS yaitu,
1. Misalkan untuk menulis sebuah dokumen web yang berjudul ‘Mari Belajar CSS’ maka ditulis dalam halaman notepad dengan format :
<html>
<head>
<title> Mari Belajar CSS </title>
</head>
<body>
</body>
</html>
Maka dalam dokumen web akan tertulis
Mari Belajar CSS
2. Untuk mengisi dokumen web tersebut, maka teksnya di tulis diantara <body> teks </body>. Berikut contoh penulisan formatnya:
<html>
<head>
<title>…</title>
<body>
Hello
</body>
</html>
dan dalam dokumen web tampilannya sebagai berikut :
Hello
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu dengan menggunakan External Style Sheet (file CSS berbeda dari file HTML), Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) dan Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan). Berikut adalah contoh format dengan menggunakan,
Tanpa CSS
<html>
<head>
<title>Belajar CSS</title>
</head>
<body>
<h1><font face=”Verdana”>Belajar CSS</font></h1>
</body>
</html>
Internal CSS
<html>
<head>
<title>Belajar CSS</title>
<style type=”text/css”>
h1 { font-family: verdana; }
</style>
</head>
<body>
<h1>Belajar CSS</h1>
</body>
</html>
External CSS
Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misalkan kita membuat file dan simpan dengan nama style.css dan isikan kode berikut:
h1 { font-family: verdana; }
Beberapa macam CSS
è CSS Background
Property background
1. Background-color
Contoh:
Body {
Background-color : green;
}
2. Background-Image
Contoh:
Body {
Background-image : url(gambar1.jpg);
}
3. Background-attachment
Body {
Background-attachment : scroll;
}
4. Background-Repeat
Body {
Background-repeat : repeat;
Background-image : url(image/gambar1.jpg);
}
5. Background-position
Body {
Background-repeat : no-repeat;
Background-image : url(image/gambar1.jpg);
Background-position : bottom center
}
Contoh:
Format penulisannya :
<html>
<head>
<link href=`style.css`rel=¨stylesheet¨type=`text/css`>
</head>
<body>
Hello, Contoh Body
</body>
</html>
maka tampilan dalam dokumen web
è CSS Font
Property Font
1. Font-family
P {
Font-family : Arial,Helvetica;
}
2. Font-size (satuan em,pt,px,mm,cm,%)
P {
Font-size : 24em;
}
3. Font-style (nilai : oblique,italic,normal)
P {
Font-style : oblique;
}
4. Font-variant (nilai : normal,small-caps)
P {
Font-family : Arial,Helvetica;
}
5. Font-weight (nilai :normal,bold,bolder,lighter,100-900)
P {
Font-weight : bolder;
}
è CSS Teks
Property teks
1. Color
P {
color :red;
}
2. Teks-align (nilai left,right,center,justify)
P {
text-align :justify;
}
3. Text-decoration (nilai : none,underline,overline,line-through,blink)
P {
Text-decoration :overline;
}
Contohnya :
u menggunakan tag <U>..</U>
<html>
<head>
<stylet type=text/css¨>
u {color=red}
</style>
</head>
<body>
<u>Mengapa kita harus bertengkar</u><br>sedangkan kicau burung<u>bernyani merdu
</body>
</html>
Atau dengan menggunakan format,
<html>
<head>
<body>
<font color=red><u>Mengapa kita harus bertengkar</u> </font><br>sedangkan kicau burung<font color=red><u> bernyanyi merdu</font>
</body>
</html>
Maka hasilnya dalam dokumen web seperti di bawah ini
u Menggunakan tag <u> =under line dan tag <i> = italic diberi efek baru, yaitu warna merah hurufnya kemudian tag <b> = bold, diberi efek warna hijau
Maka formatnya,
<html>
<head>
<style type=¨text/css¨>
I,u {color:red}
b {color:green}
</style>
</head>
<body>
P: mengapa jika kita anggap<i>suatu pekerjaan</i>itu mudah maka pekerjaan itu akan beneran menjadi<b>lebih mudah</b>?
<p>
J: karena itu merupakan<u>sugesti</u>terhadap<b>diri kita sendiri</b>
</body>
</html>
Dan pada dokumen web akan tampil seperti dibawah ini
4. Text-transform (nilai : none,capitalize,uppercase,lowercase)
P {
Text-transform : capitalize;
}
5. Letter-spacing
P {
letter-spacing : 20px;
}
6. Teks-indent
P {
Text-indent : 50px;
}
è CSS List
Property list
1. List-style-type (nilai : disc,circle,square,lower-roman,upper-roman,none,lower-alpha,upper-alpha)
Ul {
List-style-type : disc ;
}
2. List-style-image (nilai : url,none)
Ul {
List-style-image : url(gambar1.jpg) ;
}
3. List-style-position (nilai : inside,outside)
Ul {
List-style-position : inside;
}
è CSS Border
Property Border
1. Border-style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset).
b1 {
Border-style-type : groove ;
}
2. Border-bottom-style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset).
b1 {
Border-bottom-style : groove ;
}
3. Border-bottom-width ().
b1 {
border-bottom-width :10px;
}
4. Border-bottom-color ()
b1 {
border-bottom-color :red;
}
Moernie77's Weblog 