CSS3 - CSS tutorial - CSS HTML - CSS
style
CSS
Cascading Style Sheet (CSS)
merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga
akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Pada umumnya CSS
dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat
mengendalikan ukuran gambar, warna bagian tubuh
pada teks, warna tabel,
ukuran border, warna border, warna hyperlink,
warna mouse
over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas,
bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan
kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Versi CSS
Untuk saat ini
terdapat tiga versi CSS, yaitu CSS1, CSS2 dan CSS3. CSS1
dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk
memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer,
sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal
dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable,
huruf font, tampilan pada tabel /table layout dan media tipe untuk printer.
Kehadiran versi CSS yang ketiga diharapkan lebih baik dari versi pertama dan
kedua.
CSS3
CSS3 juga dapat
melakukan animasi pada halaman website, di antaranya animasi warna hingga
animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas
websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain
itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius,
drop-shadow, border-image, CSS Math, dan CSS Object Mode
CSS HTML
Bagaimana kita membedakan tiap versi HTML
Untuk dapat melihat
versi apa yang digunakan sebuah weblog, itu dapat terlihat dari
doctype
yang digunakan pada bagian atas (klik kanan pada halaman kemudian “view page
source”).
contoh:
XHTML 1.0
Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 5 (lebih simpel
dari doctype lainnya):
<!DOCTYPE html>
Struktur
Dokumen HTML
Struktur dokumen HTML dimulai
dari doctype sebagai deklarasi jenis HTML yang digunakan, kemudian di
dalam HTML terdapat elemen head dan body.
Contoh sebagai berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> "Judul Weblog" </title>
</head>
<body>
<h1>"Heading"</h1>
<p>"Paragraph"</p>
</body>
</html>
Apabila kita lihat kode diatas,
bahwa didalam head itu bisa kita masukkan, title, meta, stylesheet, dan
juga script. Sedangkan bagian body adalah stuktur dari halaman yang akan
dikembangkan, yang berisi informasi di dalam halaman web, baik itu di bagian
header, navigasi, post, sidebar dan footer, dengan tag tertentu seperti<h1>
dan <p>, dan lainnya.
Gambaran umum struktur dari
elemen head sebagai berikut:
<head>
<title>Judul Weblog</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<link rel="stylesheet"
href="/styles.css" type="text/css" media="all"
/>
<script type="text/javascript"
src="/javascript.js"></script>
</head>
Gambaran umum struktur dari
elemen body sebagai berikut :
<body>
<div id="header">
<h1>"Judul Blog"</h1>
</div>
<div id="nav">
<ul>
<li>Beranda</li>
<li>Tentang</li>
</ul>
</div>
<div id="post">
<h2>"Judul Postingan"</h2>
<p>"Paragraph dari isi postingan"</p>
</div>
<div id="sidebar">
<h3>"Judul Sidebar"</h3>
<ul>
<li>List 1</li>
<li>List 2</li>
</ul>
</div>
<div id="footer">
<p>Paragraph Credit</p>
</div>
</body>
Untuk HTML5,
pengunaan div semakin berkurang, misal <div
id="header"> bisa diganti atau diwakili dengan <header>, <div
id="nav"> menjadi <nav>, <div
id="post"> menjadi <article>, <div
id="sidebar"> menjadi <aside>, <div
id="footer"> menjadi <footer>.
Demikian garis besar gambaran
struktur bahasa ‘markup’ HTML.
Garis
Besar Bahasa ‘Stylesheet’ / CSS
CSS adalah suatu bahasa stylesheet
yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa
markup.
Seperti pengertian diatas, fungsi
dari bahasa stylesheet adalah untuk menata dan mempecantik tampilan dari bahasa
‘markup’ /HTML, baik berupa warna, jenis huruf, tata letak, dan lainnya. Tanpa
CSS atau sekedar HTML, sebuah halaman web hanya tersusun kebawah dengan
background putih, tulisan hitam dan link berwarna biru. Nah dengan CSS ini yang
akan menata halaman HTML tersebut, atau memperjelas bagian tiap elemen HTML,
misal ‘header’, ‘content’, ’sidebar’ dan ‘footer’.
Bahasa stylesheet juga mengalami
pengembangan versi atau level, sama seperti halnya HTML. Level terbaru dari CSS
kini yaitu CSS3. CSS3 juga memiliki pengembangan baru yang
fenomenal, yang semakin membuat sebuah halaman terlihat semakin lebih kreatif
dan bergaya. Dengan adanya CSS3 ini mungkin suatu saat, jika semua browser atau
perambah sudah mengadopsi, penggunaan image dan javascript akan sedikit
berkurang.
Penempatan
Elemen Style CSS
Pada pembahasan diatas mengenai
HTML, bahwa elemen ’style’ ditempatkan dibagian ‘head’. Ada dua cara penempatan
elemen ’style’ ini, yaitu secara eksternal atau internal (ditanam langsung)
Secara eksternal, maksudnya disini file CSS tersebut terpisah atau
tersendiri dengan file HTML, dan cara memanggil kode CSS tersebut dengan
tag <link>. sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title> "Judul Weblog"
</title>
<link type="text/css"
rel="stylesheet" href="style.css" media="all">
</head>
<body>
</body>
</html>
Secara internal, maksudnya disini kode CSS langsung ditanam dengan
menggunakan elemen style, sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title> "Judul Weblog" </title>
<style type="text/css">
body
{background:#fff;}
</style>
</head>
<body>
</body>
</html>
Cara membaca body
{background:#fff;}, body ’selektor’ dari elemen HTML yang kan diberikan
style,background adalah ‘property’, sedangkan #fff adalah ‘value’. Peran
dari property dan value ini yang akan menata dan mempercantik tiap elemen HTML.
Penulisan
CSS untuk memberikan style elemen HTML
Setiap elemen HTML dalam penulisan
CSS akan diterjemahkan sebagai berikut:
tag berikut <body>, <p>, <span>, <ul>, <li>, <h1>,
dll, penulisan CSS sekedar ‘body’, ‘p’, ’span’, ‘ul’, ‘ol’, ‘li’, h1′.
Sedangakan, tag dengan <div>, seperti <div id="
"> penulisan CSS adalah ‘#’ (pagar) dan <div class="
"> penulisan CSSnya adalah ‘.’ (titik).
Contoh
<div id="content">
<h2>Judul
Postingan</h2>
<div class="post">
<p>paragraph 1</p>
<ul>
<li>List1</li>
<li>list2</li>
</ul>
<p>paragraph2</p>
</div> <!--end div post -->
</div> <!-- end div content -->
Maka penulisan kode CSSnya sebagai
berikut:
#content {float:left;}
#content h2 {font-syze:18px;}
.post {letter-spacing:0.2px;}
.post p {line-height:14px;}
.post ul {list-style:circle; margin-left:20px;}
.post li {padding:5px;}
Jenis
Media CSS
Dalam pengembangan style CSS
disebuah halaman pun idealnya dibuat perbedaan jenis medianya. Ada beragam
jenis media ini, tapi yang umum atau lazim digunakan adalah media ‘screen‘,
‘print‘ dan ‘handheld‘. Jadi ada perbedaan tampilan halaman
weblog kita untuk layar monitor komputer (screen), tampilan hasil cetak
(print), serta tampilan pada small screen seperti halnya handphone (handheld).
Pada media ‘print’ dan ‘handheld’
tentunya harus dibuat lebih sederhana dari media ’screen’. Media print,
layaknya sebuah hasil cetak print pada kertas umumnya. background putih, warna
text hitam, pernak pernik blog tidak perlu ditampilkan, lebih hanya berupa
artikel blog, yang berisi judul dan isi. Cara mengetes media print ini adalah
lewat “print preview” pada file browser anda.
Contoh penulisan untuk membedakan
tiap media:
@media print {
body { font-size:
10pt }
}
@media screen {
body { font-size:
13px }
}
@media handheld {
body { font-size:
12px }
}
@media screen, print {
body {
line-height: 1.2 }
}
Berikut ini 4 contoh penulisan jenis
media CSS:
<link rel="stylesheet"
type="text/css"
media="print"
href="print.css">
<style media="print"> ... </style>
@media print { p { font-size: 14pt;} }
@import url("print.css") print;
Demikian garis besar gambaran
penggunaan bahasa “stylesheet” / CSS. Jika anda kemudian ingin mengecek atau
menguji bahwa penulisan bahasa “stylesheet” anda telah baik dapat menggunakan
CSS.
CSS tutorial
Para sahabat...
Jika Para sahabat mau
bisa membuat website secara profesional. maka disinilah para
sahabat bisa mengali ilmu secara gratis. Karena Penulis akan membahas
semua materi pembuatan website di dalam blog ini.
Catatan :
silahkan lihat daftar
isi materi membuat website, silahkan klik disini.
Demikian informasinya, semoga dapat bermanfaat untuk para sahabat.
