Home » HTML » Memulai Mengembangkan Web: Pengenalan Singkat CSS

Memulai Mengembangkan Web: Pengenalan Singkat CSS

by Binsar Stefan
by Binsar Stefan

Cascading Style Sheets (CSS) adalah bahasa style sheet yang digunakan memodifikasi dokumen html. Sederhananya, CSS digunakan untuk memodifikasi hasil output tag yang terdapat pada dokumen HTML. CSS dikembangkan untuk memodifikasi presentasi dokumen HTML, seperti tata letak, warna, dan font. CSS dapat ditulis pada dokumen HTML yang sama atau yang dikenal dengan gaya inline style atau terpisah dari dokumen HTML.

Sejarah CSS

CSS pertama kali dibuat dan diusulkan oleh Hakon Wium Lie pada 10 Oktober 1994. Pada kala itu, Lie sedang bekerja dengan Tim Berners-Lee di CERN. Banyak bahasa yang digunakan untuk memodifikasi HTML pada saat itu dalam bentuk style sheet. Populer pada milis publik dan di kalangan W3C atau singkatan dari Worl Wide Web Consortium, CSS pada akhirnya di rekomendasikan dengan dengan nama CSS Reccomendation (CSS1) pada tahun 1996.

Pada akhirnya, proposal diajukan oleh Bert Bos dan diterima oleh World Wide Web Consortium, dan CSS1 mulai berkembang karena banyaknya yang menulis dan mengembangkan CSS1.

Sebenarnya CSS bukanlah hal yang baru, karena pada sebelumnya style sheets telah ada didalam satu bentuk yang disebut SGML atau singkatan dari Standard Generalized Markup pada tahun 1980an, dan CSS sedang dikembangkan untuk menyediakan style sheets untuk web. Salah satu yang membuat CSS sangat dipilih karena proses yang dibuat adalah gaya cascading.

Seiring dengan berkembangnya HTML, gaya penulisan pada HTML mulai melebar dan memiliki banyak variasi yang sangat banya untuk memenuhi permintaan pengembang web. Berasal dari alasan itu, CSS yang memiliki kemampuan untuk memenuhi variasi tersebut semakin populer.

Ditambah dengan CSS dapat memegang penuh kendali presentasi website, CSS berada pada puncak kejayaan karena fungsinya dapat dimaksimalkan oleh para designer website. Robert Cailliau yang juga dari CERN, mulai memisahkan struktur penulisan CSS dari HTML, yang sekarang menjadi keharusan oleh web designer.

Gaya penulisan CSS

Dalam menulis dokumen HTML dan memodifikasi dokumen tersebut dengan CSS, kalian memiliki beberapa pilihan yaitu, inline style css dan dokumen. Inline style css ialah memasukkan CSS pada baris kode kalian, sedangkan dokumen CSS adalah membuat dokumen baru dan membuat link pada dokumen HTML.

Inline Style CSS

Inline style CSS memiliki 2 model penggunaanya, yaitu memakai tag dan memasukkan nya didalam tag. Contoh

<head>
  <style type="text/css">
    p {color:blue; font-size: 12px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

Kode diatas adalah inline style css dengan memakai tag <style> untuk memberi tahu browser bahwa style css yang ditulis akan menjadi dasar style.

<!DOCTYPE html>
<html>
<body style="background-color:black;">
 
<h1 style="color:white;padding:30px;">Dosen IT tutorial</h1>
<p style="color:white;">DosenIT merupakan....</p>
 
</body>
</html>

Kode diatas adalah inline style dengan memasukkan CSS didalam tag.

Dokumen CSS

Setelah kalian mempelajari gaya penulisan inline style, maka selanjut nya adalah model penulisan dengan dokumen CSS. Model penulisan CSS ini merupakan model yang paling populer mengingat jika kalian ingin membuat website, kalian sangat ingin website kalian memiliki banyak gaya dalam memberikan informasi. Dokumen CSS akan kalian bisa hubungkan untuk memodifikasi dan merubah hasil dengan dokumen HTML kalian dengan menambah kan tag link, <link> pada bagian head kalian. Contoh:

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Lalu selanjutnya kalian dapat styling dengan menambahkan tag mana yang ingin kalian modifikasi. Contoh:

p {
   font-size: 12px;
   color: red;
   text-align: center;
}

Baris kode diatas adalah kalian ingin merubah teks pada paragraph kalian dengan besar font 12, berwarna merah, dan berada ditengah.

Kesimpulan

Mengenal dan mahir pada CSS adalah hal yang sangat penting dalam mengembangkan website. Website akan terlihat sangat kaku dan tidak rapih jika kalian tidak menambahkan elemen CSS didalamnya.

You may also like