CSS (Cascading Style Sheets) adalah bahasa penyusunan gaya (style) yang digunakan untuk mengatur tampilan sebuah website. CSS bisa mengatur tampilan elemen-elemen seperti font, warna, ukuran, posisi, dan lain-lain.
CSS bisa menghemat waktu dan memudahkan kita dalam mengatur tampilan website karena tidak perlu mengatur tampilan elemen-elemen secara terpisah di setiap halaman.
CSS merupakan bahasa penyusunan gaya yang digunakan untuk mengatur tampilan sebuah website. CSS bisa mengatur tampilan elemen-elemen seperti font, warna, ukuran, posisi, dan lain-lain. CSS bisa ditulis di dalam berkas terpisah atau di dalam elemen <style> di dalam HTML.
Kelebihan CSS:
- Dapat mengatur tampilan website secara terpadu
- Menyederhanakan proses pembuatan website
- Memudahkan dalam pemeliharaan website
- Menghasilkan website yang ringan karena tidak perlu menyertakan informasi gaya di dalam setiap halaman
Kekurangan CSS:
- Kompatibilitas browser tidak selalu baik
- Membutuhkan waktu untuk memahami dan mempelajari CSS
Contoh Berkas CSS
Berikut ini adalah contoh sederhana penggunaan CSS:
body {
font-family: Arial, sans-serif;
color: #333;
}
h1 {
font-size: 2em;
color: #f00;
}
Kode di atas akan mengatur font family dan warna teks pada elemen body, serta mengatur ukuran font dan warna teks pada elemen h1.
CSS Selector
CSS Selector adalah cara kita menentukan elemen-elemen yang akan diberi gaya oleh CSS. Kita bisa menggunakan CSS Selector dengan menentukan nama elemen, kelas, atau ID.
Contoh:
/* Menentukan elemen <p> */
p {
font-size: 16px;
color: #000;
}
/* Menentukan kelas .warning */
.warning {
background-color: #ff0;
color: #333;
}
/* Menentukan ID #main */
#main {
width: 800px;
margin: 0 auto;
}
Kita juga bisa menggunakan CSS Selector dengan menentukan elemen yang memiliki atribut tertentu atau elemen yang berada di dalam elemen lain.
Contoh:
/* Menentukan elemen <a> dengan atribut href */
a[href] {
color: #00f;
text-decoration: none;
}
/* Menentukan elemen <li> yang berada di dalam elemen <ul> */
ul > li {
list-style: none;
}
CSS Selector juga bisa digunakan untuk menentukan elemen-elemen yang memiliki kelas atau ID tertentu.
Contoh:
/* Menentukan elemen <p> yang memiliki kelas .warning */
p.warning {
font-size: 14px;
color: #f00;
}
/* Menentukan elemen <div> yang memiliki ID #main */
div#main
{
padding: 20px;
background-color: #ccc;
}
Selain itu, kita juga bisa menggunakan CSS Selector dengan menentukan elemen-elemen yang berada di posisi tertentu, seperti elemen pertama, elemen ke-n, atau elemen terakhir.
Contoh:
/* Menentukan elemen pertama di dalam elemen <ul> */
ul > li:first-child {
font-weight: bold;
}
/* Menentukan elemen ke-3 di dalam elemen <ul> */
ul > li:nth-child(3) {
font-style: italic;
}
/* Menentukan elemen terakhir di dalam elemen <ul> */
ul > li:last-child {
text-decoration: underline;
}
Dengan CSS Selector, kita bisa dengan mudah menentukan elemen-elemen yang akan diberi gaya oleh CSS. Selain itu, kita juga bisa menggunakan CSS Selector untuk membuat gaya khusus pada elemen-
Penulisan CSS
CSS bisa ditulis di dalam berkas terpisah atau di dalam elemen <style> di dalam HTML. Berikut ini adalah contoh penulisan CSS di dalam berkas terpisah:
/* style.css */
body {
font-family: Arial, sans-serif;
color: #333;
}
h1 {
font-size: 2em;
color: #f00;
}
Kemudian kita menyertakan berkas CSS tersebut di dalam HTML dengan menggunakan elemen <link>:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Berikut ini adalah contoh penulisan CSS di dalam elemen <style> di dalam HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
color: #333;
}
h1 {
font-size: 2em;
color: #f00;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Dukungan dari peramban web
Setiap peramban web memiliki tingkat dukungan yang berbeda terhadap CSS. Beberapa peramban web mungkin tidak sepenuhnya mendukung semua fitur CSS, sehingga kita perlu memeriksa tingkat dukungan dari setiap peramban web
Penggunaan CSS dalam perangkat lunak lain
Selain digunakan di dalam website, CSS juga bisa digunakan di dalam perangkat lunak lain seperti:
Aplikasi Desktop: CSS bisa digunakan untuk mengatur tampilan aplikasi desktop dengan menggunakan teknologi seperti Electron atau NW.js.
Dokumen: CSS bisa digunakan untuk mengatur tampilan dokumen seperti PDF atau e-book dengan menggunakan teknologi seperti Prince XML.
CSS Preprocessor
CSS Preprocessor adalah bahasa yang menambahkan fitur-fitur tambahan pada CSS seperti variabel, loop, dan lain-lain. CSS Preprocessor bisa memudahkan dalam menulis dan mengatur CSS. Beberapa contoh CSS Preprocessor adalah SASS, LESS, dan Stylus.
Kesimpulan
CSS merupakan bahasa penyusunan gaya yang bisa memudahkan dalam mengatur tampilan website. CSS memiliki kelebihan seperti dapat mengatur tampilan website secara terpadu dan menyederhanakan proses pembuatan website.
Namun, CSS juga memiliki kekurangan seperti kompatibilitas browser yang tidak selalu baik dan membutuhkan waktu untuk mempelajari.
Selain digunakan di dalam website, CSS juga bisa digunakan di dalam perangkat lunak lain seperti aplikasi desktop dan dokumen. Untuk memudahkan dalam menulis dan mengatur CSS, kita bisa menggunakan CSS Preprocessor.
elemen yang memiliki kelas atau ID tertentu, atau elemen-elemen yang berada di posisi tertentu.
