Styling HTML dengan CSS
CSS singkatan C ascading S tyle S heets
Styling dapat ditambahkan ke elemen HTML dalam 3 cara:
- Inline - menggunakan atribut gaya elemen HTML
- Internal - menggunakan <style> elemen dalam HTML <head>
- Eksternal - menggunakan satu atau lebih file CSS eksternal
Cara yang paling umum untuk menambahkan styling, adalah untuk menjaga sintaks CSS di file CSS yang terpisah.Namun, dalam tutorial ini, kita menggunakan styling internal, karena lebih mudah untuk menunjukkan, dan lebih mudah bagi Anda untuk mencoba sendiri.
CSS Syntax
Styling CSS memiliki sintaks berikut:
element { property : value ; property:value }
Element adalah nama elemen HTML. Property adalah properti CSS. value adalah nilai CSS.
Beberapa gaya dipisahkan dengan titik koma.
Inline Styling (Inline CSS)
Styling inline berguna untuk menerapkan gaya yang unik untuk elemen HTML:
Styling inline menggunakan atribut style.
Styling inline ini mengubah warna teks dari judul tunggal:
<h1 style ="color:yellow">Ini Heading</h1>
Styling internal (Internal CSS)
Style sheet internal dapat digunakan untuk menentukan gaya yang umum untuk semua elemen HTML pada halaman.
Styling internal didefinisikan dalam <head> pada halaman HTML, dengan menggunakan <style> elemen:
Styling eksternal (External CSS)
Style sheet eksternal yang ideal ketika gaya diterapkan pada banyak halaman.
Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs dengan mengubah satu file.
Gaya eksternal didefinisikan dalam <head> pada halaman HTML, dalam <link> elemen:
CSS Fonts
Color properti CSS mendefinisikan warna teks yang akan digunakan untuk elemen HTML.
Properti CSS font-family mendefinisikan font yang akan digunakan untuk elemen HTML.
Properti CSS font-size mendefinisikan ukuran teks yang akan digunakan untuk elemen HTML.
<font> tag, didukung dalam versi HTML, tidak berlaku di HTML5.
CSS Box Model
Setiap elemen HTML terlihat memiliki kotak di sekitarnya, bahkan jika Anda tidak dapat melihatnya.
Properti border CSS mendefinisikan perbatasan terlihat di sekeliling elemen HTML:
p {
border:1px solid red;
}
Properti CSS Padding mendefinisikan padding (spasi) dalam perbatasan:
p {
border:1px solid red;
padding:20px;
}
Properti margin CSS mendefinisikan margin (spasi) di luar perbatasan:
p {
border:1px solid red;
padding:20px;
margin:50px;
}
Contoh CSS di atas menggunakan px untuk menentukan ukuran dalam piksel (pixel layar).
Id Atribut
Semua contoh di atas menggunakan CSS untuk gaya elemen HTML pada umumnya.
Gaya CSS mendefinisikan gaya yang sama untuk semua elemen yang sama.
Untuk menentukan gaya khusus untuk elemen khusus, pertama menambahkan atribut id pada elemen:
<p id="p01">Ini Paragraf</p>
kemudian menentukan gaya yang berbeda untuk (diidentifikasi) elemen:
p#p01 {
color:red;
}
Kelas Atribut
Untuk menentukan gaya untuk tipe khusus (kelas) elemen, menambahkan atribut kelas untuk elemen:
<p class="p01">Ini Paragraf</p>
Sekarang Anda dapat menentukan gaya yang berbeda untuk jenis (kelas) unsur:
p.p01 {
color:red;
}
lebih jelasnya perhatikan gambar berikut:
Gunakan id untuk mengatasi elemen tunggal. Menggunakan kelas untuk mengatasi kelompok elemen.
Usang Tag dan Atribut di HTML5
Dalam versi HTML yang lebih tua, beberapa tag dan atribut yang digunakan untuk dokumen gaya.
Tag ini tidak didukung di HTML5.
Hindari menggunakan unsur-unsur: <font>, <center> dan <strike>.
Hindari menggunakan atribut: warna dan bgcolor.
Bab Ringkasan
- Gunakan atribut gaya HTML untuk styling inline
- Gunakan HTML <style> elemen untuk mendefinisikan CSS internal yang
- Gunakan HTML <link> elemen untuk mendefinisikan CSS eksternal
- Gunakan HTML <head> elemen untuk menyimpan <style> dan <link> elemen
- Gunakan properti warna CSS untuk warna teks
- Menggunakan properti CSS font-family font teks
- Menggunakan properti CSS font-size untuk ukuran teks
- Gunakan properti perbatasan CSS untuk batas elemen yang terlihat
- Gunakan properti CSS bantalan untuk ruang di dalam perbatasan
- Gunakan properti marjin CSS untuk ruang luar perbatasan
0 komentar:
Posting Komentar