Mengenal CSS - CSS adalah singkatan dari Cascading Style Sheet yaitu dokumen web yang berfungsi mengatur elemen HTML dengan berbagai property yang tersedia sehingga dapat tampil dengan berbagai gaya yang di inginkan. Sebagian orang mengaggap CSS bukan termasuk salah satu bahasa pemrograman karena memang strukturnya yang sederhana, hanya berupa kumpulan-kumpulan aturan yang mengatur style elemen HTML.
Cara kerja CSS dalam memodifikasi HTML dengan memilih elemen HTML yang akan diatur kemudian memberikan property yang sesuai dengan tampilan yang di inginkan. Dalam memberikan aturan pada elemen HTML, skrip CSS terdiri atas 3 bagian yaitu selector untuk memilih elemen yang akan diberi aturan, property yang merupakan aturan yang diberikan value sebagai nilai dari aturan yang diberikan.
Berikut ini adalah dasar - dasar dari CSS :
a. Penulisan CSS
Cara penulisan CSS dibedakan menjadi 3 macam yaitu inline, internal dan external. Ketiganya dapat digunakan sesuai dengan kebutuhan.
1. Inline CSS yaitu menuliskan CSS dengan menggunakan atribut style yang langsung dituliskan di dalam tag HTML. Cara ini cocok digunakan jika CSS memiliki satu atau dua property saja dan bersifat permanen. Salah satu kekurangan penggunaan cara ini yaitu susahnya ketika terjadi perbaikan desain. Contoh :
<!DOCTYPE html>
<html>
<head>
<title> Coba Inline </title>
</head>
<body>
<p style="color: red"> Tulisan ini berwarna merah </p>
<p style="font-weight: bold"> Tulisan ini dicetak tebal </p>
</body>
</html>
Dari skrip diatas, dapat dilihat bahwa penggunaan CSS dengan cara ini membuat skrip HTML menjadi panjang, apalagi jika terdiri dari beberapa property. Tentu membuat tampilan skrip menjadi agak tidak rapi.
2. Internal CSS yaitu penulisan CSS menggunakan tag <style> ... </style> yang ditulis di dalam <head> ... </head>. Cara ini cocok digunakan jika skrip CSS hanya digunakan pada 1 halaman HTML dan baris CSS hanya terdiri dari sedikit selector. Cara ini masih memiliki kekurangan, yaitu skrip CSS tidak dapat digunakan untuk mengatur file HTML lain. Contoh :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p> Tulisan ini berwarna merah </p>
<p> Tulisan ini dicetak tebal </p>
</body>
</html>
3. External CSS yaitu penulisan CSS dimana skrip CSS disimpan dalam file tersendiri dengan eksistensi .css dan terpisah dengan file HTML. untuk menghubungkan file HTML dan CSS, file CSS dipanggil dalam elemen <head> ... </head> pada file HTML seperti berikut.
<link rel="stylesheet" href="nama file.css.css">
Jika file CSS terdapat pada suatu folder, maka nama folder disertakan pada atribut href. Aturan nya sama seperti penulisan nilai src pada tag <img>. Contoh :
<!DOCTYPE html>
<html>
<head>
<title> Internal </title>
<link rel="stylesheet" href="external.css">
</head>
<body>
<p> Tulisan ini berwarna merah </'p>
<p> Tulisan ini dicetak miring </p>
</body>
</html>
Berikut ini isi dari file external.css :
p{
color: red;
font-weight: bold;
text-transform: uppercase;
}
Cara penulisan external CSS adalah cara penulisan yang paling disarankan. Kelebihan dari cara penulisan ini adalah, file CSS dapat digunakan oleh banyak file HTML. Tinggal panggil file CSS dari file HTML yang akan menggunakannya.
Gimana udah cukup tau kan apa itu CSS ? Cukup sekian dulu artikel kali ini, semoga bermanfaat :)
Comments