Assalamualaikum Bertemu lagi dengan gw D1kSec
Kali ini gw akan membagikan materi CSS
Maap kalo GK lengkap :)
CSS adalah: Pengertian, cara kerja, fungsi, dan 3 jenisnya
Algonz D.B. Raharja
css_adalah.jpg
Bagi kamu yang bekerja di bidang front-end atau back-end developer atau pengembangan situs jejaring tentunya akrab dengan hyper text markup language (HTML) dan CSS (Cascading Style Sheets). Keduanya adalah hal utama dalam pembangunan suatu situs jejaring dan tampilan web secara umum.
Bagi seorang Front-end Developer peran CSS amat penting untuk membuat tampilan sebuah halaman web yang sedang dibangun. Bagi pengunjung situs pun CSS berperan besar agar pengunjung nyaman berselancar di laman sebuah situs. Namun, bagi mereka yang awam dengan teknis pengembangan web tentunya bingung, apa sih CSS itu? Atau, bagaimana sih cara kerja CSS supaya sebuah web menjadi menarik? Nah, untuk itu mari kita simak ulasan berikut ini.
Baca juga: 9 Tips mudah belajar coding untuk pemula yang wajib dicoba
Apa itu CSS?
Apa itu CSS?
CSS adalah cascading style sheets yang merupakan salah satu bahasa dalam pngembangan web (Sumber: it-jurnal.com)
Seperti yang telah disinggung di atas tadi, CSS adalah singkatan dari cascading style sheets. Menurut Techterms, CSS dapat diartikan sebagai lembar berjenjang untuk format tata letak halaman web. CSS merupakan sebuah temuan untuk membantu pengembang web yang tadinya hanya bergantung pada HTML sebagai bahasa markup. HTML di awal mula digunakan untuk menandai objek di halaman web seperti tabel, gambar, paragraf, dan sebagainya.
Penggunaan HTML di awal mula perkembangan internet memang bisa dibilang cukup karena saat itu internet hanya digunakan oleh kalangan terbatas untuk berbagi informasi penelitian. Saat itu, proses format halaman amat terbatas dan gaya atau style halaman situs masih monoton. Namun belakangan, setelah internet digunakan luas dan makin berkembang orang-orang mulai berpikir bagaimana mengembangkan halaman situs agar lebih menarik. Hal ini yang lantas membuat HTML menjadi amat terbebani.
Setelah perkembangan pesat internet, halaman web tidak hanya memiliki format tetapi juga warna dan tata letak lain harus dibebankan pada kontrol HTML. Pengembangan web berubah menjadi sesuatu yang sangat kompleks dan sulit ditangani. Tentu saja, peran HTML sebagai alat struktural dan alat bantu desain terasa amat berat. Untuk itulah kemudian CSS dibuat sebagai solusi dari tugas desain dan pemformatan, sedangkan HTML bisa kembali fokus pada tata letak halaman web.
CSS muncul dan lantas dikenal sebagai alat untuk memformat dokumen yang ditulis menggunakan bahasa markup yaitu HTML. CSS juga dikenal sebagai bahasa style sheet yang bekerja sama dengan HTML untuk membangun sebuah halaman situs jejaring.
Jadi, secara umum kita dapat mengartikan HTML sebagai bahasa untuk menggambarkan struktur halaman situs, sedangkan CSS merupakan bahasa untuk menggambarkan halaman situs, termasuk warna, tata letak, dan font. Hal ini memungkinkan seorang pengembang untuk mengadaptasi presentasi ke berbagai jenis perangkat, seperti layar besar monitor, layar kecil tablet atau smartphone, hingga mesin cetak (printer). CSS tidak lagi bergantung pada HTML dan dapat digunakan dengan bahasa markup lainnya.
Pemisahan HTML dari CSS nantinya akan mempermudah pemeliharaan situs sehingga dapat berbagi style sheet di seluruh halaman dan menyesuaikan halaman dengan lingkungan yang berbeda. Pemisahan ini berarti pemisahan struktur (HTML) dari presentasi (CSS).
Baca juga: 5 Tips menjadi Front-end Developer dan skill yang dibutuhkan
Cara kerja CSS
Cara kerja CSS
Contoh skema cara kerja CSS (Sumber: developer.mozilla.org)
CSS bekerja saat sebuah browser menampilkan dokumen, sebabnya pada waktu itu browser harus menggabungkan konten dokumen dengan gaya informasi atau gaya presentasi dalam halaman sebuah situs. Untuk membangun sebuah halaman situs dan membuat presentasinya semenarik mungkin, CSS memiliki beberapa langkah cara kerja yang bisa digambarkan sebagai berikut,
Load HTML, dalam tahap ini browser memuat HTML dari jaringan
Parse HTML, pada tahap ini terjadi penguraian HTML untuk membuat document object model (DOM) dan memuat CSS. DOM bertindak untuk mewakili dokumen dalam memori komputer. DOM memiliki struktur seperti pohon dan mencakup elemen, atribut, potongan teks dalam bahasa markup yang menjadi simpulnya atau struktur pohon DOM. DOM dapat membantu pengembang untuk mendesain, men-debug, dan memelihara CSS karena DOM adalah tempat di mana CSS dan konten dokumen bertemu.
Load CSS, peramban atau browser kemudian memuat sebagian besar sumber daya yang akan ditautkan oleh dokumen HTML, seperti gambar atau video sematan. Dalam hal ini kemudian CSS dimuat dan ditautkan.
Parse CSS, sama halnya HTML, CSS juga kemudian diurai dengan mengurutkan aturan yang berbeda berdasarkan jenis pemilihnya ke dalam bucket yang berbeda seperti elemen, kelas, ID, dan sebagainya. Penyeleksian ini nantinya menentukan aturan mana yang harus diterapkan ke simpul-simpul DOM.
Render tree, penyeleksian dalam setiap elemen CSS yang akan diterapkan ke simpul DOM sesuai kebutuhannya tadi disebut render tree. Render tree ini diletakkan dalam struktur yang seharusnya muncul setelah aturan dan penyesuaian simpul dan elemen telah diterapkan.
Display, setelah penyesuaian tadi berjalan dan aturan dijalankan maka CSS dan DOM akan membentuk tampilan visual sebuah halaman situs yang tertampil di layar.
Baca Juga: Full-Stack Developer: Tugas, kualifikasi, dan proyeksi karier tahun 2021
Fungsi CSS
Fungsi CSS
CSS dapat berfungsi untuk mempercepat pemuatan halaman situs karena pengodeannya sederhana (Sumber: Pexels)
Menurut pengertian dan penjelasan CSS di awal tentunya telah tersirat bahwa CSS berfungsi untuk menyederhanakan kerja HTML dalam membangun sebuah halaman situs jejaring. Namun, jika dijabarkan kembali ada beberapa fungsi CSS yang memang berhubungan langsung dengan proses penyederhanaan kerja HTML tadi. Adapun beberapa fungsi CSS adalah sebagai berikut,
Memuat halaman situs dengan cepat, peran CSS dalam menyederhanakan kerja HTML membuat proses pengodean akan lebih singkat sehingga hal ini berpengaruh pada penerapan dokumen dan proses pemanggilannya. Proses pembukaan halaman web dan pengunduhan dokumen dari situs akan berjalan lebih cepat daripada adanya atribut tag HTML di setiap dokumen.
Desain diproses dengan cepat, penggunaan CSS untuk mengerjakan desain halaman web memang terbukti mempercepat proses pembangunan sebuah halaman web. Hal ini dikarenakan pembagian kerja antara HTML yang berperan membangun struktur web dan CSS dengan perannya terfokus pada desain web. Adanya CSS function dapat memungkinkan pengembang menerapkan satu dokumen dapat muncul di berbagai halaman web tanpa penyalinan kode berulang.
Adaptif terhadap berbagai perangkat, fungsi CSS yang ini telah disinggung sebelumnya yaitu membuat konten halaman menjadi adaptif atau kompatibel terhadap berbagai perangkat atau browser dengan ukuran dan versi berbeda. CSS memungkinkan sebuah dokumen dibuka dalam perangkat terbaru dan versi lamanya, begitu pula berlaku pada versi browser yang dipakai pengguna.
Baca juga: 7 Cara menjadi hacker profesional dan rekomendasi Website-nya
Mengapa perintah CSS diperlukan?
Mengapa perintah CSS diperlukan?
Perintah CSS diperlukan untuk mengatur warna, bentuk dan ketebalan font, serta hal lain menyangkut desain (Sumber: Pexels)
Perintah CSS atau CSS functions diperlukan untuk mengatur warna, ketebalan font, dan lain sebagainya. Adapun berbagai perintah atau CSS functions ini antara lain adalah:
CSS Function Deskripsi
attr() Mengembangkan nilai atribut dari elemen yang dipilih
calc() Memungkinkan pengembang untuk melakukan perhitungan atau penentuan nilai properti CSS
counter() Mengembalikan nilai saat ini
cubic-bezier() Mendefinisikan kurva Cubic Bezier
hsl() Mendefinisikan warna menggunakan model Hue-Saturation-Lightness (HSL)
hsla() Mendefinisikan warna menggunakan model Hue-Saturation-Lightness-Alpha (HSLA)
linear-gradient() Menentukan gradien linier sebagai gambar latar belakang, umumnya minimal dua warna di atas dan bawah
radial-gradient() Menentukan gradien radial sebagai gambar latar belakang, umumnya dua warna dari pusat ke tepi halaman
repeating-linear-gradient() Mengulangi gradien linier
repeating-linear-gradient() Mengulangi gradien radial
rgb() Mendefinisikan warna menggunakan model Red-Blue-Green (RGB)
rgba() Mendefinisikan warna menggunakan model Red-Blue-Green-Alpha (RGBA)
var() Menyisipkan nilai properti khusus
Perintah atau CSS function ini amat penting secara umum untuk membangun desain pewarnaan halaman situs. Di sisi lain, HTML juga digunakan untuk membuat elemen yang nantinya didesain dengan CSS. Elemen ini dapat berupa paragraf atau hal lainnya yang akan diberi warna atau pertebalan jenis font. Berikut ini adalah contoh pengodean HTML dalam mendesain sebuah tulisan atau tampilan dari jenis Inline CSS.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:#009900; font-size:50px;
font-style:italic; text-align:center;">
GeeksForGeeks
</p>
</body>
</html>
Hasil:
perintah CSS diperlukan
Contoh penulisan kode CSS dan hasilnya (Sumber: geeksforfeeks.org)
3 Macam CSS dalam kode HTML
3 Macam CSS dalam kode HTML
Pengaturan style elemen kode HTML memiliki implementasi yang berbeda-beda (Sumber: Pexels)
Menurut GeeksforGeeks, CSS memiliki tiga tipe yang dipakai untuk mengatur style pada sebuah halaman situs yang mengandung elemen kode HTML. Proses pengodean ini nantinya akan mengatur warna latar belakang halaman situs, ukuran font, kelompok font yang dipakai, warna, dan lain sebagainya. Semua hal ini diterapkan pada properti elemen halaman web agar tampak menarik.
Adapun 3 macam CSS ini adalah sebagai berikut:
1. External CSS
CSS eksternal ini berisi dokumen CSS terpisah yang hanya mencakup style properti dengan atribut-atribut seperti class, ID, heading, dan lain sebagainya. Properti CSS jenis ini ditulis dalam dokumen terpisah dengan ekstensi “.css” dan harus ditautkan ke dokumen HTML menggunakan tag tautan. Hal ini berarti style dalam setiap elemen hanya dapat diatur sekali dan akan diterapkan di seluruh halaman web.
2. Inline CSS
Inline CSS berisi properti CSS di bagian body yang dilampirkan dengan elemen tertentu dalam bentuk sebaris. Jenis style dari CSS ini ditentukan dalam tag HTML menggunakan atribut style khusus. Contoh dari CSS jenis ini dapat dilihat dari contoh pengodean di bagian sebelumnya.
3. Internal CSS
Internal CSS juga dikenal sebagai embedded CSS yang dapat digunakan ketika satu dokumen HTML harus ditata secara unik. Kumpulan aturan CSS harus berada di dalam dokumen HTML di bagian head section. Contoh dari pengodean Internal CSS adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
.geeks {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div class ="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Hasil:
Internal CSS
Contoh pengodean jenis Internal CSS (Sumber: geeksforgeeks.org)
Baca juga: Cara ampuh menjadi Back-End Developer yang andal
Jika disimpulkan, HTML tetaplah menjadi dasar dari pembangunan sebuah halaman web. HTML tetap digunakan untuk menyusun situs web dan aplikasi web. Sedangkan CSS digunakan untuk mengembangkan halaman web dengan menata situs web beserta aplikasinya dalam urusan desain dan penentuan warna maupun font. Pembagian tugas antara HTML dan CSS ini membuat proses pengembangan web lebih efektif dan efisien.
Nah, untuk kalian yang memiliki keahlian di bidang pengodean dan pengembangan web rasanya pemahaman semacam ini sudah pasti mendukung kinerja kalian. Dan tentu saja, potensi kalian amat berguna bagi kehidupan bisnis yang kini bergantung pada proses pemasaran digital melalui web maupun situs jejaring pada umumnya. Peran kalian akan berguna untuk membuat situs perusahaan menjadi menarik dan mengundang prospek konsumen.
Bagi kalian yang memiliki keahlian di bidang pemrograman dan pengembangan web dapat mendaftarkan diri melalui EKRUT untuk membuka lebar kesempatan kalian untuk mengembangkan karier. EKRUT akan membantu menghubungkan kalian dengan perusahaan yang mencari kandidat untuk posisi pengembang web. Tunggu apa lagi, klik tautan di bawah ini dan daftarkan dirimu.
Nah gitu aja materi nya yang ku bagikan
Maap kalo GK lengkap :)
Saya pamit
Assalamualaikum
Copyright@D1kSec
Komentar
Posting Komentar