SERIES CSS - CHAPTER 1 : MEMULAI DENGAN CSS
Di postingan kali ini saya akan membuat series postingan tentang CSS. Sebelum masuk ke inti pembahsan, kalian bisa lihat terlebih dahulu mengenai versi, spesifikasi dan tahun rilis dariCSS ini sendiri.
| Version | Release Date |
|---|---|
| 1 | 17-12-1996 |
| 2 | 12-05-1998 |
| 3 | 13-10-2015 |
CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mendesain halaman web agar menarik. Alasan menggunakan ini adalah untuk menyederhanakan proses pembuatan halaman web yang rapi. Ini memungkinkan kalian untuk menerapkan styles pada halaman web. Lebih penting lagi, ini memungkinkan kalian untuk melakukan ini terlepas dari HTML yang membentuk setiap halaman web.
External Stylesheet
External CSS Stylesheet bisa diterapkan ke sejumlah dokumen HTML dengan menempatkan elemen <link> di masing-masing dokumen HTML. Atribut rel dari tag <link> harus disetting ke "stylesheet", dan atribut href ke atribut relatif atau absolut path ke stylesheet. Meskipun menggunakan path URL relatif umumnya dianggap sebagai praktik yang baik, path absolut bisa digunakan juga. Dalam HTML5 atribut type dapat dihilangkan.Yang direkomendasikan agar tag <link> ditempatkan di dalam tag <head> file HTML sehingga styles dimuat sebelum elemen yang style lainnya . Jika tidak, pengguna akan melihat kilasan konten tanpa style.
Contoh :
hello-world.html
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8" />
5: <link rel="stylesheet" type="text/css" href="style.css">
6: </head>
7: <body>
8: <h1>Hello world!</h1>
9: <p>I ♥ CSS</p>
10: </body>
11: </html>
Jangan lupa juga File Style.css nya :
1: h1 {
2: color: green;
3: text-decoration: underline;
4: }
5: p {
6: font-size: 25px;
7: font-family: 'Trebuchet MS', sans-serif;
8: }
Pastikan kalian menyertakan path yang benar ke file CSS kalian di file href seperti diatas. Jika file CSS berada di folder yang sama dengan file HTML kalian maka tidak ada path yang perlu diubah (seperti contoh di atas) tetapi jika disimpan dalam folder yang lain (tidak satu folder dengan file HTML kalian), kalian bisa tentukan atau atur seperti ini href="namafolder/style.css" menjadi seperti dibawah ini :
<link rel="stylesheet" type="text/css" href="foldername/style.css">
External Stylesheet dianggap sebagai cara terbaik untuk menangani CSS kalian. Ada alasan yang sangat sederhana untuk ini: ketika kalian mengelola sebuah situs web, katakanlah di dalamnya ada 100 halaman, semuanya dikendalikan oleh satu stylesheet, dan kalian ingin mengubah warna tautan dari biru menjadi hijau, jauh lebih mudah untuk membuat perubahan dalam satu file CSS kalian saja dan membiarkan perubahan " cascade" di seluruh 100 halaman dengan sendirinya, daripada harus masuk ke 100 halaman terpisah dan membuat perubahan yang sama sebanyak 100 kali.
Sekali lagi, jika kalian ingin mengubah tampilan situs web kalian sepenuhnya, kalian hanya perlu memperbarui file yang satu ini (file.css). Kalian bisa memuat sebanyak mungkin file CSS di halaman HTML kalian sesuai kebutuhan.
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="override.css">
Aturan CSS diterapkan dengan beberapa aturan dasar, dan urutan itu penting. Misalnya, jika kalian memiliki file main.css dengan beberapa kode di dalamnya:
p.green { color: #00FF00; }
Semua paragraf kalian dengan class 'green' akan ditulis dalam warna hijau muda, tetapi kalian bisa menggantinya dengan file.css lain hanya dengan memasukkannya setelah main.css. Contohnya kalian bisa membuat filei override.css dengan kode berikut ikuti main.css, untuk contoh:
p.green { color: #006600; }
Baca Juga : SERIES HTML5 - CHAPTER 4 : PARAGRAPHS HTML
Sekarang semua paragraf kalian dengan class 'green' akan ditulis dalam warna hijau tua daripada hijau muda.
Prinsip-prinsip lain berlaku, seperti '!important rule', specificity, dan inheritance.
Saat seseorang pertama kali mengunjungi situs web kalian, browser mereka akan mengunduh HTML dari halaman saat ini ditambah mengajukan atau mengunduh CSS yang sudah ditautkan di dalam file tersebut. Kemudian ketika mereka menavigasi ke halaman lain, browser mereka hanya perlu mengunduh HTML halaman itu; karena File CSS berada di-cache, jadi tidak perlu diunduh lagi. Karena browser menyimpan External Stylesheet, maka halaman kalian akan dimuat lebih cepat.
Internal Styles
CSS yang diapit dalam tag <style> dan </style> di dalam dokumen HTML berfungsi seperti external stylesheet, kecual CSS itu penempatannya berada di dokumen HTML style nya bukan di file terpisah, dan karena itu hanya bisa diterapkan ke dokumen di mana ia berada. Perhatikan bahwa elemen ini harus berada di dalam elemen <head> untuk validasi HTML (meskipun akan bekerja di semua browser saat ini jika ditempatkan di dalam body).1: <head>
2: <style>
3: h1 {
4: color: green;
5: text-decoration: underline;
6: }
7: p {
8: font-size: 25px;
9: font-family: 'Trebuchet MS', sans-serif;
10: }
11: </style>
12: </head>
13: <body>
14: <h1>Hello world!</h1>
15: <p>I ♥ CSS</p>
16: </body>
dan kalian coba bisa lihat hasil dari source code diatas.
CSS @import rule (salah satu CSS at-rule)
@import CSS at-rule digunakan untuk mengimpor style rule dari stylesheet lain. Aturan-aturan ini harus mendahului jenis aturan yang lainnya, kecuali @charset rules; karena ini bukan nested statemen (pernyataan bersarang), @import tidak bisa digunakan di dalam conditional
group (kondisional aturan grup). @impor.
Cara menggunakan @import
Kalian bisa menggunakan aturan @import dengan cara berikut:
Kalian bisa menggunakan aturan @import dengan cara berikut:
A. Dengan tag internal style :
1: <style>
2: @import url('/css/styles.css');
3: </style>
B. Dengan external stylesheet
Source code dibawah mengimpor file CSS bernama additional-styles.css di direktori root ke dalam file CSS di mana ia berada: @import '/additional-styles.css'
mengimpor CSS eksternal juga dimungkinkan. Kasus penggunaan yang umum adalah file font.
@import 'https://fonts.googleapis.com/css?family=Lato'
Argumen kedua opsional untuk aturan @import adalah daftar kueri media:
@import '/print-styles.css' print;
@import url('landscape.css') screen and (orientation:landscape);
Inline Styles
Gunakan inline styles untuk menerapkan style ke elemen tertentu. Perhatikan bahwa ini tidak optimal. Menempatkan aturan style dalam tag <style> atau file CSS eksternal dianjurkan untuk menjaga perbedaan antara konten dan presentasi.Inline styles menimpa CSS apa pun dalam tag <style> atau external stylesheet. Meskipun ini bisa berguna dalam beberapa keadaan, fakta ini lebih sering mengurangi pemeliharaan project.
Style dalam contoh berikut berlaku langsung ke elemen yang dilampirkan.
h1 style="color: green; text-decoration: underline;">Hello world!</h1>
<p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p>
Inline styles umumnya merupakan cara teraman untuk memastikan kompatibilitas rendering di berbagai email client, program dan perangkat, tetapi dapat memakan waktu lama untuk menulis dan sedikit menantang untuk dikelola.
Mengubah CSS dengan JavaScript
JavaScript murni (Pure Javascript) Dimungkinkan untuk menambah, menghapus, atau mengubah nilai properti CSS dengan JavaScript melalui elemen style property.1: var el = document.getElementById("element");
2: el.style.opacity = 0.5;
3: el.style.fontFamily = 'sans-serif';
Perhatikan bahwa style properties diberi nama lower camel case style. Dalam contoh kalian melihat bahwa properti css font-amily menjadi fontFamily di javascript.
Sebagai alternatif untuk bekerja langsung pada elemen, kalian bisa membuat elemen <style> atau <link> di JavaScript dan tambahkan ke <body> atau <head> di dalam dokumen HTML.
jQuery
Memodifikasi properti CSS dengan jQuery bahkan lebih sederhana. $('#element').css('margin', '5px');
Jika kalian perlu mengubah lebih dari satu style rule:
1: $('#element').css({
2: margin: "5px",
3: padding: "10px",
4: color: "black"
5: });
jQuery menyertakan dua cara untuk mengubah aturan css yang memiliki tanda hubung di dalamnya (yaitu ukuran font). Kalian bisa memasukkannya ke dalam quote atau camel-case the style rule name.
1: $('.example-class').css({
2: "background-color": "blue",
3: fontSize: "10px"
4: });
Styling List dengan CSS
Ada tiga properti berbeda untuk styling list-item: list-style-type, list-style-image, dan list-style-position, yang harus dinyatakan dalam urutan itu. Nilai default masing-masing adalah disc, outside, dan none. Setiap properti dapat dideklarasikan secara terpisah, atau menggunakan ist-style shorthand property.list-style-type mendefinisikan bentuk atau tipe bullet point yang digunakan untuk setiap list-item.
Beberapa nilai yang dapat diterima untuk list-style-type:
Beberapa nilai yang dapat diterima untuk list-style-type:
Untuk menggunakan poin-poin ssquare (persegi) untuk setiap list-item, misalnya, kalian akan menggunakan pasangan property-value (nilai properti) berikut.
1: li {
2: list-style-type: square;
3: }
Properti list-style-image menentukan apakah ikon list-item disetel dengan gambar, dan menerima nilai
tidak ada atau URL yang mengarah ke gambar.
tidak ada atau URL yang mengarah ke gambar.
1: li {
2: list-style-image: url(images/bullet.png);
3: }
Properti list-style-position menentukan tempat untuk memposisikan penanda item daftar, dan properti ini menerima salah satu dari dua nilai:
"inside atau outside".
"inside atau outside".
1: li {
2: list-style-position: inside;
3: }
Mungkin sampai disini dulu untuk postingan chapter 1 Memulai / Pengenalan dengan HTML5, kita akan berjumpa di postingan / chapter berikutnya.
See you next time :).
Post a Comment
Untuk menyisipkan kode pendek, gunakan <i rel="code"> ... KODE ... </i>
Untuk menyisipkan kode panjang, gunakan <i rel="pre"> ... KODE ... </i>
Untuk menyisipkan gambar, gunakan <i rel="image"> ... URL GAMBAR ... </i>