CSS

Cascading Style Sheet (CSS) merupakan suatu bahasa stylesheet yang berfungsi untuk mengatur  dan memperindah tampilan halaman website (situs). Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C). Secara umum, CSS ini digunakan untuk mengatur halaman web yang ditulis dengan menggunakan HTML dan XHTML. Dengan adanya metode CSS ini, maka kita dapat dengan mudah mengubah tampilan warna dan tampilan secara keseluruhan, mengubah besar kecilnya teks, mengubah warna border pada tabel yang ada di website. CSS juga dapat memodifikasi HTML untuk membentuk tampilan sebuah website. Tidak hanya itu, CSS juga dapat memformat ulang situs dengan cepat.
Jika kita ingin mengganti tampilan website yang telah dibuat sebelumnya, maka yang harus dilakukan adalah mengganti baris – baris kode yang terdapat pada CSS nya saja, tidak perlu merubah file – file HTML nya. CSSdapat mengatur banyak atribut pada sebuah halaman secara mudah seperti warna background, border, shadow, font yang berbeda pada masing – masing tag yang digunakan.


Terdapat dua jenis dari CSS, yaitu internal CSS dan eksternal CSS :
a)    Inline Style Sheet
Kode CSS ditempatkan masih dalam satu file dengan file HTML nya.

<STYLE type=”text/css”>
selector {property : value}
</STYLE>

Bagian selector pada element HTML merupakan bagian style yang mana akan dipilih. Bagian property berisi atribut, karakteristik, seperti ukuran, warna, border yang akan dipilih. Dan bagian value berisi pengaturan terhadap property
.
Contoh :

<html>
<head> <title> CSS </title> </head>
<style type=”text/css”>
body{
font-family:Comic Sans;
background-image:url(image/meowmix_1280[1].jpg);
color:#3366FF;
}

</style>

<body>

<h1><center> Contoh Inline Style Sheet </center> </h1>
<br>
<marquee>
<b>
Cascading Style Sheet…. CSS …. Inline Style Sheet …. Cascading Style Sheet…. CSS …. Inline Style Sheet ….
</b>
</marquee>
<hr>
<br>
<p style=” font-family:Verdana; color:#336633;font-size:14px;” align=”right”>
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup.<br>
Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML.<br>
CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen.<br>
CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). <br>
Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi.<br>
</p>
<br>
<p style=”font-size:18px; font-family: Kristen ITC; color:#660033;” align=”center”>
Ini merupakan salah satu contoh dari Inline Style Sheet<br>
Menggunakan tag STYLE untuk mendeklarasikan CSS nya<br>
Dengan adanya CSS, kita dapat memberikan variasi pada halaman web dengan mudah<br>
Tidak hanya mudah, tapi tampilan yang dihasilkan akan sangat bagus dan berbeda<br>
</p>

<table border=”1″ align=”center”>
<tr>
<td> <img src=”image/FunPhotoBox_462612201347.jpg” width=”400px” height=”300px”> </td>
</tr>
</table>
</body>
</html>

b)    External Style Sheet (Eksternal CSS)
Memiliki file CSS terpisah dari file HTML nya. Biasanya Eksternal CSS memiliki ekstensi .CSS
Contoh : format.CSS
<link rel=”stylesheet” href=”*.css” type=”text/css”>

Contoh :

