Apa itu CSS?

By | April 11, 2014

Apa itu CSS? « Definisi CSS

CSS ( Cascading Style Sheets) –  Merupakan bahasa pemrograman yang dipergunakan untuk membuat halaman web yang ditulis dengan kode HTML atau XHTML. Sesuai dengan namanya, CSS digunakan untuk mengatur Style atau tampilan dari sebuah website seperti pengaturan font, warna dan bentuk font, background, dsb. Kelebihan CSS adalah memungkinkan Anda untuk mengontrol tampilan halaman situs secara bersamaan dari satu file (file .css).

pengertian css


Memasang CSS

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu: 1. External Style Sheet (file CSS berbeda dari file HTML), 2. Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) dan 3. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan). Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini:

1. Menggunakan Internal CSS

Maksudnya : kita menambahkan kode css langsung didalam file html. Letaknya adalah di antara code <head> dan </head>

Example :

 <html> <head> <title>Belajar CSS</title> <style type="text/css"> h3{ font-family: verdana; color:green; } </style> </head> <body> <h3>Belajar CSS</h3> </body> </html>  

2. Menggunakan teknik external CSS

Maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css dan isikan kode berikut:

 h1{ font-family: verdana; color:green; } 

Sekarang untuk kode HTML tulislah kode berikut ini dan simpan dengan nama coba.html

 <html> <head> <title>Belajar CSS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Belajar CSS</h1> </body> </html> 

Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan diantara tag <head>. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian <body> saja bagian yang didalam <head> tidak usah diapa-apakan.

 

CSS terdiri dari dua bagian utama yaitu: selector, dalam hal ini H1 dan deklarasi yang berada diantara kurung kurawal {font-family: verdana}. Didalam deklarasi juga terbagi menjadi dua bagian yaitu property dalam hal ini font-family dan value dalam hal ini verdana. Dalam contoh diatas hanya mengubah sebuah tag yaitu tag <h1> menjadi teks dimana jenis hurufnya menjadi verdana. Kita dapat mengkombinasikan berbagai macam style menjadi satu. Kita akan segera mempelajarinya.

Sekarang kita coba mengkombinasikan banyak style. Cobalah kode CSS berikut ini dan simpan dengan nama style.css

 

 .title {     font-size: 13px;     color: #6095d0;     font-family: Arial, Helvetica, sans-serif;     font-weight:bold; } .thank {   font-size: 11px;   color: #000000;   font-family: Georgia, "Times New Roman", Times, serif; } p {    font-size: 12px;    color: #000000;    font-family: verdana; } 

Sekarang tulis kode HTML ini dan simpan dengan nama coba.html

 

<html>
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<font>Halo dunia</font>
<p>Saya mau belajar CSS, ini kode CSS saya yang pertama</p>
<font>Terimakasih</font>
</body>
</html>

3. Menggunakan inline  CSS

Maksudnya : kita gak perlu membuat file css external ataupun internal. Kita langsung bias menambahkan style pada tag yang ingin diberi style. Namun cara ini kurang efektif. Karena terbilang pemborosan coding.

Bayangkan jika dalam 1 file.HTML terdapat 500 tag. Wahhh…. Pasti capeeek banget. Gak efektif.

 

Tapi jika hanya untuk beberapa tag saja… bolehlah….

Berikut cara penulisanya :

 <h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1> 

Sekian dulu pembahasan CSS , capek. Bersambung dulu.. sampai ketemu di tutorial berikutnya… kunjungi  isomwebs.com, Karena isomwebs.com akan slalu update untuk anda.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Current ye@r *