Belajar Mengenal CSS - Yaser Gumilar

CSS Cascading Style Sheet adalah suatu bahasa style sheet yang digunakan untuk mengatur style / tampilan suatu dokumen (umumnya halaman WEB / WAP site) yang ditulis dalam bahasa markup.
CSS digunakan untuk mengformat halaman WEB / WAP yang ditulis dengan HTML dan XHTML.
CSS digunakan untuk menentukan Warna, Jenis huruf, Tata letak, dan berbagai aspek tampilan suatu halaman WEB / WAP sesuai dengan keinginan pembuatnya.

Ada 3 cara untuk menuliskan css:
1. Internal CSS
Internal CSS Menuliskan langsung script CSS di file HTML nya dan dituliskan di antara tag <head> . . . </head>

<html>
<head>
<style type="text/css">
body{background-color:white; font-family:cursive; color:maroon;}
.Yaser{background-color:lime; border-style:double; border-size:2; border-color:blue; color:maroon; text-align:center; cellpadding:2;}
</style>
</head>
<body>
<center>BELAJAR CSS Gitu Yuk ! ! !</center>
<div class="yaser">Mari BeLAJar CSS bersama Yaser Gumilar.</div><br/> <br/> </body>
</html>

2. InLine CSS
InLine CSS yaitu penulisan kode CSS di dalam tag <body> . . . </body> atau langsung ditulis bersama elemen HTML nya (langsung ditulis di dalam isi file HTML).

<html>
<head>

</head>
<body>
<p style="background-color:maroon; color:white; text-align:center; font-family:cursive; size:4;">
Halo Sobat, beLajar CSS yukk bareng Penulis yang Cakep Ini!!</p>
</html>

3. External CSS
External CSS yaitu menulis / membuat file CSS sendiri secara terpisah, cara menggunakannya adalah dengan memanggil file tersebut dengan menggunakan kode seperti ini : <link rel="stylesheet" type="text/css" href="alamat URL file CSS">
Kode pemanggil file CSS tersebut diletakkan di antara tag <head> . . . </head> .
Berikut ini contoh penulisan file CSS :

body {background:white; color:blue; font-family:cursive; text-align:center;}
.yaser {background:red; color:white; border-style:solid; border-color:blue; border-size:2px; text-align:left;}
.simple {background:blue; color:yellow; border-style:dot; border-color:red; border-size:2px; text-align:right;}

a:link {color:fuchsia; text-decoration:none;}

a:hover {color:yellow; text-decoration:none;}

a:visited {color:red; text-decoration:none;}

Keterangan :

.yaser {background:red; color:white; border-style:solid; border-color:blue; border-size:2px; text-align:left;} itu yg disebut dengan CLASS, lebih tepatnya Class="yaser", tergantung namanya apa., penulis contohkan di atas dengan nama yaser, jd nama classnya adalah YASER.

Begitu juga dengan .simple {background:blue; color:yellow; border-style:dot; border-color:red; border-size:2px; text-align:right;}, itu yg disebut dengan class SIMPLE.

Cara menggunakan / penulisannya sebagai berikut :

Contoh :

Class juga bisa digunakan pada <table> dan <span> .

Contoh :

<span class="nama class"> . . . </span> dan <table class="nama class"><tr><td> . . . </td></tr></table>.

Sedangkan untuk kode :

a:link {color:fuchsia; text-decoration:none;} untuk mengatur warna LINK yang belum pernah di Klik, serta mengatur agar LINK tidak bergaris bawah.

a:hover {color:yellow; text-decoration:none;} untuk mengatur warna LINK ketika kursor diletakkan pada LINK tersebut, serta mengatur agar LINK tidak bergaris bawah.

a:visited {color:red; text-decoration:none;} untuk mengatur warna LINK yang sudah pernah di Klik, serta mengatur agar LINK tidak bergaris bawah.

Itulah keterangan2 mengenai beberapa kode yang terdapat dalam file CSS.

Sekarang pembaca buat file external CSS seperti yang penulis contohkan di atas, lalu simpan dengan nama terserah pembaca, yang penting berakhiran dengan .css , contoh : fileku.css .
Setelah kamu buat file CSS, seterusnya pembaca tinggal buat file HTML yang disertai dengan kode pemanggilan file CSS yg sudah pembaca buat.
Berikut contohnya :

<html>
<head>
<title>BeLAjar CSS</title>
<link href="fileku.css/" rel="stylesheet" type="text/css">
</head>
<body>
<center>BELAJAR CSS Gitu Loh !!<br/>BELAJAR CSS Gitu Loh !!</center> <div class="yaser">Ini adalah contoh file HTML yang menggunakan ExternaL CSS dengan Class "yaser" . Semoga bisa membantu kamu untuk untuk mempercantik site kamu.</div>

<center>BELAJAR CSS Gitu Loh !!<br/>BELAJAR CSS Gitu Loh !!</center> <div class="simple">Ini adalah contoh file HTML yang menggunakan ExternaL CSS dengan Class "simple" . Semoga bisa membantu kamu untuk mempercantik site kamu.</div>

</body>
</html>

Penulis menggunakan notepad sebagai alat penulisannya, semoga pembaca dapat mengenal css dan berkeinginan untuk belajar css, sesama lagi belajar kita saling share ilmu ya :D