Pengenalan dan Penggunaan CSS
Css
singkatan dari cascading style sheet adalah sebuah dokumen yang berisi
style untuk mengatur tampilan suatu halaman website agar lebih menarik
dan interaktif dengan tujuan menarik minat pengunjung. Para desainer web
menggunakan css untuk merapikan tampilan website agar lebih menarik dan
interaktif, dengan mengubah elemen tag html seperti huruf, teks,
background dan gambar.
Css bisa menggantikan fungsi table dalam penyusunan layout halaman web menjadi lebih mudah dan ringkas. Dan css merupakan sebuah style yang mampu berjalan di antara tag html yakni embedded style, perubahan tampilan dari css berpengaruh terhadap tag html yang dibuat.
Untuk membuat sebuah tampilan web yang menarik, dibutuhkan sebuah web editor. Web editor tempat untuk pengetikan tag html dan style css. Contoh aplikasi yang bisa dijadikan web editor seperti notepad, frontpage, dreamweaver. Dalam penulisan buku ini penulis menggunakan aplikasi Adobe Dreamweaver CS3 sebagai web editor dalam pembuatan desain web dengan tag html dan style css.
Berikut tampilan dari jendela Adobe Dreamweaver CS3.
Dalam penulisan style dan tag html, penulis mengajak kamu untuk menulisnya di dalam jendela tab code
Untuk penulisan style css yang bersifat external :
1.Buka dokmen baru dengan cara klik menu File.
2.Pilih New, tampil jendela New Document seperti tampilan berikut:
3.Pada jendela New Document, pada Page Type, kamu pilih css, lalu klik tombol Create,
Kegunaan CSS
Kegunaan css dalam mendesain sebuah halaman web banyak sekali manfaatnya antara lain :
•Penulisan tag html menjadi lebih pendek dan mudah diatur.
•Untuk mengubah susunan layout menjadi lebih mudah, hanya mengganti style css-nya saja.
•Ukuran file html menjadi lebih kecil karena terpisah dengan file css-nya.
•Hampir semua web browser mendukung style css.
Kemudian keuntungan menggunakan css dalam mendesain web adalah sebagai berikut :
•Halaman web bisa diload dengan cepat.
•Mengubah tampilan web menjadi lebih mudah dan cepat, hanya mengubah style dari css-nya.
•Mengubah style menu (link) menjadi lebih dinamis sesuai yang diinginkan.
•Membuat layout dan mengonsepnya menjadi lebih tersusun dan rapi penempatan komponen layoutnya.
Penggunaan CSS
Untuk menggunakan css agar tampilan web menjadi bagus dan menarik maka ada aturan dalam penggunaan css ini dalam tag html yang dibuat.
1.Inline style
Style yang dibuat dalam sebuah tag HTML yang hanya berlaku untuk dokumen yang diapitnya saja.
Sintaks penulisannya :
<p style=”property:value”>teks </p>
Untuk menggunakan style ini buka jendela code adobe dreamweaver kamu, ketik kode berikut :
<head>
<title>style inline css</title>
</head>
<bo
dy> <p style="color:#0000FF; background-color:#FF0000;"> desain web dengan css</p>
<img src="Koala.jpg" style="width=100px; height:100px"/>
</body>
</html>
2.Internal style
Style ini sama seperti inline, dalam satu file html, penulisan style ini diapit oleh tag pembuka <head> dan penutup </head>.
Seperti berikut :
<html>
<hea
d> Style css disini
</head>
<body>
Penulisan pembuka style css internal ini dimulai dengan :
<style type=”text/css”>
Style kode css
</style>
Sintaks penulisan lengkapnya sebagai berikut
<html>
<head>
<style type=”text/css”>
Style kode css
</style>
</head>
<body>
Untuk menggunakan style ini buka jendela code adobe dreamweaver kamu, ketik kode berikut :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>internal style</title>
<style type="text/css">
h2 { font-family:verdana;
color:#0000FF;}
p {font-family:verdana;
font-size:12px;}
</style>
</head>
<body>
<h2>style internal</h2>
<p> style internal sama dengan inline style satu file dengan html, diapit oleh tag head</p>
</body>
</html>
Simpan dengan nama style internal.html, dan jalankan pada browser yang kamu sukai, hasil nya seperti gambar berikut :
Gambar 1.8 tampilan style internal
3.External style
Style ini digunakan untuk memisah file html dengan file css, maksudnya file css berada di luar dari file html. Penempatan style css ini diapit oleh tag <head> </head>, namun pemanggilan file cssnya berbeda menggunakan link seperti berikut :
<head> <link rel=”stylesheet” type=”text/css” href=”file css.css”/>
</head>
Fungsi href inilah yang menghubungkan file html dengan file cssnya. Maka buat file baru untuk menulis kode cssnya. Untuk menggunakan style ini buka jendela code adobe dreamweaver kamu, ketik kode berikut, lalu simpan dengan nama style_external.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>style external</title>
<link rel="stylesheet" type="text/css" href="style external.css" />
</head>
<body>
<h2>style external</h2>
<p> dengan style ini file html menjadi lebih sedikit, dan pengaturan layout lebih mudah</p>
</body>
</html>
Untuk membuat kode cssnya, kamu pilih jendela baru, pada page type pilih css, ketik kode berikut :
h2 { font-family:verdana;
color:#0000FF;}
p {font-family:verdana;
font-size:12px;}
Seperti gambar kode css berikut :
Gambar 1.10 kode style external.css
Simpan dengan nama style_external.css, dan jalankan jendela code html pada browser yang kamu sukai
Aturan Penulisan CSS
CSS memiliki aturan penulisan yang sudah tetap dan sebuah style CSS juga memiliki struktur yang pasti, terdiri dari 2 bagian yaitu Selector dan Declaration.
Sintaks penulisannya :
Penjelasan :
•Selector penamaan suatu elemen style yang mau dirubah atau diterapkan pada tag html untuk merubah tampilan website.
•Property adalah elemen tag html yang mengubah warna, ukuran dan ketebalan garis contoh nya background, font, color.
•Value
Css bisa menggantikan fungsi table dalam penyusunan layout halaman web menjadi lebih mudah dan ringkas. Dan css merupakan sebuah style yang mampu berjalan di antara tag html yakni embedded style, perubahan tampilan dari css berpengaruh terhadap tag html yang dibuat.
Untuk membuat sebuah tampilan web yang menarik, dibutuhkan sebuah web editor. Web editor tempat untuk pengetikan tag html dan style css. Contoh aplikasi yang bisa dijadikan web editor seperti notepad, frontpage, dreamweaver. Dalam penulisan buku ini penulis menggunakan aplikasi Adobe Dreamweaver CS3 sebagai web editor dalam pembuatan desain web dengan tag html dan style css.
Berikut tampilan dari jendela Adobe Dreamweaver CS3.
Dalam penulisan style dan tag html, penulis mengajak kamu untuk menulisnya di dalam jendela tab code
Untuk penulisan style css yang bersifat external :
1.Buka dokmen baru dengan cara klik menu File.
2.Pilih New, tampil jendela New Document seperti tampilan berikut:
3.Pada jendela New Document, pada Page Type, kamu pilih css, lalu klik tombol Create,
Kegunaan CSS
Kegunaan css dalam mendesain sebuah halaman web banyak sekali manfaatnya antara lain :
•Penulisan tag html menjadi lebih pendek dan mudah diatur.
•Untuk mengubah susunan layout menjadi lebih mudah, hanya mengganti style css-nya saja.
•Ukuran file html menjadi lebih kecil karena terpisah dengan file css-nya.
•Hampir semua web browser mendukung style css.
Kemudian keuntungan menggunakan css dalam mendesain web adalah sebagai berikut :
•Halaman web bisa diload dengan cepat.
•Mengubah tampilan web menjadi lebih mudah dan cepat, hanya mengubah style dari css-nya.
•Mengubah style menu (link) menjadi lebih dinamis sesuai yang diinginkan.
•Membuat layout dan mengonsepnya menjadi lebih tersusun dan rapi penempatan komponen layoutnya.
Penggunaan CSS
Untuk menggunakan css agar tampilan web menjadi bagus dan menarik maka ada aturan dalam penggunaan css ini dalam tag html yang dibuat.
1.Inline style
Style yang dibuat dalam sebuah tag HTML yang hanya berlaku untuk dokumen yang diapitnya saja.
Sintaks penulisannya :
<p style=”property:value”>teks </p>
Untuk menggunakan style ini buka jendela code adobe dreamweaver kamu, ketik kode berikut :
<head>
<title>style inline css</title>
</head>
<bo
dy> <p style="color:#0000FF; background-color:#FF0000;"> desain web dengan css</p>
<img src="Koala.jpg" style="width=100px; height:100px"/>
</body>
</html>
2.Internal style
Style ini sama seperti inline, dalam satu file html, penulisan style ini diapit oleh tag pembuka <head> dan penutup </head>.
Seperti berikut :
<html>
<hea
d> Style css disini
</head>
<body>
Penulisan pembuka style css internal ini dimulai dengan :
<style type=”text/css”>
Style kode css
</style>
Sintaks penulisan lengkapnya sebagai berikut
<html>
<head>
<style type=”text/css”>
Style kode css
</style>
</head>
<body>
Untuk menggunakan style ini buka jendela code adobe dreamweaver kamu, ketik kode berikut :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>internal style</title>
<style type="text/css">
h2 { font-family:verdana;
color:#0000FF;}
p {font-family:verdana;
font-size:12px;}
</style>
</head>
<body>
<h2>style internal</h2>
<p> style internal sama dengan inline style satu file dengan html, diapit oleh tag head</p>
</body>
</html>
Simpan dengan nama style internal.html, dan jalankan pada browser yang kamu sukai, hasil nya seperti gambar berikut :
Gambar 1.8 tampilan style internal
3.External style
Style ini digunakan untuk memisah file html dengan file css, maksudnya file css berada di luar dari file html. Penempatan style css ini diapit oleh tag <head> </head>, namun pemanggilan file cssnya berbeda menggunakan link seperti berikut :
<head> <link rel=”stylesheet” type=”text/css” href=”file css.css”/>
</head>
Fungsi href inilah yang menghubungkan file html dengan file cssnya. Maka buat file baru untuk menulis kode cssnya. Untuk menggunakan style ini buka jendela code adobe dreamweaver kamu, ketik kode berikut, lalu simpan dengan nama style_external.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>style external</title>
<link rel="stylesheet" type="text/css" href="style external.css" />
</head>
<body>
<h2>style external</h2>
<p> dengan style ini file html menjadi lebih sedikit, dan pengaturan layout lebih mudah</p>
</body>
</html>
Untuk membuat kode cssnya, kamu pilih jendela baru, pada page type pilih css, ketik kode berikut :
h2 { font-family:verdana;
color:#0000FF;}
p {font-family:verdana;
font-size:12px;}
Seperti gambar kode css berikut :
Gambar 1.10 kode style external.css
Simpan dengan nama style_external.css, dan jalankan jendela code html pada browser yang kamu sukai
Aturan Penulisan CSS
CSS memiliki aturan penulisan yang sudah tetap dan sebuah style CSS juga memiliki struktur yang pasti, terdiri dari 2 bagian yaitu Selector dan Declaration.
Sintaks penulisannya :
Penjelasan :
•Selector penamaan suatu elemen style yang mau dirubah atau diterapkan pada tag html untuk merubah tampilan website.
•Property adalah elemen tag html yang mengubah warna, ukuran dan ketebalan garis contoh nya background, font, color.
•Value
