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 kedua browser 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 khususnya media-specific CSS. Bahkan pada perkembangannya, saat ini sudah muncul CSS3. Pekerjaan dari CSS3 dimulai 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 scriptyang telah embedded dengan HTML. Anda cukup menggunakan aplikasi notepaduntuk 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:
selector { property: value}
contoh 1:
p { color:black }
Jika suatu nilai mengandung spasi, nilai tersebut harus diapit dengan tanda petik (“).
Untuk memberikan lebih dari satu _property bagi suatu _property, pisahkan setiapkombinasi “property:value” dengan tanda titik koma (;).
Untuk membuat definisi gayalebih mudah dibaca, definisi tiap property dapat dilakukan per baris.
Sehinggasintaksnya menjadi:
selector { property1: value; property2: “value_value”; … }
contoh 2:
p { text-align:center; font-family:“sans serif” }
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 selector
? Dengan menggunakan class selector, Anda dapat mendefinisikan perbedaan style untuk tag elemen html yang sama.
? Class dibuat dengan tanda titik kemudian diikuti dengan namakelasnya .namakelas{ }
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 namaclass lebih dari satu kata/kalimat, penulisannya
menggunakan tanda petik (“).
ID Selector
Aturan 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">
Selamat Belajar CSS </h2>
<h3 id = "tebal"> Saya baru pertama kali belajar CSS </h3>
</body>
</html>
Penempatan kode CSS dalam HTML
Ada 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:
<html>
<head>
<link rel=”stylesheet” type=”text/css”href=”test.css”/>
</head>
<body>
<h3>Menguak Rahasia CSS</h3>
</body>
</html>
3. Inline CSS
Penulisan kode CSS dalam tag HTML.
contoh:
nama File : inline.html
<html>
<head>
</head>
<p style="background:red; color:black;">Menguak Rahasia CSS</p>
</body>
</html>
Contextual Selectors
• Contextual Selectors digunakan jika style akan digunakan dalam situasi tertentu, misalnya saja jika elemen HTML yang digunakan merupakan sebuah kombinasi.
Misalnya saja jika kita akan membuat semua table data mempunyai align center , font arial, dan huruf berwarna orange.
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
Maka digunakan contextual selectors
Table tr td{ color: orange;
font-family: arial;
Text-align:center;}
Contoh:
<html>
<head>
<style type="text/css">
table tr td{color:orange; fontfamily:arial;text-align:center;}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Cinta</td>
<td>Bahagia</td>
</tr>
<tr> <td colspan=2 align=center>Sedih</td>
</tr>
</table>
</body>
</html>
Fitur baru di CSS3
Bagian ini memperkenalkan Anda dengan fitur baru yang dapat ditemukan di CSS tingkat 3.
Seperti termasuk efek bayangan pada teks dan kotak, sudut dibulatkan pada border, dan penggunaan opacity untuk membuat penampilan transparan.
Selector baru di CSS3
Sebuah pemilih CSS mengacu pada cara di mana elemen-elemen HTML yang stylish
menggunakanstylesheet. Misalnya, untuk menempatkan border di sekitar semua elemen <div> Anda menggunakan
divselector: div {border: 1px # 000 yang solid;}
Untuk menerapkan warna background untuk semua elemen dengan higlight class Anda menggunakan .
highlight: .highlight { background-color: yellow; }
Untuk mengubah lebar dari suatu elemen dengan nilai atribut ID dari myDiv, Anda menggunakan
#myDiv {width: 250px;}.
Tentu saja, ini penyeleksi dapat dikombinasikan, sehingga untuk memilih semua elemen <div> dengan class highlight, Anda menggunakan div.highlight, atau
untuk memilih elemen <div> dengan myDiv ID Anda menggunakan div # myDiv.
New Effect:
• background
• background-clip
• background-origin
• background-size
• border-radius
• border-image
• border-color
• box-shadow
• box-sizing
• opacity
• outline-offset
• resize
• text-overflow
• text-shadow
• word-wrap
Layout multicolumn
Dengan layout multicolumn memungkinkan untuk teks yang akan tersebar di sejumlah kolom, seperti yang terdapat pada Majalah atau koran.
Hal ini dapat dilakukan dengan dua cara, baik menggunakancolumn-width, di mana Anda menentukan seberapa lebar setiap kolomnya (yang mana jumlah kolom ditentukan oleh ruang yang tersedia untuk wadah), atau menggunakan column-count, di mana Anda menentukan jumlah kolom yangdigunakan.
Web font
Font web sebenarnya diusulkan untuk CSS2 dan telah tersedia dalam Microsoft Internet Explorer sejak versi 5.
Sekarang anda dapat menggunakan aturan @ font-face untuk menggunakan ttf berlisensi. (TrueType) atau OTF (OpenType). font pada halaman Web Anda.
Sebuah contoh dari aturan @ font-face adalah sebagai berikut:
@ font-face {font-family: Alexa; src: url ('Alexa.otf');}.
Anda sekarang dapat menggunakan font ini dalam aturan sendiri CSS anda, seperti:
article p { font-family: Alexa, Arial, Helvetica, sans-serif;}.
New Color
Ada juga fitur baru CSS3, termasuk dukungan untuk warna baru, terutama HSL (Hue, Saturation, Lightness)
dan nilai-nilai dua warna dengan alpha propertis-RGBA (Merah, Hijau, Biru, Alpha) dan HSLA (Hue, Saturation, Lightness, Alpha).
-kesimpulan
yang baru dari Css 3
Animasi
beberapa efek teks
jenis huruf eksternal
beberapa efek dari kotak
Modul yang penting dari Css 3
selector
model kotak
latar belakang dan border
efeks teks
transformasi 2D/3D
Animasi
Kalau masih kurang datang ja kesini sobat t
css3 wikipedia
http://www.css3.com/
www.w3school.com
belajar css3 rea setiadi
dan masih banyak lagi sobat..ketik saja di google search dengan kata kunci belajar Css3 atau tutorial Css3
Alhamdullillah Catatan Sederhana Belajar Mengenal Css Telah selesai Mohon maaf jika ada kesalahan Wasalamu'alaikum warohmatulloh wabarokaatuh
layout kolom
user interface
No comments:
Post a Comment