Pengenalan CSS & Kumpulan Tag CSS Pengenalan CSS A. Sejarah Singkat CSS Pada tanggal 17 Desember 1996, World Wide Web Consortium (W3C) menjadikan CSS sebagai bahasa pemrograman standard dalam pembuatan dokumen web. Tujuannya adalah mengurangi pembuatan TAG-TAG baru oleh Netscape dan Internet Explorer (IE), karena pada masa itu keduabrowser saling bersaing mengembangkan TAG sendiri untuk mengatur tampilan web. CSS level 1 mendukung pengaturan tampilan dalam hal: 1. Font (jenis, ketebalan), 2. Warna teks, latar belakang, dan elemen lainnya, 3. Text attributes, misalnya spasi antar baris, kata, dan huruf, 4. Posisi text, gambar, tabel, dan elemen lainnya, 5. Marjin, border, dan padding, Selanjutnya di tahun 1998, W3C menyempurnakan CSS awal dengan menciptakan standard CSS2 (CSS level 2) – yang menjadi standard hingga saat ini. Pada CSS level 2 ini, di masukkan semua atribut dari CSS1, serta diperluas dengan penekanan pada International accesibility and capability khususnyamedia-specific CSS. Bahkan pada perkembangannya, saat ini sudah muncul CSS3. Pekerjaan dari CSS3dimulai pada tahun 2000, tidak lama setelah CSS2 di implementasikan. CSS3 ini sampai sekarang masih terus dikembangkan, spesifikasinya dibagi pada beberapa topik atau modul.
50
Embed
Web viewPengenalan CSS & Kumpulan Tag CSS. Pengenalan CSS. A. Sejarah Singkat CSS. Pada tanggal 17 Desember 1996, World Wide Web Consortium (W3C) menjadikan CSS
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Pengenalan CSS & Kumpulan Tag CSS
Pengenalan CSS
A. Sejarah Singkat CSS
Pada tanggal 17 Desember 1996, World Wide Web Consortium (W3C) menjadikan CSS sebagai bahasa pemrograman standard dalam pembuatan dokumen web. Tujuannya adalah mengurangi pembuatan TAG-TAG baru oleh Netscape dan Internet Explorer (IE), karena pada masa itu keduabrowser saling bersaing mengembangkan TAG sendiri untuk mengatur tampilan web.
CSS level 1 mendukung pengaturan tampilan dalam hal:1. Font (jenis, ketebalan),2. Warna teks, latar belakang, dan elemen lainnya,3. Text attributes, misalnya spasi antar baris, kata, dan huruf,4. Posisi text, gambar, tabel, dan elemen lainnya,5. Marjin, border, dan padding,
Selanjutnya di tahun 1998, W3C menyempurnakan CSS awal dengan menciptakan standard CSS2 (CSS level 2) – yang menjadi standard hingga saat ini. Pada CSS level 2 ini, di masukkan semua atribut dari CSS1, serta diperluas dengan penekanan pada International accesibility and capability khususnyamedia-specific CSS.
Bahkan pada perkembangannya, saat ini sudah muncul CSS3. Pekerjaan dari CSS3dimulai pada tahun 2000, tidak lama setelah CSS2 di implementasikan. CSS3 ini sampai sekarang masih terus dikembangkan, spesifikasinya dibagi pada beberapa topik atau modul.
B. Pengertian & Manfaat CSS
Menurut Wikipedia, Cascading Style Sheets (CSS) adalah:“bahasa pemrograman untuk mengatur tampilan suatu website atau blog”
Tampilan yang dimaksud disini adalah jenis, ukuran, dan warna font; jarak antara baris dan panjangnya, marjin dan indentasi, background dan warna, serta masih banyak lagi. CSS merupakan fitur yang sangat penting dalam pembuatan Dynamic HTML. Meskipun bukan merupakan keharusan dalam membuat web, namun penggunaan CSS merupakan kelebihan tersendiri.
Menggunakan CSS tidak memerlukan perangkat lunak tertentu, karena merupakan script yang telahembedded dengan HTML. Anda cukup menggunakan aplikasi notepad untuk menciptakan script CSS sendiri.
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 dan merupakan pasangan setia XHTML,
5. Digunakan dalam hampir semua web browser.
C. Sintaks & Penempatan Kode CSS
Sintaks CSS terdiri dari tiga bagian: selector
property
value
Selector adalah elemen atau tag HTML yang akan di-definisi-kan.
Property adalah atribut yang akan diganti dengan “nilai” tertentu. Properti dan nilai dipisahkan dengan tanda titik dua (:) dan keduanya diapit oleh tanda kurung kurawal ({).
Berdasarkan ketiga bagian tersebut, sintaks dasar CSS dapat dituliskan:
Jika suatu nilai mengandung spasi, nilai tersebut harus diapit dengan tanda petik (“). Untuk memberikan lebih dari satu roperty bagi suatu roperty, pisahkan setiap kombinasi “property:value” dengan tanda titik koma (;). Untuk membuat definisi gaya lebih mudah dibaca, definisi tiap propertydapat dilakukan per baris. Sehingga sintaksnya menjadi:
Aturan-aturan yang berlaku dalam sintaks CSS:1. Jangan ada spasi antara property value dengan unitnya (contoh 1 & 2),
2. Nama properti bersifat CASE SENSITIVE dan menggunakan huruf kecil,
3. Jika nilai / value lebih dari satu kata, maka gunakan tanda titik koma (;) untuk membatasi properti yang satu dengan yang lain (contoh 2),
4. Jika selector lebih dari satu dan mempunyai properti dan nilai yang sama, gunakan tanda koma (,).
contoh: h1,h2,h3 {color:green}
Class selectorDengan menggunakan class selector, Anda dapat mendefinisikan
perbedaan style untuk tag elemen html yang sama.contoh 3:
Misalkan Anda ingin membuat dua tipe paragraf dalam dokumen, yang satu rata kanan, dan yang lain rata kiri. Maka:
p.right {text-align: right}dan
p.left {text-align: left}Aturan Class selector:
1. Jangan memberi nama class dengan angka,
2. Jika memberikan nama class lebih dari satu kata/kalimat, penulisannya menggunakan tanda petik (“).
Atribut IDAturan penamaan ID:
1. Dapat mengandung huruf, angka, atau karakter garis bawah,
2. Karakter pertama harus berupa huruf atau karakter garis bawah,
3. Diawali dengan tanda #,
4. Jangan memberi nama id sama dengan value,
5. Jangan memberi nama id dengan tag html kemudian diikuti tanda #.
contoh 4:
<html>
<head>
<style type = "text/css">
<!--
#tebal { font-weight : bold;
color : blue; }
#miring { font-style : italic;
color: pink; }
-->
</style>
</head>
<body>
<h1>Contoh</h1>
<h2 id = "miring">
The quick brown fox jumps over the lazy dog
</h2>
<h3 id = "tebal">
And then it falls into the well
</h3>
</body>
</html>
Penempatan kode CSS dalam HTMLAda tiga cara penempatan kode CSS dalam HTML:
1. Internal CSS
Metode penulisan kode CSS langsung dalam file HTML. contoh:
<html>
<head>
<style type=”text/css”>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Menguak Rahasia CSS</p>
</body>
</html>
2. Eksternal CSS
Memanggil file CSS dari tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan file HTML. Browser akan membaca definisi style dari file test.css dan akan mengikuti format tersebut. Eksternal style ditulis di text editor lain dengan ekstention .css. contoh:
“One of the best ways to learn CSS is to jump right in and start to get into the page layouts.”
~ www.css-mastery.com ~
Pada bab kedua ini, kumpulan tag CSS beserta contoh-contoh penggunaannya pada beberapa bagian. Berikut ini adalah table-tabel properti dan ‘nilai’ dari CSS:
a. Text
Property Deskripsi Values
color Mengeset warna teks color
direction Mengeset arah teks ltr
rtl
line-height Mengeset jarak antar garis normal
number
length
%
letter-spacing Menambah atau mengurangi jarak
antar karakter
normal
length
text-align Mengatur teks agar rata kanan,
kiri, tengah, atau kanan-kiri pada
elemen
left
right
center
justify
text-decoration Menambah dekorasi pada teks none
underline
overline
line-through
blink
text-indent Mengindentasikan baris pertama
teks pada elemen
length
%
text-shadow none
color
length
text-transform Mengontrol huruf pada elemen none
capitalize
uppercase
lowercase
unicode-bidi normal
embed
bidi-override
white-space Mengeset bagaimana ruang putih
di dalam elemen ditangani
normal
pre
nowrap
word-spacing Menambah atau mengurangi jarak normal
catatan: Warna ‘ke sini’ akan berubah saat Anda mengarahkan kursor ke atasnya.
l. Dimension
Property Deskripsi Values
height Mengeset tinggi dari sebuah
elemen
auto
length
%
line-height Mengeset jarak antar garis pada
elemen
normal
number
length
%
max-height Mengeset tinggi maksimal dari
elemen
none
length
%
max-width Mengeset lebar maksimal dari
elemen
none
length
%
min-height Mengeset tinggi minimal dari
elemen
length
%
min-width Mengeset lebar minimal dari
elemen
length
%
width Mengeset lebar dari suatu elemen auto
%
length
M. Generated Content
Property Deskripsi Values
content Membuat konten dalam
dokumen. Digunakan bersama
string
pseudo-element :before dan :after url
counter(name)
counter(name, list-style-type)
counters(name, string)
counters(name, string, list-
style-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote
counter-increment Mengeset berapa banyak suatu
counter menambahkan pada tiap
aksi pada selektor
none
identifier number
counter-reset Mengeset nilai yang counter set
pada tiap aksi pada selektor
none
identifier number
quotes Mengeset tipe dari quote none
string string
n. Outlines
Property Deskripsi Values
outline Mengeset semua properti untuk
outline dalam satu deklarasi
outline-color
outline-style
outline-width
outline-color Mengeset warna dari outline
elemen
color
invert
outline-style Mengeset style outline dari
elemen
none
dotted
dashed
solid
double
groove
ridge
inset
outset
outline-width Mengeset ketebalan outline dari
elemen
thin
medium
thick
length
CSS Untuk Huruf
Huruf Tebal :font-weight:bold;
Keterangan :
bold bisa di ganti dengan nominal. Contoh : 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900
Mengganti Karakter Tulisan :Font-family:arial;
Keterangan :
arial bisa di ganti dengan karakter tulisan lainnya. Contoh : Times New Roman / Square721 BT/ Lucida Sans Unicode / dan lain lain..
Mengganti Ukuran Font/Tulisan :Font-size:12px;
Keterangan :
12px bisa di ganti dengan nominal lainnya.. semakin besar nominalnya akan semakin besar ukuran
tulisannya. Contoh : 14px / 15px / 16px / 17px / 18px / dan lain lain..
Mengganti Style Tulisan :Font-Style:italic;
Keterangan :
italic bisa di ganti dengan kode lainnya. Contoh : normal / obliqueitalic adalah huruf miring.
oblique adalah huruf miring.
normal adalah huruf normal.
Cara Transform Tulisan :text-transform:capitalize;
Keterangan :
capitalize bisa di ganti dengan kode lainnya. Contoh : uppercase / lowercasecapitalize adalah huruf kapital.
uppercase adalah huruf besar semua.
lowercase adalah huruf kecil semua.
Cara Mengganti Warna Text : color:#FF0000;
Keterangan :
#FF0000 adalah kode warna (Warna Merah).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode
warna disini.
Cara Mengganti Dekorasi Text :text-decoration:underline;
Keterangan :
underline bisa di ganti dengan kode lainnya. Contoh : overline / line-through / blinkunderline adalah text garis bawah.
overline adalah text garis atas.
line-through adalah text garis tengah.
blink adalah text berkedip.
Merubah Posisi Text/Tulisan :text-align:center;
Keterangan :
center adalah text rata tengah, anda bisa menggantinya dengan kode lainnya. Contoh : left / rightleft adalah text rata kiri.
right adalah text rata kanan
*CSS Untuk Background
Background Dengan Warna Biasa :background:#FF0000;
Keterangan :
#FF0000 adalah kode warna (Warna Merah).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode
warna disini.
Background Dengan Gambar :background-image:url("https://1.bp.blogspot.com/-y5sI87RkxLg/Vm9pmy3yJDI/AAAAAAAAB3w/PTx5p9u_lrI/s320/css.png");
Keterangan :
https://1.bp.blogspot.com/-y5sI87RkxLg/Vm9pmy3yJDI/AAAAAAAAB3w/PTx5p9u_lrI/s320/css.png adalah url gambar, anda bisa menggantinya dengan url gambar lainnya.
Cara Mengubah Posisi Background :background-image:url("https://1.bp.blogspot.com/-y5sI87RkxLg/Vm9pmy3yJDI/AAAAAAAAB3w/PTx5p9u_lrI/s320/css.png") no-repeat right top;
Keterangan :
https://1.bp.blogspot.com/-y5sI87RkxLg/Vm9pmy3yJDI/AAAAAAAAB3w/PTx5p9u_lrI/s320/css.png adalah url gambar.
right adalah posisi gambar secara horizontal, anda bisa menggantinya dengan : left / center.top adalah posisi gambar secara vertikal, anda bisa menggantinya dengan : bottom / center.
*CSS Untuk Border & Table
Mengganti Warna Borderborder-color:#FF0000;
Keterangan :
#FF0000 adalah kode warna (Warna Merah).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode
warna disini..
Mengganti Ukuran Borderborder:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Membuat Border Untuk Bawahborder-bottom:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Membuat Border Untuk Atasborder-top:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Membuat Border Untuk Kiriborder-left:1px;
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Membuat Border Untuk Kananborder-right:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Mengganti Type Borderborder:dotted;
Keterangan :
dotted adalah kode type border, anda bisa menggantinya dengan kode lainnya.
Contoh : Solid / dashed / double / groove / ridge / inset / outsetUntuk Keterangan type border 1 Per 1 saya tidak bisa menyebutkan semua :D , anda bisa
mengEksperimen sendiri. :D
Membuat Type Border Solid + Warna Border Kuning + Ukuran 5pxborder: solid #EBFF00 5px;
Keterangan :
solid adalah Type Border .. anda bisa mengganti dengan type laninnya.
#EBFF00 adalah kode warna (Warna Kuning).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode
warna disini..5px Ukuran Border, anda bisa menggantinya dengan nominal laninnya.
*CSS Untuk Ukuran
Mengganti Ukuran Lebar Biasa :Width:500px;
Keterangan :
500px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Lebar Minimal :Min-width:200px;
Keterangan :
200px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Lebar Maxsimal :Max-width:1000px;
Keterangan :1000px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Tinggi Biasa :Height:500px;
Keterangan :500px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Tinggi Minimal :Min-height:200px;
Keterangan :200px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Tinggi Maxsimal :Max-height:1000px;
Keterangan :500px bisa di ganti dengan nominal lainnya.
CSS Untuk Huruf
Huruf Tebal :font-weight:bold;
Keterangan :
bold bisa di ganti dengan nominal. Contoh : 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900
Mengganti Karakter Tulisan :Font-family:arial;
Keterangan :
arial bisa di ganti dengan karakter tulisan lainnya. Contoh : Times New Roman / Square721 BT/ Lucida Sans Unicode / dan lain lain..
Mengganti Ukuran Font/Tulisan :Font-size:12px;
Keterangan :
12px bisa di ganti dengan nominal lainnya.. semakin besar nominalnya akan semakin besar ukuran
tulisannya. Contoh : 14px / 15px / 16px / 17px / 18px / dan lain lain..
Mengganti Style Tulisan :Font-Style:italic;
Keterangan :
italic bisa di ganti dengan kode lainnya. Contoh : normal / obliqueitalic adalah huruf miring.
oblique adalah huruf miring.
normal adalah huruf normal.
Cara Transform Tulisan :text-transform:capitalize;
Keterangan :
capitalize bisa di ganti dengan kode lainnya. Contoh : uppercase / lowercasecapitalize adalah huruf kapital.
uppercase adalah huruf besar semua.
lowercase adalah huruf kecil semua.
Cara Mengganti Warna Text : color:#FF0000;
Keterangan :
#FF0000 adalah kode warna (Warna Merah).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode
warna disini.
Cara Mengganti Dekorasi Text :text-decoration:underline;
Keterangan :
underline bisa di ganti dengan kode lainnya. Contoh : overline / line-through / blinkunderline adalah text garis bawah.
overline adalah text garis atas.
line-through adalah text garis tengah.
blink adalah text berkedip.
Merubah Posisi Text/Tulisan :text-align:center;
Keterangan :
center adalah text rata tengah, anda bisa menggantinya dengan kode lainnya. Contoh : left / rightleft adalah text rata kiri.
right adalah text rata kanan
*CSS Untuk Background
Background Dengan Warna Biasa :background:#FF0000;
Keterangan :
#FF0000 adalah kode warna (Warna Merah).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode
warna disini.
Background Dengan Gambar :background-image:url("https://1.bp.blogspot.com/-y5sI87RkxLg/Vm9pmy3yJDI/AAAAAAAAB3w/PTx5p9u_lrI/s320/css.png");
Keterangan :
https://1.bp.blogspot.com/-y5sI87RkxLg/Vm9pmy3yJDI/AAAAAAAAB3w/PTx5p9u_lrI/s320/css.png adalah url gambar, anda bisa menggantinya dengan url gambar lainnya.
Cara Mengubah Posisi Background :background-image:url("https://1.bp.blogspot.com/-y5sI87RkxLg/Vm9pmy3yJDI/AAAAAAAAB3w/PTx5p9u_lrI/s320/css.png") no-repeat right top;
Keterangan :
https://1.bp.blogspot.com/-y5sI87RkxLg/Vm9pmy3yJDI/AAAAAAAAB3w/PTx5p9u_lrI/s320/css.png adalah url gambar.
right adalah posisi gambar secara horizontal, anda bisa menggantinya dengan : left / center.top adalah posisi gambar secara vertikal, anda bisa menggantinya dengan : bottom / center.
*CSS Untuk Border & Table
Mengganti Warna Borderborder-color:#FF0000;
Keterangan :
#FF0000 adalah kode warna (Warna Merah).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode
warna disini..
Mengganti Ukuran Borderborder:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Membuat Border Untuk Bawahborder-bottom:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Membuat Border Untuk Atasborder-top:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Membuat Border Untuk Kiriborder-left:1px;
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Membuat Border Untuk Kananborder-right:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Mengganti Type Borderborder:dotted;
Keterangan :
dotted adalah kode type border, anda bisa menggantinya dengan kode lainnya.
Contoh : Solid / dashed / double / groove / ridge / inset / outsetUntuk Keterangan type border 1 Per 1 saya tidak bisa menyebutkan semua :D , anda bisa
mengEksperimen sendiri. :D
Membuat Type Border Solid + Warna Border Kuning + Ukuran 5pxborder: solid #EBFF00 5px;
Keterangan :
solid adalah Type Border .. anda bisa mengganti dengan type laninnya.
#EBFF00 adalah kode warna (Warna Kuning).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode
warna disini..5px Ukuran Border, anda bisa menggantinya dengan nominal laninnya.
*CSS Untuk Ukuran
Mengganti Ukuran Lebar Biasa :Width:500px;
Keterangan :
500px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Lebar Minimal :Min-width:200px;
Keterangan :
200px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Lebar Maxsimal :Max-width:1000px;
Keterangan :1000px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Tinggi Biasa :Height:500px;
Keterangan :500px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Tinggi Minimal :Min-height:200px;
Keterangan :200px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Tinggi Maxsimal :Max-height:1000px;
Keterangan :500px bisa di ganti dengan nominal lainnya.