Bagi seorang pengembang website, pasti Anda pernah mendengar Cascading Style Sheets atau biasa disebut dengan CSS. CSS ini menjadi salah satu hal yang harus dipelajari oleh para pengembang website sehingga tampilan website menjadi lebih bagus. Oleh karena itu, apabila Anda merupakan seorang pengembang pemula dan ingin menciptakan website dengan tampilan bagus, maka Anda harus melakukan pengenalan dasar CSS untuk pemula.
Untuk mampu mengetahui dasar-dasar dari CSS, Anda perlu mempelajari cukup banyak hal. Untuk mempelajari hal-hal dasar tersebut, tentu Anda harus melakukannya secara urut dan teratur sehingga materi yang diajarkan akan lebih mudah dipahami. Apabila Anda ingin mengenal CSS secara dasar, maka Anda dapat menyimak penjelasan yang lengkap dan mudah dipahami berikut ini.
Pengenalan Dasar CSS untuk Pemula
Berikut ini adalah penjelasan mengenai berbagai materi yang perlu dipelajari terlebih dahulu bagi Anda seorang pengguna pemula CSS.
Apa Itu CSS
Cascading Style Sheets atau CSS adalah berbagai kumpulan kode pemrograman yang biasa digunakan untuk membuat desain sehingga tampilan elemen yang biasanya tertulis dalam bahasa markup. Fungsi dari CSS itu sendiri yakni memisahkan konten dari suatu website dengan tampilan visualnya.
Bisanya penggunaan CSS selalu tidak dapat dilepaskan dari HTML. Kedua hal tersebut saling berkaitan secara erat karena salah satu bahasa markup yang sering digunakan adalah HTML. Lebih tepatnya, HTML merupakan bahasa markup yang menjadi pondasi suatu website, sedangkan CSS berperan untuk memperbaiki style sehingga tampilan website tersebut menjadi lebih bagus.
Ketentuan dan Cara Penulisan Kode CSS
Setelah mengetahui apa itu CSS, kini saatnya untuk memasuki bagian pengenalan terhadap ketentuan serta cara penulisan kode CSS. Bagian ini juga merupakan salah satu materi pengenalan CSS dasar untuk pemula yang tidak boleh untuk dilewatkan.
Ketentuan serta cara penulisan kode CSS yang benar dan tepat dapat Anda simak dalam penjelasan berikut ini dengan seksama.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Penulisan CSS</title>
<style type="text/css">
body {
font-size: 14px;
color: navy;
}
p {
font-family: calibri, helvetica, sans-serif;
}
h1, h2 {
text-decoration: underline;
font-size: 23px;
color: green;
}
</style>
</head>
<body>
<h1>Belajar Aturan dan Cara Penulisan Kode CSS</h1>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla erat dolor, ullamcorper in ultricies eget,
fermentum rhoncus leo. Curabitur eu mi vitae metus
posuere laoreet.</p>
<p>Eam facilis omittantur at, usu efficiantur neglegentur
delicatissimi et, in per vero splendide persequeris.
Semper persius his te, ea mea omnium aliquip alienum,
in gloriatur vituperata has. An per dicat clita oporteat,
explicari deterruisset ex per. Liber tibique ullamcorper
ei duo, at hinc civibus oporteat his.</p>
<p>Nam verear constituto an, eu latine bonorum euripidis
vim. Quidam maiorum interesset pri id, usu vero saepe
graeci ea. Prompta nominati oportere te usu.
Ad eam nulla accusamus.</p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,
fermentum rhoncus leo. Curabitur eu mi vitae
metus posuere laoreet.</p>
</body>
</html>
Kode CSS tersebut akan membuat tampilan website tampak seperti gambar berikut.
Seperti yang terlihat dalam contoh yang diberikan di atas, ketentuan penulisan kode CSS untuk halaman HTML adalah sebagai berikut.
- Pada awal penulisan CSS, Anda harus menempatkan selector di bagian awal
- Seluruh isi kode program yang meliputi properti dan nilai harus Anda letakkan setelah selector. Selain itu, Anda juga harus meletakkannya di antara tanda kurung “{“ dan “}”
- Untuk memisahkan antara satu properti dengan property yang lain, maka pemisahan dilakukan dengan menggunakan tanda titik koma “;”
- Pemisahan antara properti dan nilai dilakukan dengan menggunakan tanda titik dua “:”
- Khusus untuk properti yang memiliki dua kata, maka Anda harus mengganti penggunaan spasi yang memisahkan kedua kata tersebut dengan menggunakan tanda hubung (-)
- Apabila terdapat properti yang berada di baris terakhir, maka tetap gunakan tanda “;” sebagai penutup.
Cara Menginput Kode CSS ke Halaman HTML
Pengenalan CSS dasar untuk pemula selanjutnya yaitu memahami cara menginput kode CSS ke halaman HTML. Berikut ini adalah beberapa metode yang bisa dilakukan untuk menginput kode CSS ke halaman HTML.
Metode Inline Style
Metode ini merupakan metode yang dilakukan dengan cara memasukkan secara langsung kode CSS ke dalam tag yang ada di HTML menggunakan atribut style. Berikut ini adalah contoh penerapan metode inline style CSS.
<!DOCTYPE html> <html> <head> <title>Contoh Inline Style CSS</title> </head> <body> <h2 style="background-color:black; color:white" >
Text ini akan bewarna putih dan background warna hitam
</h2> </body> </html>
Hasil dari penggunaan metode inline style dari contoh di atas akan menghasilkan tampilan website dengan teks berwarna putih dan background berwarna hitam. Berikut ini adalah gambar tampilannya.
Metode Internal Style Sheets
Metode internal style sheets juga merupakan sebuah metode penginputan kode CSS ke halaman HTML yang perlu Anda pahami. Metode ini sering juga disebut dengan embedded style sheets. Cara kerja dari metode ini yaitu dengan memisahkan kode CSS dengan tag HTML tetapi masih berada di dalam satu halaman HTML.
Apabila sebelumnya atribut style berada di dalam tag, maka dengan menggunakan metode ini atribut tersebut dikumpulkan pada sebuah tag <style>. Letak dari tag ini haruslah berada di bagian <head> dari suatu halaman HTML.
Berikut ini adalah contoh dari penggunaan metode internal style sheets yang dapat biasa digunakan dalam pemrograman.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Internal Style CSS</title>
<style type="text/css">
h2 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2> </body> </html>
Metode External Style Sheets
Materi pengenalan CSS dasar untuk pemula yaitu cara memasukkan kode CSS ke halaman HTML dengan menggunakan metode external style sheets. Metode ini digunakan untuk “mengangkat” kumpulan kode CSS ke suatu file yang terpisah dari halaman HTML. Apabila terdapat halaman yang membutuhkan kode CSS tersebut, maka Anda bisa langsung “memanggil” file tersebut.
Langkah pertama yang perlu dilakukan jika ingin menggunakan metode external style sheets, yaitu memindahkan isi dari tag <style> ke sebuah halaman baru. Kemudian Anda harus menyimpan file yang berisi kode css tersebut dengan format .css. Berikut ini adalah contoh isi dari file yang berisi kode CSS yang dibuat dengan metode external style sheets.
h2 {
background-color:black;
color:white;
}
Setelah membuat file eksternal, kini saatnya mengetahui cara untuk mengimport kode CSS yang disimpan di file tersendiri tersebut. Apabila Anda hendak memasukkan file eksternal tersebut ke dalam CSS lain yang sedang dibuat, maka berikut ini adalah contoh penggunaannya.
<!DOCTYPE html> <html> <head> <title>Contoh External Style CSS</title> <style type="text/css"> @import url(belajar.css); </style> </head> <body> <h2>
Text ini akan bewarna putih dan background warna hitam
</h2> </body> </html>
Demikian informasi yang dapat membantu pengembang pemula untuk memahami tentang seluk beluk CSS secara mendasar. Pengenalan CSS dasar untuk pemula di atas berisi informasi mendasar yang perlu dikuasai oleh pengembang pemula. Oleh karena itu, pastikan bahwa Anda telah memahami keseluruhan materi yang disampaikan secara jelas. Dengan begitu, Anda dapat mendesain tampilan website dengan cantik dan menarik.
