Salam NewGen kali ini saya akan mengeshare tentang dasar-dasar CSS dalam
pembuatan website, dengan belajar Code CSS ini kita akan dapat memper indah,
membuat web kita menarik dan rapih... langsung saja disimak ya...
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).
Didalam dunia design 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
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
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.
Gambar dibawah ini adalah dasar-dasar dari pengaturan / format posisi
dengan css:
Margin –> jarak/batas elemen dengan elemen lain
Border –> border/gari tepi elemen
Padding–> jarak elemen dengan isi elemen (elemen anak)
Berikut gambar dibawah adalah format standar untuk membuat tampilan dengan
CSS:
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>
<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>
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
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.
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 : www.cmsplaza.com
No comments:
Post a Comment