Styling HTML with CSS
CSS singkatan dari Cascading Style Sheets
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 gaya dalam file CSS terpisah. Namun, dalam tutorial ini, kita menggunakan styling internal, karena lebih mudah untuk menunjukkan, dan lebih mudah bagi Anda untuk mencoba
1. CSS Syntax
Styling CSS memiliki sintaks berikut:
Elemen {property: value; property: value}
Unsur adalah nama elemen HTML. Properti adalah properti CSS. Nilai adalah nilai CSS.
Beberapa gaya dipisahkan dengan titik koma.
2. 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:
contoh
<style h1 = "color: blue"> Ini adalah Heading Biru </ h1>
3. 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:
contoh
<! DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightgrey}
h1 {color: blue}
p {color: green}
</ style>
</ head>
<body>
<h1> Ini adalah heading </ h1>
<p> Ini adalah sebuah paragraf. </ p>
</ body>
</ html>
4. Styling eksternal (External CSS)
Style sheet eksternal yang ideal ketika gaya diterapkan pada banyak halaman.
Dengan style sheet eksternal, Anda dapat mengubah tampilan situs web seluruh dengan mengubah satu file.
Gaya eksternal didefinisikan dalam file CSS eksternal, dan kemudian dihubungkan ke dalam <head> pada halaman HTML:
contoh
<! DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</ head>
<body>
<h1> Ini adalah heading </ h1>
<p> Ini adalah sebuah paragraf. </ p>
</ body>
</ html>
5. CSS Fonts
Properti color 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.
contoh
<! DOCTYPE html>
<html>
<head>
<style>
h1 {
warna: biru;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</ style>
</ head>
<body>
<h1> Ini adalah heading </ h1>
<p> Ini adalah sebuah paragraf. </ p>
</ body>
</ html>
6 .CSS Box Model
Setiap elemen HTML memiliki sebuah kotak di sekitarnya, bahkan jika Anda tidak dapat melihatnya.
Properti border CSS mendefinisikan perbatasan terlihat di sekeliling elemen HTML:
contoh
p {
border: 1px solid hitam;
}
Properti CSS Padding mendefinisikan padding (spasi) dalam perbatasan:
contoh
p {
border: 1px solid hitam;
padding: 10px;
}
Properti marjin CSS mendefinisikan margin (spasi) di luar perbatasan:
contoh
p {
border: 1px solid hitam;
padding: 10px;
margin: 30px;
}
7. Id Atribut
Semua contoh di atas menggunakan CSS untuk gaya elemen HTML pada umumnya.
Untuk menentukan gaya khusus untuk satu elemen khusus, pertama menambahkan atribut id pada elemen:
contoh
<p id = "P01"> saya berbeda </ p>
kemudian menentukan gaya yang berbeda untuk (diidentifikasi) elemen:
contoh
p # P01 {
warna: biru;
}
8. Kelas Atribut
Untuk menentukan gaya untuk tipe khusus (kelas) elemen, menambahkan atribut kelas untuk elemen:
contoh
<p class = "error"> saya berbeda </ p>
Sekarang Anda dapat menentukan gaya yang berbeda untuk semua elemen dengan kelas tertentu:
contoh
p.error {
color: red;
}
No comments:
Post a Comment