Dalam kesempatan ini kita akan mencoba memahami apa itu CSS. Sudah sering kita mendengar tentang CSS atau para pengembang situsweb akan sangat terbiasa dengan istilah ini. Cascading Style Sheets (CSS) adalah bahasa style sheet yang digunakan untuk mendeskripsikan presentasi dokumen yang ditulis dalam bahasa markup seperti HTML. CSS adalah teknologi landasan World Wide Web, bersama dengan HTML dan JavaScript. CSS bagi para pengembang situsweb dikenal berguna untuk memberi gaya pada situs web, font, warna, ukuran, spasi, batas, latar belakang, dan bayangan hanyalah beberapa contoh yang dapat disesuaikan menggunakan CSS. Akan tetapi, sebagian orang mungkin belum memahami istilah ini terlebih bagi pengembang yang baru terjun ke dunia koding situs web.
Ada banyak referensi mengenai istilah CSS ini. Tapi di sini penulis akan mencoba mereduksi istilah ini menjadi satu kesatuan sehingga dapat memberi kemudahan pemahaman bagi pengembang situs web yang baru sekalipun.
CSS seperti yang telah kita sering dengar bukan merupakan istilah tunggal yang hanya itu saja, yang hanya memiliki kegunaan sebagai pengatur gaya situs web dan hanya itu. Akan tetapi ada cukup banyak istilah yang harus kita ketahui bersama untuk mencapai pemahaman yang serius mengenai istilah CSS ini.
CSS adalah kode yang memudahkan para pengembang situs web untuk mengubah gaya di beberapa atau seluruh halaman web, menentukan tata letak, membuat gaya teks mulai dari menentukan ketebalan teks, warna teks, jenis teks, kemiringan terhadap elemen lainnya, dan sebagainya, dari halaman Web yang sebelumnya hanya dapat ditentukan dalam halaman HTML.
Bersyukurlah Anda yang berada di zaman baru CSS saat ini. Saat ini adalah zaman bagi CSS3 yang telah melampaui waktu jauh ke depan dan sudah sangat berkembang dari zaman CSS2 sebelumnya. Berkat CSS3 kita dimungkinkan untuk membuat sudut membulat dan efek drop-shadow dapat ditampilkan di browser. CSS3 juga menawarkan alat baru untuk mendeskripsikan warna dalam dokumen. HSL (Hue-Saturation-Lightness) adalah tambahan terbaru untuk HSLA yang menyertakan saluran Alpha untuk mengurangi opacity.
Pemilih atribut adalah langkah maju yang besar dalam hal gaya markup lurus. Dengan gaya kode ini Anda dapat menargetkan nama elemen tertentu yang berisi atribut dengan nilai tertentu. Ini sebagian besar berguna saat bekerja dengan markup seperti XML di mana tidak ada prinsip desain standar untuk memanipulasi node. Contoh di bawah ini adalah ide yang relatif sederhana:
Kode di atas adalah bagian dari pustaka pemilih CSS. Ini akan mempengaruhi semua elemen div dengan atribut "attrib" yang juga memegang nilai "1". Jika ini masih membingungkan lihat contoh di bawah ini untuk memperjelas. Secara teori, kedua penyeleksi ini harus melakukan tindakan yang sama.
CSS saat ini telah berdiri dengan sangat bangga sebagai bahasa dominan untuk mengatur gaya situs web front-end kita.
Istilah-istilah berikut dibuat berdasarkan artikel Divya Manian yang dimodifikasi dengan berbagai sumber representatif lainnya.
Property adalah Gaya yang Anda terapkan ke selector. Secara sederhana property adalah apa yang muncul sebelum titik dua di setiap baris CSS. Pada contoh di bawah ini, kata "width" adalah properti.
Value adalah Nilai yang dapat dimiliki properti. Secara sederhana, Nilai adalah apa yang muncul segera setelah titik dua di setiap baris CSS. Dalam contoh di bawah, "200px" adalah nilainya.
Keyword adalah Kata yang didefinisikan dalam spesifikasi CSS dan karenanya tidak boleh muncul dalam tanda kutip saat digunakan. Contoh: red, solid, dotted. Keyword merupakan nilai untuk properti dan agak seperti kata yang dipesan untuk properti tertentu. Properti yang berbeda memiliki kata kunci yang berbeda, dan semua properti mengizinkan kata kunci "inherit". Pada contoh di bawah, nilai “auto” adalah kata kunci.
Ada pendapat yang setuju jika kata : !important memenuhi syarat sebagai kata kunci, berdasarkan bagaimana kata kunci dibedakan dari nilai.
Length Units adalah Nilai dapat dideklarasikan dalam satuan (contoh: 1px, 2%).
Functional Notation adalah Nilai apa pun yang ditentukan sebagai fungsi (pengidentifikasi diikuti oleh ()). Terutama digunakan untuk menentukan warna, URI, atribut, dan transformasi: contoh: rgba(0, 0, 0, 0.5), url('im.png'), attr('href'), scale(20).
Identifier adalah berupa apa saja yang muncul sebagai properti, id, kelas, nilai kata kunci, dan at-rule. Dalam contoh, di bawah ini ada empat pengenal:
Kata "body" adalah Identifier atau pengenal; kata "background" adalah pengenal juga; kata "none" adalah pengenal; dan kata "font-size" adalah pengenal. Nilai terakhir "14px" bukanlah pengenal, karena ini bukan kata kunci.
Declaration adalah Kumpulan nama dan nilai properti. Biasanya berupa satu baris CSS yang muncul di antara tanda kurung kurawal, baik singkatan maupun tulisan tangan. Pada contoh di bawah, semua setelah kurung kurawal pertama, dan sebelum kurung kurawal terakhir (tidak termasuk komentar) adalah deklarasi:
Dalam contoh berikut ini, ada dua declaration di antara tanda {} :
Declaration Block adalah bagian CSS tempat pasangan properti / nilai muncul. Dalam contoh di bawah ini, semua yang ditemukan di antara tanda {} (tidak termasuk komentar) adalah blok deklarasi:
Rule or Rule Set adalah Penyeleksi atau selektor yang diikuti dengan blok deklarasi. Ini adalh satu bagian CSS termasuk selektor, tanda {} dan baris yang berbeda dengan properti dan nilai. Kode pada contoh di bawah ini terdiri dari satu set aturan:
Selector adalah cara Anda mendeklarasikan elemen mana yang harus diterapkan gaya. Lebih jelasnya, selector bagian dari garis CSS yang menyeleksi apa elemen target dengan pasangan properti / nilai. Pada contoh di bawah ini, "#container #box" adalah selektor:
Element Type Selector adalah pemilih yang menargetkan elemen dengan nama tag. Selektor pada contoh di bawah ini adalah pemilih jenis elemen, karena tidak menggunakan kelas, ID, atau pemilih lain untuk menerapkan gaya yang diberikan. Sebaliknya, ini secara langsung menargetkan semua elemen nav HTML5 :
Class Selector adalah selektor yang paling umum digunakan. Contoh: .gaya, .pen, .mystyle, dan sebagainya, untuk memilih elemen dengan classname gaya, pen, mystyle, itu. Ini diperbolehkan untuk lebih dari 1 elemen dengan nama kelas yang sama. Selektor pada contoh di bawah menargetkan elemen dengan nama kelasnya. Jadi setiap elemen dengan kelas "navigasi" akan menerima gaya yang dimaksud:
ID Selector adalah gunakan ini dengan hemat. Anda tidak dapat menggunakan kembali ID dalam halaman yang sama dan hanya digunakan untuk mengidentifikasi elemen secara unik. Contoh:
Pemilih pada contoh di bawah menargetkan elemen menurut ID-nya. Jadi setiap elemen dengan ID "navigation" akan menerima gaya yang dimaksud:
Universal Selector Selektor universal mencocokkan elemen apa pun dalam konteks di mana ia ditempatkan di selektor. Pada contoh di bawah, karakter * adalah pemilih universal:
Jadi, setiap elemen yang muncul sebagai file keturunan elemen daftar tak berurutan di dalam elemen yang memiliki kelas "navigasi" akan menerima gaya yang dideklarasikan. Penyeleksi universal umumnya tidak disarankan karena alasan kinerja.
Attribute Selector adalah jika Anda menggunakan atribut selain class atau id untuk mengidentifikasi elemen dalam stylesheet, Anda akan menggunakan Attribute Selectors. Anda juga dapat melakukan pencocokan pola dasar dalam pemilih atribut (jadi jika Anda ingin melakukan pencocokan pola dasar untuk pemilih menggunakan atribut kelas atau ID, Anda dapat menggunakan pemilih atribut). Contoh:
Links with the "target" attribute receive a yellow background:
Pseudo-Classes adalah kelas yang diterapkan ke elemen berdasarkan informasi yang tidak ada di markup, misalnya :first-child atau :last-child. Anda tidak dapat menggunakan section article :first-child untuk memilih kemunculan pertama article, jika anak pertama dari section adalah h1 dan bukan artikel. Begitu juga dengan :nth-child, dan :last-childpseudo-class.
Pseudo-Elements adalah Pseudo-elements berbeda dari Pseudo-Classes karena mereka benar-benar membuat elemen di pohon dokumen. Ini hampir merupakan contoh pertama CSS yang memodifikasi pohon dokumen HTML. Idealnya Anda harus menggunakan pseudo-elemen dengan “::” bukan “:” (tetapi sebagian besar browser menerima notasi “:” untuk pseudo-elemen CSS 2.1). Pseudo-unsur tersebut adalah: ::first-line, ::first-letter, ::before, ::after.
Combinators adalah Pemilihan elemen berdasarkan kejadian dalam kaitannya dengan unsur lain (dipilih oleh pilihan combinator: spasi, >, +, atau ~).
Ada empat kombinator berbeda di CSS :
Apa arti dari keempat istilah di atas :
Adjacent Sibling Combinator adalah Elemen yang berbatasan langsung dengan elemen lain.
General Sibling Combinator adalah Elemen yang berdekatan, tetapi tidak langsung ke elemen lain.
At-Rules adalah Aturan yang dimulai dengan @karakter, contoh: @import, @page, @media, dan @font-face.
Media Features adalah Dengan kueri media, Anda dapat menargetkan gaya bergantung pada fitur media tersebut. Penggunaan populer dari fitur media adalah min-width dan max-width untuk mendeteksi perangkat iOS.
Vendor-specific Extension adalah Persis seperti yang disebutkannya. Mereka menyediakan fungsionalitas khusus untuk vendor tertentu (yaitu browser). Mereka tidak selalu mewakili fitur yang dideklarasikan dalam standar.
Comment atau Statement adalah Bahasa yang menjadi penjelasan atas kode CSS yang disusun di bawahnya. Contoh: komentar di sini mengatakan tentang 4 hal :
Perhatikan kode ini :
CSS yang kita pahami
CSS saat ini
1. div[attrib^="1"] { /* styles here */ }
1. p[id^="primary"] { /* styles */ }2. p#primary { /* styles */ }
Istilah-istilah penting dalam CSS
#box {
width : 200px; /* propertinya adalah "width" (tanpa titik dua) */
}
#box {
width : 200px; /* setelah titik dua, tanpa titik koma */
}
#container {
height: auto; /* "auto" adalah sebuah keyword */
}
/* "body", "background", "none", dan "font-size" ialah identifiers */
body {
background: none;
font-size: 14px;
}
/* "14px" adalah bukan sebuah identifier */
body {
font-family: Arial, sans-serif; /* baris ini adalah deklarasi */
background: red; /* baris ini adalah deklarasi */
}
body {
font-family: Arial, sans-serif; /* satu declaration */
color: #555; /* deklarasi lain */
}
body {
font-family: Arial, sans-serif; /* dimulai dengan baris ini */
color: #555;
font-size: 14px;
line-height: 20px; /* berakhir di sini, sebelum penjepit keriting penutup */
}
body {
font-family: Arial, sans-serif;
color: #555;
font-size: 14px;
}
#responsive {
clear: both;
color: #000;
background-color: chocolate;
}
/* the selector is everything on the first line */
/* excluding the opening curly brace */
#container #box {
width: 200px;
}
/* matches an HTML element by name */
nav {
font-family: Arial, sans-serif;
color: #555;
font-size: 14px;
}
/* matches HTML element with class="navigation" */
.navigation {
width: 960px;
margin: 0 auto;
}
/* matches HTML element with id="navigation" */
#navigation {
width: 960px;
margin: 0 auto;
}
/* the asterisk character is the universal selector */
.navigation ul * {
width: 100px;
float: left;
}
Google Internasional
Google Indonesia
Google Organization
div > p {
background-color: yellow;
}
/*!
Bootstrap v4.3.1 (https://getbootstrap.com/)
Copyright 2011-2019 The Bootstrap Authors
Copyright 2011-2019 Twitter, Inc.
Licensed under MIT
(https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
Tags: