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. CSS ini masih satu bagian dengan HTML dan JavaScript, namun perbedaannya CSS ini digunakan untuk mendesain tampilan web.
Pada artikel kali ini kita akan belajar CSS 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, CSS ini memiliki cara kerja di mana style dapat mengalir (cascade) dari satu elemen ke elemen lain, memungkinkan desain yang fleksibel dan terstruktur.
Dengan adanya CSS ini, para developer dapat menemukan bagaimana elemen HTML ditampilkan di layar maupun di media lain. CSS ini memungkinkan Anda untuk mengatur layout, warna, font, dan berbagai aspek visual lainnya.
Fungsi CSS
Setelah membaca sekilas tentang CSS, bisa dipastikan Anda juga bisa membayangkan apa fungsi CSS. Namun, perlu Anda ketahui juga terdapat banyak fungsi penting dalam CSS ini untuk membantu para developer dalam mengembangkan web, berikut adalah fungsinya:
- Mengontrol Layout: CSS memungkinkan pengembang untuk mengatur tata letak elemen pada halaman web dengan grid, flexbox, atau positioning.
- Memisahkan Konten dan Desain: Dengan CSS, konten HTML dapat dipisahkan dari desain visualnya, sehingga lebih mudah dikelola dan diperbarui.
- Meningkatkan Konsistensi: Menggunakan CSS, pengembang dapat memastikan bahwa semua halaman situs memiliki tampilan yang konsisten.
- Optimasi Tampilan di Berbagai Perangkat: CSS memungkinkan desain web yang responsif, yang dapat menyesuaikan tampilan di berbagai ukuran layar, dari desktop hingga perangkat mobile.
Belajar CSS
Setelah Anda memahami tentang pengertian dan fungsi CSS, saatnya kita memulai belajar CSS. 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 CSS termasuk:
- Selektor CSS: Mengidentifikasi elemen HTML yang akan diberikan style.
- Properti CSS: Menggambarkan karakteristik yang ingin diubah, seperti warna, ukuran, atau margin.
- Nilai CSS: 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 CSS 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 CSS 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 CSS di HTML. Sebagai contoh nama file HTML nya adalah index.html dan nama file CSS 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 CSS 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 CSS 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 CSS eksternal. Dalam contoh ini, styles.css adalah nama file CSS yang terletak di lokasi yang sama (direktori yang sama) dengan file HTML. Jika file CSS berada di folder yang berbeda, Anda harus memberikan path yang tepat, misalnya href=”css/styles.css” jika file CSS berada di dalam folder css.
Kode Warna CSS
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 CSS. 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.
