• HTML / XHTML.
Contoh CSS
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
Styles Dapat Menyelesaikan Permasalahan Yang Besar
HTML tidak dibuat untuk mengatur format dari dokumen. Kalaupun ada itupun hanya yang penting-penting saja seprti mempertebal, align, mengganti warna dari teks, dan kita harus mengatur format teks tersebut secara manual (satu persatu).
HTML lebih mengarah untuk mendefinisikan content dari dokumen,seprti:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Pada html, apabila kita ingin memberi warna merah pada setiap tag <a>. maka caranya yaitu dengan memberikan tag <font>,dan menspesifikasikan atribut warna nya apa, <font color="red">merah</font>, hal ini menjadi mimpi buruk bagi developer, karena mereka harus menambahkan tag font dan atribut colornya setiap ingin mengubah warna dari sebuah teks.
Untuk menyelesaikan masalah tersebut, the World Wide Web Consortium (W3C) membuat CSS.
Pada HTML 4.0, semua format dokumen (CSS) bisa dihilangkan dari dokumen HTML, dan dipisahkan menjadi 1 dokumen CSS yang terpisah.
Pada saat ini semua browser sudah support CSS.
CSS Menghemat Banyak Pekerjaan!
CSS mendefinisikan BAGAIMANA elemen HTML akan ditampilkan.
Biasanya file css disimpan di luar dari dokumen HTML/ external .css files. External style sheets memungkinkan kita untuk mengganti tampilan layout dari semua halaman website. Dengan hanya mengedit 1 file CSS saja, menakjubkan bukan!
Syntax CSS
Aturan dari CSS sangat lah simpel, aturan ini memiliki 2 bagian utama : selector (yang digunakan untuk menyeleksi bagian mana yang mau di format), dan 1 atau lebih declarations (isi dari format css, bisa menggati warna, ukuran font dll):
Selector diatas akan menyekesi semua tag h1 dan menggati ukuran font menjadi 12px dan warnanya menjadi biru. Hanya dengan 1 baris kode tersebut secara ajaib semua teks yang berada pada tag <h1> akan berubah secara otomatis.
Setiap deklarasi akan berisi property and a value. property adalah atribut dari style yang ingin kamu ubah. Dan setiap atribut akan memiliki nilai, misalnya property font-size: memiliki nilai 12 pixel.
Contoh CSS
Deklarasi CSS selalu diakhiri dengan semicolon/titik koma (;), dan deklarasi dari grup property (apabila ada banyak property) berada didalahm tanda kurung siku {},:
p {color:red;text-align:center;}
Untuk membuat CSS lebih mudah dibaca,kita dapat memisahkan property pada setiap bari, seperti berikut:
Contoh
p
{
color:red;
text-align:center;
}
Komentar pada CSS
Komentar digunakan untuk menjelaskan kode yang dibuat, dan sangat berguna ketika kamu ingin mengedit source codenya. Komentar tidak akan dibaca oleh browser.
Komentar CSS diawali dengan "/*", dan diakhiri dengan "*/", seperti ini:
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
Id (#) and class (.) Selectors
Untuk mengatur style pada elemen HTML, CSS mengijinkan kita untuk membuat sendiri selektor yang sering disebut "id" and "class".
id Selector
Id selector digunnakan untuk mengatur style untuk 1 element tunggal yang unik.
Selektor id menggunakan atribut "id" pada HTML, dan didefinisikan dengan tanda "#" pada CSS.
Contoh
HTML : <div id="header">
Pada file CSS nya #header { properti yang ingin diberikan}
Jangan memmulai nama ID dengan angka/nomor! Karena tidak akan berkerja pada Mozilla/Firefox.
class Selector
Class selektor digunakan untuk menspesifikasikan style dari kumpulan element-element HTML (group elements). Tidak seperti selektor id, selektor class lebih sering digunakan pada beberapa elemen.
Selektor class menggunakan atribut "class" pada HTML, dan didefinisikan dengan tanda "." pada CSS.
Pada contoh berikut, semua elemen HTML dengan class="center" akan menjadi rata tengah:
Example
.center {text-align:center;}
Kamu juga dapat menspesifikasikan elemen mana yang ingin dirubah. Misalnya kita hanya ingin melakukan perubahan pada teks yang berada pada tag <p> dengan class center.
Pada contoh berikut, semua elemen p dengan class="center"akan menjadi rata tengah:
Example
p.center {text-align:center;}
Jangan memulai nama class dengan angka/nomor! Karena ini hanya suport pada internet explorer.
Ketika browser membaca style sheet, maka browser akan memformat document berdasarkan style sheet tersebut.
Tiga cara memasukkan CSS
Ada 3 cara untuk memasukkan style sheet kedalam dokumen HTML:
• External style sheet
• Internal style sheet
• Inline style
External Style Sheet
External style sheet idealnya digunakan untuk mengatur format bebarapa dokumen HTML .dengan external style sheet, kita dapat mengubah format seluruh halaman web dengan mengedit 1 file css saja.setiap halaman harus memberi link ke file css dengan menggunakan tag <link>. Didalam tag <link>masukkan koding berikut:
admin siswa blom bisa edit<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
External style sheet dapat ditulis dengan menggunakan teks editor apa saja.didalam file css tidak tedapat tag HTML. Style sheet seharusnya disimpan dengan ekstensi .css.contoh dari file style sheet seperti berikut:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Jangan gunakan spasi antara property value dan unitsnya! contoh "margin-left:20 px" antar 20 dan px ada spasi (seharusnya "margin-left:20px") ini bekerja di IE, tetapi tidak di Firefox atau Opera.
Internal Style Sheet
Internal style sheet digunakan ketika sebuah dokumen memiliki style yang unik. Kamu mendefinisikan style sheet dibagian <head> pada halaman HTML, dengan menggunakan tag <style>,seprti ini:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Styles
Untuk menggunakan inline styes sheet, kita menggunakan attibut style pada elemen tag HTM L yang ingin diubah style nya. Atribut style dapat berisi : CSS property. contoh berikut menunjukkan bagaimana cara meriubah warna left margin dari paragraf:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Margin dan Padding pada CSS
Margin dan padding merupakan hal yang mirip tetapi berbeda. Fugsi nya sama-sama untuk memberi jarak darisatu elemen ke elemen lainnya untuk merapikan dokumen. Agar lebih jelas lihat gambar.
Jelaslah bahwa padding memberikan jarak antara border dan content ( isi dari elemen tersebut). Sedangkan margin memberikan jarak antara border elemen dengan bagian luar dari elemen
Kita juga dapat melakukan seperti ini
- padding:25px 50px 75px 100px; artinya :
• top padding 25px
• right padding 50px
• bottom padding 75px
• left padding 100px
- padding :25px; berarti semua padding baik top bottom left right bernilai 25px;
source : http://w3schools.com
