Cascading Style
Sheet atau yang disingkat CSS memungkinkan untuk mendesain (style) tampilandokumen (Php dan HTML) dengan memisahkan isi dari dokumen HTML dengan kode untukmenampilkannya (CSS).
Didalam dunia desain web,
layout atau mengatur letak web,
format huruf, dan lain nyayang 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 bisadisebabkan karena setiap browser memilliki dukungan bahasa(CSS)
yang berbeda dantentunya default dari browsernya sendiri yang berbeda-beda.
Browser yang
paling rewelsoal layout css adalah IE karena kurang dukungannya terhadap CSS.
Jika kita memiliki banyak file
HTML, kita hanya perlu satu file
CSS, sehingga ketika kitamengganti 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 sebuahlayout halaman web yaitu:
1. Metode Table
2. Metode Div
Manfaat dari CSS:
1.
Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
2.
Ukuran file menjadi lebih kecil, sehingga load
file lebih cepat,
3.
Mudah untuk merubah tampilan, hanya dengan merubah
file CSS saja,
4.
Dapat berkolaborasi
dengan JavaScript.
5.
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
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.
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:
1.
External Style Sheet (file
CSS berbeda dari file HTML),
2.
Internal Style Sheet
(Kode CSS dipasang di dalam tag head HTML)
3.
Inline Style Sheet
(Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).
Saya sarankan anda menggunakan cara External Style
Sheet karena lebih mudah dalammengelolanya. Disini
saya akan menerangkan dasar-dasar CSS. Langsung
saja kita cobakode 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>
</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
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> sajabagian yang didalam <head> tidak usah diapa-apakan.
Untuk memanggil CSS dalam tag
HTML kita perlu menggunakan atribut
class untukmemanggil CSS selector (dalam contoh diatas
selectornya title dan thank). Dengan demikian
apabila semua halaman anda memanggil class
title, dan jika anda
ingin menggantifont 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.
Link
Adalah 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;
ont-family: Time
color: #C87C28;
fs New Roman;
: none;
}
a.link1:visi
text-decoratio
nted {
font-weight: bold;
C6600;
font-fami
font-size: 12px;
color: #
Cly: Times New Roman;
}
a.link1:hover {
font
text-decoration: none;
-weight: bold;
-family: Times Ne
font-size: 12px;
color: #C87C28;
fon
tw Roman;
text-decoration: underline
}
a.link1:active {
nt-family: Times Ne
font-weight: bold;
font-size: 12px;
color: #C87C28;
f
ow Roman;
text-decoration: none;
}
a.link2:link {
font-weight: bold;
serif;
text-deco
font-size: 12px;
color: #663300;
font-family: Arial, Helvetica, sans
-ration: underline;
}
a.link2:visited {
font-weight: bold;
font-size: 12px;
none;
}
a.link2:
color: #800000;
font-family: Arial, Helvetica, sans-serif;
text-decoration:
hover {
font-weight: bold;
font-size: 12px;
color: #ff6600;
erline overline;
}
a.link2:active {
font-we
font-family: Arial, Helvetica, sans-serif;
text-decoration: un
dight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}
Selamat Mengerjakan.
trmksh artikelnya gan dlm mempercantik Website dg CSS, Absolute berguna sbgai untuk mngtr posisi elemen berpatokan pada jendela browser.
BalasHapusKunjungi website sy ya: https://yuliyani.mahasiswa.atmaluhur.ac.id
Dan kunjungi website kmps sy: http://www.atmaluhur.ac.id