Warna, bentuk, garis tepi, sudut lengkungan adalah bagian dari CSS. Sebagian orang yang tertarik dengan dunia pemrograman mungkin sudah tidak asing dengan CSS.
Jadi CSS ini apa? Kepanjangan CSS adalah Cascading Style Sheet. Cascading Style Sheet ini masih satu bagian dengan HTML dan JavaScript, namun perbedaannya CSS ini digunakan untuk mendesain tampilan web.
Pada artikel kali ini kita akan belajar Cascading Style Sheet bersama, mulai dari pengertian, fungsi, contoh, dan kode warna.
Apa itu CSS?
Seperti yang sudah dijelaskan diatas bawah kepanjangan dari CSS adalah Cascading Style Sheet yang digunakan untuk mendesain tampilan halaman web.
Sesuai dengan namanya, Cascading Style Sheet ini memiliki cara kerja di mana style dapat mengalir (cascade) dari satu elemen ke elemen lain, memungkinkan desain yang fleksibel dan terstruktur.
Dengan adanya Cascading Style Sheet ini, para developer dapat menemukan bagaimana elemen HTML ditampilkan di layar maupun di media lain. Cascading Style Sheet ini memungkinkan Anda untuk mengatur layout, warna, font, dan berbagai aspek visual lainnya.
Fungsi CSS
Setelah membaca sekilas tentang Cascading Style Sheet, bisa dipastikan Anda juga bisa membayangkan apa fungsi CSS. Namun, perlu Anda ketahui juga terdapat banyak fungsi penting dalam Cascading Style Sheet ini untuk membantu para developer dalam mengembangkan web, berikut adalah fungsinya:
- Mengontrol Layout: Cascading Style Sheet memungkinkan pengembang untuk mengatur tata letak elemen pada halaman web dengan grid, flexbox, atau positioning.
- Memisahkan Konten dan Desain: Dengan Cascading Style Sheet, konten HTML dapat dipisahkan dari desain visualnya, sehingga lebih mudah dikelola dan diperbarui.
- Meningkatkan Konsistensi: Menggunakan Cascading Style Sheet, pengembang dapat memastikan bahwa semua halaman situs memiliki tampilan yang konsisten.
- Optimasi Tampilan di Berbagai Perangkat: Cascading Style Sheet memungkinkan desain web yang responsif, yang dapat menyesuaikan tampilan di berbagai ukuran layar, dari desktop hingga perangkat mobile.
Belajar Cascading Style Sheet
Setelah Anda memahami tentang pengertian dan fungsi Cascading Style Sheet, saatnya kita memulai belajar Cascading Style Sheet. Untuk yang masih pemula jangan khawatir, karena kita akan mempelajari nya secara mendasar terlebih dahulu.
Sebelum itu kita harus memperhatikan apa saja konsep-konsep dasar yang perlu dipahami saat belajar Cascading Style Sheet termasuk:
- Selektor Cascading Style Sheet: Mengidentifikasi elemen HTML yang akan diberikan style.
- Properti Cascading Style Sheet: Menggambarkan karakteristik yang ingin diubah, seperti warna, ukuran, atau margin.
- Nilai Cascading Style Sheet: Menentukan detail spesifik dari properti, seperti warna merah untuk color: red;.
Contoh CSS
Setelah paham dengan konsep dasarnya, sekarang saatnya kita untuk memperhatikan contoh kode setelah ini.
Kode HTML:
<header>
<h1>Selamat Datang di Halaman Web Sederhana</h1>
</header>
Lalu kita buat kode Cascading Style Sheet nya:
.header {
background-color: #4CAF50;
color: white;
padding: 10px 0;
width: 100%;
text-align: center;
margin-bottom: 20px;
}
Penjelasan singkat:
- Tag ‘<header>’ ini nanti akan berisikan judul halaman atau ‘<h1>’
- Tag ‘.header’ ini memanggil nama tag header yang ada di HTML ke CSS yang nantinya akan di styling dengan background hijau, warna teks putih dan ditambah sedikit styling button agar terlihat menarik oleh orang-orang.
Cara Memanggil CSS di HTML
Sebenarnya ada banyak cara untuk memanggil Cascading Style Sheet di HTML, namun dari sekian banyaknya cara hanya ada satu cara yang sering digunakan oleh orang-orang. Mari kita perhatikan kode dibawah ini:
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Halaman dengan CSS Eksternal</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
Pada kode ‘<link rel=”stylesheet” href=”styles.css”>’ adalah cara untuk memanggil Cascading Style Sheet di HTML. Sebagai contoh nama file HTML nya adalah index.html dan nama file Cascading Style Sheet nya adalah style.css. Berikut adalah penjelasan lengkapnya tentang kode tersebut.
- <link>
Tag <link> digunakan untuk menyertakan file eksternal atau resource lain ke dalam dokumen HTML. Dalam konteks ini, <link> digunakan untuk menyertakan file Cascading Style Sheet eksternal.
- rel=”stylesheet”
Atribut rel menunjukkan hubungan antara dokumen HTML dan file yang di-link. Nilai stylesheet mengindikasikan bahwa file yang di-link adalah sebuah file Cascading Style Sheet yang mengandung style sheet, yang akan digunakan untuk mendefinisikan tampilan dan format dari halaman HTML.
- href=”styles.css
Atribut href (hyperlink reference) menunjukkan lokasi atau path dari file Cascading Style Sheet eksternal. Dalam contoh ini, styles.css adalah nama file Cascading Style Sheet yang terletak di lokasi yang sama (direktori yang sama) dengan file HTML. Jika file Cascading Style Sheet berada di folder yang berbeda, Anda harus memberikan path yang tepat, misalnya href=”css/styles.css” jika file Cascading Style Sheet berada di dalam folder css.
Kode Warna Cascading Style Sheet
Ternyata pada kode warna ini terdapat yang namanya kode warna RGB dan HEX. Lalu, apa pengertian RGB dan HEX?
Jadi RGB adalah kode warna yang terdiri dari tiga bagian angka dan ketiga angka tersebut dipisahkan oleh koma, sebagai contohnya adalah “rgb(135, 206, 250)” kode tersebut akan menghasilkan warna light sky blue.
Sedangkan HEX atau Hexadecimal adalah tipe yang umumnya akan diawali dengan “#”. Beberapa orang mungkin sudah tau dengan istilah ini karena orang-orang lebih sering menggunakan HEX daripada RGB. Contoh dari HEX adalah #40E0D0 dan kode tersebut akan menghasilkan warna Turquoise.
Penutup
Demikianlah penjelasan singkat tentang CSS. Sekarang Anda sudah lebih mendalami tentang CSS, bahkan Anda juga sudah mempelajari cara penggunaan Cascading Style Sheet. Perlu kita ketahui juga bahwa warna sangat penting pada tampilan web agar orang-orang dapat betah di website anda karena tampilannya yang menarik.
Jika Anda tidak terlalu ahli untuk menggabungkan warna-warna yang sekiranya cocok dengan warna primernya anda dapat mengunjungi website ini agar kalian mengetahui kira-kira warna yang cocok digabungkan dengan warna tersebut.
Anda juga bisa menggunakan website ini jika ingin mencari warna paling terang dan gelap dari warna primernya, sehingga tampilan dari website anda terlihat menarik.
Berhubung kita membahas tentang tampilan website yang menarik, kami Sekawan Media juga menawarkan berbagai layanan yang salah satunya adalah pembuatan website yang pastinya memiliki tampilan yang menarik dan pastinya membuat para pengunjung website anda betah.
Segera hubungi kontak kami untuk melakukan diskusi tentang layanan yang kami sediakan atau mungkin tertarik dengan jasa yang kami layani.
Lihat juga: Solusi Akurat untuk Digitalisasi Arsip Masa Kini
