Kali ini saya melanjutkan postingan tentang CSS yaitu syntax dalam CSS dan bagaimana cara memasukan CSS dalam halaman HTML.
Syntax CSS
Sebuah syntax CSS terdiri dari selektor dan blok deklarasi :
h1{color:blue; font-size:12px;}Keterangan :
h1 -- selector
color:blue; font-size:12px; -- blok deklarasi
color:blue -- deklarasi
color -- property
blue -- value
Selector berfungsi untuk membuat style pada elemen HTML.
Blok deklarasi berisi satu atau lebih deklarasi dipisahkan oleh titik koma.
Setiap deklarasi terdiri dari nama properti CSS dan value, yang dipisahkan oleh titik dua.
Sebuah deklarasi CSS selalu berakhir dengan titik koma, dan blok deklarasi dikelilingi oleh kurung kurawal.
Memasukan CSS
Ada tiga cara untuk memasukkan style sheet :
A. Eksternal Style Sheet
Dengan eksternal style sheet, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah hanya satu file.
Setiap halaman harus menyertakan referensi ke file style sheet eksternal dalam elemen <link>. Elemen <link> berjalan di dalam <head> :
<head>Eksternal style sheet dapat ditulis dalam teks editor. File tidak harus mengandung tag html. File style sheet harus disimpan dengan ekstensi .css. Berikut adalah contoh bagaimana file "mystyle.css" yang ditulis:
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
B. Internal Style Sheet
Internal Style sheet dapat digunakan jika satu halaman tunggal memiliki gaya yang unik. Internal style didefinisikan dalam elemen <style>, di dalam <head> halaman HTML :
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
C. Inline Style
Inline style dapat digunakan untuk menerapkan gaya yang unik untuk elemen tunggal. Untuk menggunakan inline style, tambahkan atribut style untuk elemen yang relevan. Atribut style dapat berisi properti CSS.
Contoh di bawah ini menunjukkan bagaimana untuk mengubah warna dan margin kiri dari elemen <h1> :
<h1 style="color:blue;margin-left:30px;">Ini adalah heading.</h1>
Sekian postingan dari saya, sekian dan terimakasih, semoga bermanfaat.
wassalamualaikum wr. wb.
Referensi :
- http://www.w3schools.com/css/css_syntax.asp
- http://www.w3schools.com/css/css_howto.asp
Tidak ada komentar:
Posting Komentar