Inilah Pengertian dan Struktur Dasar CSS

A. Pengertian CSS

CSS adalah bahasa Cascading Style Sheet dan umumnya digunakan untuk mengontrol tampilan elemen yang ditulis dalam bahasa markup, seperti HTML. CSS digunakan untuk memisahkan konten dari tampilan visualnya di halaman web.

CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. Anda hanya perlu menulis markup untuk situs.

Tags, seperti <font>, diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan masalah ini.

HTML dan CSS terkait erat. Karena HTML adalah bahasa markup (Fondasi situs) dan gaya tambalan CSS (untuk semua aspek yang terkait dengan tampilan halaman web), kedua bahasa pemrograman ini harus bekerja secara paralel.

B. Sejarah CSS

CSS pertama berasal dari lahirnya SGML pada tahun 1970-an. CSS telah berkembang sangat cepat sejak kemunculannya. Bentuk dasar CSS yang tersebar luas saat ini merupakan gagasan dari seorang programmer bernama Hako Wium Lie, yang mempresentasikan proposalnya untuk Cascading HTML Style Sheet (CHSS) pada Oktober 1994 (Pada konferensi W3C di Chicago, Illinois). Kemudian dia dan temannya bernama Bet Bos mengembangkan Standar CSS.

CSS secara resmi dirilis pada akhir Tahun 1996 (CSS Level 1 menyusul pada bulan Desember). Proyek tersebut dibantu oleh seorang programmer bernama Thomas Reardon dari perusahaan perangkat lunak terkenal Microsoft.

Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standar dalam pembuatan halaman web. Tujuan utamanya untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan halaman website.

CSS1 mendukung pengaturan tampilan dalam hal :

2. CSS2

CSS2 ini dibuat untuk menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard dari tahun 1998 hingga saat ini. CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer.

3. CSS3

CSS3 merupakan versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS3 dapat melakukan animasi halaman website, seperti animasi warna dan 3D. Selain itu, banyak fitur baru, yaitu :

C. Kelebihan dan Kekurangan CSS

Sangat mudah untuk mengetahui situs mana yang menggunakan CSS dan mana yang tidak. Anda pasti sudah membuka situs web tersebut, tetapi setelah beberapa saat tidak mau memuat, malah menampilkan latar belakang putih yang didominasi teks hitam dan biru. Situasi ini menjelaskan bahwa CSS situs web tidak dapat dimuat dengan benar atau situs web tidak memiliki CSS sama sekali. Umumnya website semacam itu hanya menggunakan HTML.

Sebelum menggunakan CSS, semua gaya harus dibungkus (Stylizing) dengan Tag HTML. Itu berarti Anda harus mendeskripsikan latar belakang, warna font, perataan, dll secara terpisah.

Dengan CSS, Anda dapat mengontrol tampilan segala sesuatu di file yang berbeda, menentukan gaya, lalu mengintegrasikan file CSS dengan markup HTML. Ini membuat markup HTML lebih mudah dipelihara.

Singkatnya, dengan CSS Anda tidak perlu berulang kali mendeskripsikan tampilan setiap elemen. Anda tidak membuang waktu, kode yang digunakan lebih pendek dan kesalahan diminimalkan. Karena kemungkinan penyesuaian hampir tidak terbatas, CSS memungkinkan Anda menerapkan banyak gaya ke satu halaman HTML. 

CSS menggunakan sintaks berbasis bahasa Inggris sederhana yang memiliki seperangkat aturan yang mengaturnya. Seperti yang telah kami sebutkan sebelumnya, HTML tidak dibuat untuk menerapkan elemen style, hanya markup halaman saja. HTML dirancang semata-mata untuk mendeskripsikan konten. Sebagai contoh : <p>This is a paragraph.</p>.

Satu yang menjadi pertanyaannya sekarang, bagaimana caranya style paragraf? Struktur syntax CSS cukup sederhana. Struktur ini memiliki selector dan declaration block. Pilih elemen yang diinginkan, kemudian deklarasi (declare) yang harus Anda lakukan terhadap elemen tersebut.

Ada berbagai rule yang harus diingat. Meskipun demikian, rule struktur cukup simpel dan sederhana.

Mari kita lihat contoh di bawah ini :

<style>
p {
 color: blue;
 text-weight: bold;
}
<style>

<style>
    p {
       text-align: center;
       font-size: 16px;
       color: pink;
      
    }
</style>

Beberapa Kunci pada CSS Cheat Sheet

E. Cara memasukkan (Insert) Kode CSS

CSS Style internal dimuat setiap kali situs disegarkan dan sisi negatifnya adalah perlu waktu lebih lama untuk memuat. Gaya CSS yang sama tidak dapat digunakan di halaman lain karena sudah berfungsi di satu halaman.

Namun dibalik kekurangannya, inner style CSS memiliki beberapa kelebihan. Salah satunya adalah kemudahan berbagi template untuk pratinjau karena CSS hanya ada di satu halaman.

Ada 3 cara yang bisa Anda lakukan untuk menerapkan CSS pada file HTML Anda :

External merupakan CSS style yang paling mudah dan tidak menyulitkan. Semuanya dilakukan secara eksternal pada file .css. Styling dilakukan di file terpisah, lalu terapkan CSS ke halaman mana pun yang Anda inginkan. Sayangnya, CSS Style External juga memperlama waktu loading.

CSS Style Inline menggunakan elemen spesifik yang memuat tag <style>. Karena setiap komponen harus di-stylize, maka Inline bukan metode yang tepat jika Anda ingin menggunakan CSS dengan cepat.

Namun di sisi lain, hal tersebut mendatangkan keuntungan. Misalnya, jika Anda ingin mengubah satu elemen, atau menampilkan pratinjau dengan cepat, atau Anda tidak punya akses ke file CSS.

Dengan External CSS, Anda bisa mengubah tampilan keseluruhan website Anda hanya dengan 1 file.

Setiap Page HTML harus memiliki sumber referensi (href) jika ingin menyisipkan external CSS. <href> diletakan di dalam elemen <link> di dalam bagian <head>.

3. Inline CSS

Sama persis dengan Internal CSS, hanya saja untuk inline anda menyisipkan CSS pada elemen (Contoh : h1, h2, p) yang anda pilih.Cara penggunaannya yaitu dengan menginput atribut Style pada elemen.

F. Struktur Dasar CSS

Id selector menggunakan atribut id pada HTML untuk memilih elemen tertentu.

Id dari elemen bersifat unik dalam suatu laman, jadi Id selector digunakan untuk memilih satu elemen unik.

Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti dengan id elemen.

b. Class Selector

Class selector digunakan untuk memilih elemen HTML dengan class atribut tertentu. Untuk memilih elemen dengan class tertentu, tulis karakter titik (.), diikuti dengan nama class.

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 

</body>
</html>

Sumber : W3schools.com

Anda juga bisa menargetkan elemen tertentu saja yang menggunakan CSS. Contoh hanya class <p> saja yang akan berwarna merah dan rata tengah.

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p> 

</body>
</html>

Output :

Sumber : W3schools.com

c. Grouping Selector

Grouping Selector yakni memilih semua elemen HTML dengan style css yang sama. Untuk Group Selector, pisahkan setiap selector dengan tanda koma.

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

Output :

Sumber : W3schools.com

2. Box Model

Secara esensial, CSS box model adalah kotak yang mengelilingi atau membungkus elemen HTML. CSS box model terdiri dari margin, border, padding, dan konten.Dibawah ini adalah contohnya :

Terima Kasih 😄😘👌👍 :)

Wassalamu‘alaikum wr. wb.