Belajar dan Memahami Dasar-dasar Code CSS | Malam yang boring dan sakit kepala,saya susah mikir tentang tugas web yang di sekolah, sampe kehabisan akal.. dan besok harus selesai lagi webnya.. 2 web dalam 1 hari -_- sungguh cape, oh hehe malah curcol :x ,langsung aja nih ,saya posting tentang CSS.Cascading
Style Sheet atau yang disingkat CSS memungkinkan untuk mendesain
(style) tampilan dokumen (Php dan HTML) dengan memisahkan isi dari
dokumen HTML dengan kode untuk menampilkannya (CSS). Di dalam dunia
desain web, layout atau mengatur letak web, format huruf, dan lain nya
yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa
jadi yang paling lama dibanding dengan bagain desain web lainnya.
Karena jika kita membua layout yang salah, maka web kita juga akan
salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena
setiap browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya
default dari browsernya sendiri yang berbeda-beda. Browser yang paling
rewel soal layout css adalah IE karena kurang dukungannya terhadap
CSS.
Jika
kita memiliki banyak file HTML, kita hanya perlu satu file CSS,
sehingga ketika kita mengganti jenis huruf pada file CSS maka semua
file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS
distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang
pada dikumen HTML yang telah jadi. Dalam melayout sebuah web ada dua
metode yang sering dipakai untuk membuat sebuah layout halaman web
yaitu:
1. Metode Table
2. Metode Div
2. Metode Div
Manfaat dari CSS:
- Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
- Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
- Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
- Dapat berkolaborasi dengan JavaScript.
- Digunakan dalam hampir semua web browser.
Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:
Header –> berisi tema web/ judul
Menu –> menu link web
Content –> isi dari web
Footer –> identitas/ copyright
Menu –> menu link web
Content –> isi dari web
Footer –> identitas/ copyright
Atribut ID
Ada dua cara penempatan elemen dalam web dengan CSS yaitu:
1. Position (Posisi)
Mengunakan properti position terdapat 4 cara:
- Static –> posisi normal (default).
- Relative –> posisi elemen tergantung dari elemen yang lain.
- Absolute –> posisi elemen berpatokan pada jendela browser.
- Fixed –> posisi elemen tetap walaupun digeser.
2. Float (Nempel)
Menggunakan properti float atau clear:
- Float:left –> elemen akan menempel pada sebelah kiri elemen induk.
- Float:right –> elemen akan menempel pada sebelah kanan elemen induk.
- Clear:left –> elemen akan menempel pada sebelah kiri dan berada di bawah.
- Clear:right –> elemen akan menempel pada sebelah kanan dan berada dibawah
- Clear:both –> elemen akan berada pada posisi bawah elemen diatasnya.
Margin –> jarak/batas elemen dengan elemen lain
Border –> border/gari tepi elemen
Padding–> jarak elemen dengan isi elemen (elemen anak)
contoh penulisan css :
<html>
<head>
<style type = “text/css”>
#header {
width:900px;
height:50px;
border: 1px solid #640404;
}
#headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
#headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
<h1>Sample</h1>
<div id = “header”>
<div id=”headerLeft”>Header Left</div>
<div id=”headerRight”>Header Right</div>
</div>
</body>
</html>
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:
- External Style Sheet (file CSS berbeda dari file HTML),
- Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
- 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:
Penempatan CSS dalam HTML
Internal CSS
Metode penulisan kode CSS langsung dalam file HTML. contoh:
<html></body>
<head>
<style type = “text/css”>
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
</html>
Eksternal CSS
file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”public.css”/>
</head>
<body>
</body>
</html>
Inline CSS
Penulisan kode CSS dalam tag HTML. contoh:
<html>
<head>
</head>
<div style=”background-color:#999999; text-align:center;”>Inline CSS</div>
</body>
</html>
Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css. Di dalam 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.
Untuk
memanggil CSS dalam tag HTML kita perlu menggunakan atribut class
untuk memanggil CSS selector (dalam contoh diatas selectornya title dan
thank). Dengan demikian apabila semua halaman anda memanggil class
title, dan jika anda ingin mengganti font untuk semua halaman anda
cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham
kegunaan CSS.
CSS
memiliki ratusan properties dan values, tentu saja saya tidak akan
menerangkan semuanya, saya hanya akan menerangkan yang penting-penting
saja.
Tidak
semua browser dapat menampilkan jenis huruf yang kita spesifikasikan
didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis
huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat
menggunakan property
font-family, yang mirip dengan tag <font>.
Sebagai
contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya
Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling
spesifik sampai yang umum, sehingga jika browser tidak mengenal
fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih
jelasnya lihat bkode berikut:
<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>
Link
Salah
satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap
link, menghilangkan garis bawah pada link sehingga jika anda bosan
dengan link yang berwarna biru tua terang dengan garis bawah anda dapat
mengubahnya.
Coba kode CSS berikut:
a.link1:link {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:visited {
font-weight: bold;
font-size: 12px;
color: #CC6600;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:hover {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: underline
}
a.link1:active {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link2:link {
font-weight: bold;
font-size: 12px;
color: #663300;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}
a.link2:visited {
font-weight: bold;
font-size: 12px;
color: #800000;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
a.link2:hover {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline overline;
}
a.link2:active {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}
Sumber : http://www.maskolis.com/