140203080012c.html
<html>
<head>
<title>Rincian Hobby Saya</title>
<link href=”css/data.css” rel=”stylesheet”>
</head>
<body background=”images/ffmtw_00001_1024.jpg”>
<a name=”ATAS”></a>
<div>
<h1 align=”center”><font color=”white”><b>Any Hobby</b></font></h1>
</div>
<table width=”550″ border=”1″ align=”center”>
<tr>
<div>
<td width=”100″ height=”130″><font size =”5″ color =”RED”><center>Photo</center></td>
<td colspan=”2″ align=”center”><img src=”images/Foto066.JPG” width=”200″ height=”300″ align=”CENTER”>Photo with my friend in Cartil
<h3 align=”center”>
</td>
</tr>
<tr>
<th rowspan=”8″ ><font size =”5″ color =”blue”>Rincian<br>
<br>
<tr>
<td colspan=”2″  align=”center”><font size =”5″ color=”green”><b>My hobbies : </b></th></td>
</tr>
<tr>
<td width=”200px”><font color = “PURPLE”><b>1. Singing </b></td>
<td width=”200px”><font color = “GRAY”><b>Jazz,pop,slow,rock </b></td>
</tr>
</tr>
<tr>
<td><font color = “PURPLE”><b>2. Make the poem and story </td>
<td><font color = “GRAY”><b>About life,love n dreaming </td>
</tr>
<tr>
<td><font color = “PURPLE”><b>3. Cooking</td>
<td><font color = “GRAY”><b>Masakan yang simple and enak</td>
</tr>
<tr>
<td><font color = “PURPLE”><b>4. Traveling</td>
<td><font color = “GRAY”><b>Ke tempat yang bagus dan indah</td>
</tr>
<tr>
<td><font color = “PURPLE”><b>5. Play the game </td>
<td><font color = “GRAY”><b>Game adventure dan game house </td>
</tr>
<tr>
<td><font color = “PURPLE”><b>6. Try something… </td>
<td><font color = “GRAY”><b>Membuat suatu hal baru😉 </td>
</tr>
</table>
</div>
<div>
<h2><br>
<center><a href=”#ATAS”>Kembali Ke Atas</a><br></center>
<center><a href=”140203080012_01b.html”>HObbY</a><br></center>
<center><a href=”140203080012_01a.html”>HOmE</a><br></center>
<br>
</h2>
</div>
</body>
</html>

data.css

body{
font-family: “trebuchet ms”, helvetica, sans-serif;
color: #857D74;
}

.text3 {
font-size:12x ;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#80A8FF;
}

.header2 {
background-image:url(../images/img07.jpg);
color: #00FFFF;
}

.footer2{
background-IMAGE:url(../images/index_r2_c1.GIF);
}

Contoh :
14020308012b.html

<html>
<head>
<title> Hobby Saya </title>
<link href=”css/data.css” rel=”stylesheet”>
</head>
<body BACKGROUND=”images/Coba_Qkya.jpg”>
<br>
<center> <h1> Hobby </h1><br><br>
<table align=”right” valign=”center” border=10 >
<a href=”140203080012_01c.html” align=”center”> <img src=”images/med_20091105190831escanear00sds01.jpg” width=”323″ height=”208″></a> <br>
<font color =”#FF6633″><h2> Apresiasi Seni <br></h2></font>
</table>
<div>
<p>
<h4>
Seni..<br>
Saya sangat menyukai Seni<br>
Seni merupakan karya dan merupakan bagian hidup saya<br>
Seni dapat menghilangkan penat dan stress<br>
Dan seni sekaligus dapat menyalurkan bakat dan minat saya<br>
Banyak hal yang dapat dilakukan dalam bidang ini<br>
Membuat karya seperti puisi dan novel,.<br>
Melakukan hal – hal dalam bidang broadcasting : penyiar radio<br>
Ataupun menyalurkan kreatifitas seperti menyanyi<br>
Dengan kegiatan ini, maka hal yang kita inginkan pun dapat terwujud<br>
</h4>
</p>
</font>
<br>
</center>
</div>

<div>
<h1><br><center><a href=”140203080012_01c.html” ><b>RinCian HObbY</b></a><br></center></h1>
</div>
</body>
<html>

data.css
body{
font-family: “trebuchet ms”, helvetica, sans-serif;
color: #857D74;
}

.text2 {
font-size:14px ;
color:#660066;
font-family: Georgia, “Times New Roman”, Times, serif;
}

.footer3{
background-IMAGE:url(../images/img04.jpg);
color: #CCCCCC;
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: