Apa itu CSS? Pengertian, Sejarah, Fungsi, Struktur + Contoh

Apa Itu CSS? – Diantara banyak orang ada yang sudah tau tentang istilah dari css, dan ada juga yang belum tau apa itu css? untuk itu saya akan memberikan sebuah informasi tentang css, bisa dibilang penting – gak terlalu penting untuk beberapa pihak.

Tapi tidak ada salahnya kalian meluangkan waktu yang sedikit untuk membaca informasi ini, siapa tau kalian jadi tertarik dengan dunia website.

Karena, website sendiri menjadi sebuah kebutuhan orang-orang untuk mencari informasi, berbisnis, social, komunitas dan kepentingan lainnya.

Kita pasti pernah mencari sesuatu informasi melalui pencarian google atau mesin pencarian lain, dan disana kita akan di arahkan ke website yang memuat informasi yang anda cari.

Pengertian CSS

apa itu css
Source: Unsplash

 

CSS adalah bahasa yang berisi perintah-perintah digunakan untuk menjelaskan tampilan halaman website di dalam bahasa markup (HTML), kepanjangan dari css adalah Cascading Style Sheets.

Sebagai mana yang telah di jelaskan dalam artikel saya sebelumnya tentang pengertian HTML, dimana CSS diibaratkan sebagai sebuah baju yang menjadi style untuk html itu sendiri.

Hubungan antara CSS dan HTML merupakan hubungan yang tidak bisa dipisahkan dalam sebuah web. Bagi kalian yang ingin belajar CSS tentunya tahapan yang harus kalian pelajari pertama adalah HTML setelah kalian sudah paham dengan html kalia bisa belajar CSS dengan mudah.

Sejarah CSS

apa itu css
Source: Unsplash

Awal muncul CSS (Cascading Style Sheet) setelah munculnya SGML (Standard Generalized Markup Language) pada tahun1970an, dan menjadi sebuah teknologi internet yang diresmikan oleh  W3C (world wide web consortium) pada tahun 1996.

Format dasar dari CSS yang biasa digunakan oleh orang-orang merupakan ide dari Hakon Wium Lie dalam proposalnya yang berjudul Cascading HTML Style Sheet ( CHSS) pada tahu 1995 pada konferensi W3C (world wide web consortium) di Chicago, Illinois.

Setelah itu Lie mengembangkan standar dari CSS dengan temannya yang bernama Bert Bos.

Setelah diresmikan oleh W3C tahun 1996, di akhir tahun itu CSS level 1 resmi dipublikasikan pada bulan Desember. Proyek CSS level 1 ini juga didukung oleh programmer perusahaan ternama yaitu Microsoft yang bernama Thomas Reardon.

Dalam penetapan CSS level 1 yaitu bertujuan untuk mengurangi tag-tag baru pada Netscape dan Internet explorer, dimana keduanya bersaing mengembangkan tag-tag mereka sendiri untuk tampilan web.

CSS level satu mendukung pengaturan seperti: Font, Warna, Text, Background dan elemen-elemen lainnya, Text atribut (seperti:spasi antar baris, kata dan huruf), posisi text, gambar, table, margin, border, dan padding.

Setelah itu standar CSS mengalami penyempurnaan-penyempurnaan dan terus dikembangkan hingga versi terbaru:

  1. CSS level 2, disempurnakan oleh W3C pada tahun 1998, dimana terjadi perubahan pada format dokumen yang bisa ditampilkan di printer.
  2. CSS level 3, pada level ini terjadi perkembangan dimana bisa menampilkan animasi warna dan 3D pada halaman website, dan fitur lain seperti: multiple background, drop-shadow, border-image, border-radius, CSS Object Model dan CSS-Math, untuk saat ini CSS level 3 menjadi yang terbaru.

Fungsi CSS

apa itu css
Source: Pexels

seperti yang telah disinggung di atas yaitu tentang hubungan antara html dan css bagaikan tubuh dan pakaiannya. Fungsi dari CSS sama halnya seperti fungsi pakaian yang dikenakan tubuh.

Fungsi utama dari CSS adalah untuk mendesain, memodifikasi, membentuk serta mengubah tampilan halaman dalam sebuah website.

CSS bekerja didalam tag-tag <html> yang memberikan kesederhanaan tag html sehingga tampilan halaman website menarik dan efisien.

Kelebihan dan Kekurangan dari CSS

kelebihan dan kekurangan css
Source: Unsplash

Meskipun dari tahun awal penciptaannya hingga sekarang dan mendapat penyempurnaan dan perkembangan, CSS juga memiliki beberapa kelebihan dan kekurangan diantaranya:

Kelebihan dari CSS

  1. Mudah dipelajari,
  2. CSS merupakan pemisah dari konten web dan desainnya,
  3. desain dapat diatus seefisien mungkin,
  4. menghemat penulisan kode, karena dalam satu perintah CSS bisa dipakai beberapa kali,
  5. hemat waktu dalam pengerjaannya, saat membuat ataupun memodifikasi halaman web.
  6. file CSS terpisah, sehingga ukuran file HTML jadi lebih kecil.

Kekurangan dari CSS

  1. tidak semua web browser bisa menartikan perintah-perintah atau sintaks CSS,
  2. desain yang sudah dibuat kadang terlihat rapih di suatu browser , tapi malah acak-acakan di browser lain.
  3. kekurangan di atas masih bisa di atasi dengan script-script khusus atau yang disebut CSS hack.

Macam Macam CSS

Source: Unsplash

Penggunaan CSS semakin luas dan terus mendapat pengembangan, dimana hal ini juga mempermufah bagi seoorang web desainer dalam mengelola halaman websitenya.

Ada 3 cara para web disainer mengelola halaman websitenya dengan CSS:

Internal style sheet ( Embedded styl sheet )

kode CSS dipasang di dalam tag <head> HTML, style ini sering digunakan oleh para web desainer untuk mengatur laman web menjadi tampilan yang menarik.

Salah satunya adalah memudahkan kita dalam sharing tamplate pratinjau (preview) yang hanya ada dalam satu halaman, atau dalam satu paragraf ada kalimat yang berbeda namun terus berulang.

Tapi ada satu hal yang menjadi kendala untuk internal style sheet yaitu diload pada setiap me-refresh website dan waktu loading yang semakin lama. CSS style yang sama juga tidak bisa dipakai di halaman lain karena sudah aktif di suatu halaman.

Inline style sheet

Kode CSS langsung dipasang di tag HTML dengan tag <style> hal ini bukan sebuah rekomendasi jika kita ingin memaksimalkan CSS dengan.

Dalam penerapannya inline style dapat mendatangkan keuntungan misalnya, ketika kita ingin mengubah satu element, menampilkan preview (pratinjau) dengan cepat, atau tidak ada akses ke file CSS.

External style sheet

File CSS berbeda dari file HTML, cara ini merupakan cara untuk memberikan style pada halaman web kita dengan mudah dan tidak menyulitkan. Dimana semua yang dilakukan secara terpisah dan disimpan dalam file .css.

Meskipun terpisah kita bisa menerapkan style CSS ke halaman yang kita inginkan atau yang kita tuju. Cara external style lebih praktis daripada inline style karena dapat digunakan berulang-ulang untuk halaman yang berbeda dan juga memperkecil ruang HTML karena file yang terpisah.

CSS external syle sheet menggunakan tag <link rel>, dimana tag yang menghubungkan halaman codingpada external style yang terpisah.

Baca juga: Beberapa Contoh Javascript Dalam Halaman Web

Struktur Dasar CSS

setruktur dasar penulisan sintak css
Source: MDN – Mozila

Struktur penulisan sintak dalam css memiliki tiga bagian yaitu: selector, property, dan value.

  • Selector yaitu nama-nama untuk style-style yang berbeda entah itu style internal ataupun style external atau elemen yang mendefinisikan style CSS.
  • Property yaitu atribut untuk mendefinisikan selector.
  • Value adalah nilai dari sebuah property.

Adapun tanda { } (curl bracket) digunakan untuk memberikan nilai pada font, warna dan lainnya, dimana dalam tag <body> mengarah kepada selektor-selektor untuk mengaktifkan style tersebut.

berikut contoh struktur dasar penulisan sintak pada CSS:

class selector

< html>
< head> < title>Class Selector< /title>
< style type="text/CSS">
< !-- f.times {font-family: times;} f.verdana {font-family: verdana;} .courier {font-family: "courier";} -->
/style>
< /head>
< body>
< f class="times"> Ini adalah Contoh penggunaan class sebagai selector, setiap huruf memiliki huruf times new roman
Ini adalah Contoh penggunaan class sebagai selector, setiap huruf memiliki huruf verdana</f><br/>

< f class="courier"> Ini adalah Contoh penggunaan class sebagai selector, setiap huruf memiliki huruf courier< /f>
< /body>
< /html>

Id selector

< html>
< head>
< title>ID Selector< /title>
< style type="text/CSS">
< !-- #times {font-family: times;} #verdana {font-family: verdana;} #courier {font-family: "courier";} -->
< /style>
< /head>
< body>
< div id="times"> Ini adalah Contoh penggunaan id sebagai selector, setiap huruf memiliki huruf times new roman< /div>< br>
< div id="verdana"> Ini adalah Contoh penggunaan id sebagai selector, setiap huruf memiliki huruf verdana< /div>< br>
< div id="courier"> Ini adalah Contoh penggunaan id sebagai selector, setiap huruf memiliki huruf courier< /div>
< /body>
< /html>

Inhertance / Pewarisan

< html>
< head>< title>inheritance< /title>
< style type="text/css">
B {background-color : green; color : white;}
< /style>
< /head>
< body>
< B>belajar membuat web dengan < fontsize="+1">< em>CSS< /em>< /font> sangatlah mudah. < br>
hanya dengan program notepad pun jadi.< /B>
< /body>
< /html>

Pseudo classess

selector:pseudo class { property: value; }

Pseudo Element

selector:pseudoelement {property: nilai;}  p:first-letter {font-size:5px; float:left;} p:first-line {font-weight:bold;}

Befor dan After

blockquote:before {content: open-quote;}
blockquote:after {content: close-quote;}
li:before {content: "POW: "}
p:before {content: url(images/gambar.jpg)}

Selector Kentekstual

< html>
< head>
< title>selector kontekstual < /title>
< style type="text/css">
b em {font-family: verdana; background: blue; color: white; }
< /style>
< /head>
< body>
< b>
belajar membuat web dengan <em> CSS </em>sangatlah mudah < br>
</b>
< em>hanya dengan program notepad pun jadi</em>
< /body>
< /html>

Semoga apa yang kalian cari disini bermanfaat dan semangat lagi dalam belajar website
Terimakasih😉😉😉
wasalam mu’alaikum wa rahmatullahi wa barakatuh

Leave a Reply

%d blogger menyukai ini: