Dasar Pengenalan Kode CSS di Template Blogger - Setelah kita membahas Susunan Dasar Pemrograman HTML Untuk Template Blogger dan Kode Dasar Template Blogger Buatan Sendiri kali ini kita akan belajar tentang CSS. CSS ini sangat penting karena CSS berguna untuk membuat Style pada tampilan.
Pengertian CSS
Sebelum mempelajari CSS anda harus mengetahui HTML DASAR terlebih dahulu yang bisa anda cek di link atas. CSS singkatan dari Cascading Style Sheet . CSS merupakan sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan komponen-komponen web yang beragam sesuai dengan keinginan kita.
Cascading Style Sheet atau CSS
CSS mempunyai 3 Bentuk yaitu Inline, Internal dan External.
1. Inline
Bentuk CSS ini letaknya ada di dalam kode html yang ingin kita beri style. CSS ini hanya di khususkan untuk satu kode saja dan tidak bisa digunakan untuk kode yang lain. Contoh kita akan memberikan style pada <body>.
<body style="background-color:#ddd ; margin:0px ; ">
bisa anda lihat jika kita menggunakan CSS inline bisa kita tambahkan style="Variabel Style", dimana variable style kita lebih dari satu harus di tutup dengan ( ; ).
2. Internal
Sesuai dengan namanya CSS ini terletak di dalam kode HTML tetapi terletak di antara kode <head> dan </head> . Untuk CSS ini harus di awali dengan kode <style type='text/css'> dan di tutup dengan </style>.
<html>
<head>
<style type='text/css'>
body { background-color :#ddd; }
</style>
<head>
<body>
<p> ini postingan <p>
</body>
</html>
Tambahan :
CSS ID dan Class
Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik . Id pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan “#“. Aturan style bawah ini akan diterapkan pada elemen dengan id = “para1″
#para1
{
text-align:center;
color:red;
}
nb: JANGAN memulai id dengan menggunakan nomor karena ini tidak akan bekerja pada Mozilla Firefox.
Selector class digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda dengan pemilih id, kelas pemilih yang paling sering digunakan pada beberapa elemen . Dengan ini memungkinkan anda untuk menentukan gaya dan elemen HTML dengan class yang sama .
Selector Class menggunakan atribut class HTML, dan didefinisikan dengan “.”
Pada contoh di bawah ini, semua elemen HTML dengan class = “center”akan dibuat rata tengah :
.center {text-align:center;}
kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang dipengaruhi oleh kelas.
Pada contoh di bawah, elemen p semua dengan class = “center”akan di buat rata tengah :
p.center {text-align:center;}
nb: JANGAN memulai nama kelas dengan angka karena ini hanya didukung di Internet Explorer.
3. External
merupakan ideal ketika gaya diterapkan pada banyak halaman , dengan ini anda dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian kepala
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
dengan eksternal style sheet dapat ditulis dalam bentuk editor teks apapun , dan harus disimpan pada ekstensi css . sebuah contoh dari file style sheet dibawah ini :
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
nb: JANGAN meninggalkan ruang antara nilai properti dan satuan! “margin-left: 20 px” (bukan “margin-left: 20px”) akan bekerja di IE, tapi tidak di Firefox atau Opera.
Dengan pembelajaran kali ini semoga anda lebih paham tentang apa , fungsi dan cara menggunakan CSS.
