contoh
<! DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightgray}
h1 {color: blue}
p {color: green}
</ style>
</ head>
<body>
<h1> Ini adalah heading </ h1>
<p> Ini adalah paragraf. </ p>
</ body>
</ html>
Coba Sendiri »
Styling HTML dengan CSS
CSS singkatan dari Cascading Style Sheets
Styling dapat ditambahkan ke elemen HTML dalam 3 cara:
Inline - menggunakan atribut gaya dalam 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 pada file CSS yang terpisah. Tapi, dalam tutorial ini, contoh internal, dan disederhanakan, untuk membuatnya lebih mudah bagi Anda memahaminya, dan mencoba sendiri.
**Catatan Anda dapat mempelajari lebih banyak tentang CSS di Tutorial CSS kami.
CSS Sintaks
Styling CSS memiliki sintaks berikut:
elemen {properti: value; propety: value}
Unsur adalah nama elemen HTML. Properti adalah properti CSS. Nilai adalah nilai CSS.
Beberapa gaya dipisahkan dengan titik koma.
Inline Styling (Inline CSS)
Styling Inline berguna untuk menerapkan gaya yang unik untuk elemen HTML tunggal:
Styling Inline menggunakan atribut style.
Styling garis ini mengubah warna teks dan margin kiri paragraf:
contoh
<span h1 = "warna: biru"> Ini adalah Heading Biru </ h1>
Coba Sendiri »
Styling internal (internal CSS)
Sebuah style sheet internal dapat digunakan untuk mendefinisikan gaya umum untuk semua elemen HTML pada halaman.
Styling internal didefinisikan dalam <head> pada halaman HTML, menggunakan elemen <style>:
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 paragraf. </ p>
</ body>
</ html>
Coba Sendiri »
Styling eksternal (External CSS)
Style sheet eksternal sangat ideal bila 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:
contoh
<DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</ head>
<body>
<h1> Ini adalah heading </ h1>
<p> Ini adalah paragraf. </ p>
</ body>
</ html>
Coba Sendiri »
CSS Font
Warna 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.
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>
<html>
<body>
<h1> Ini adalah heading </ h1>
<p> Ini adalah paragraf. </ p>
</ body>
</ html>
Coba Sendiri »
Catatan <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:
contoh
p {
border: 1px solid hitam;
}
Coba Sendiri »
Properti CSS Padding mendefinisikan padding (spasi) dalam perbatasan:
contoh
p {
border: 1px solid hitam;
padding: 10px;
}
Coba Sendiri »
Properti Margin CSS mendefinisikan margin (spasi) di luar perbatasan:
contoh
p {
border: 1px solid hitam;
padding: 10px;
margin: 30px;
}
Coba Sendiri »
**Catatan Contoh CSS di atas digunakan untuk menentukan ukuran px dalam piksel (pixel layar).
Id Atribut
Semua contoh di atas menggunakan CSS untuk gaya elemen HTML secara umum.
Gaya CSS mendefinisikan gaya yang sama untuk semua elemen yang sama.
Untuk menentukan gaya khusus untuk elemen khusus, pertama menambahkan atribut id untuk elemen:
contoh
<p id = "P01"> saya berbeda </ p>
kemudian menentukan gaya yang berbeda untuk (diidentifikasi) elemen:
contoh
p # P01 {
warna: biru;
}
Coba Sendiri »
Kelas Atribut
Untuk menentukan gaya untuk tipe khusus (kelas) dari unsur-unsur, menambahkan atribut kelas untuk elemen:
contoh
<p class = "error"> saya berbeda </ p>
Sekarang Anda dapat menentukan gaya yang berbeda untuk jenis (kelas) dari unsur:
contoh
p.error {
color: red;
}
Coba Sendiri »
**Catatan Gunakan id untuk mengatasi elemen tunggal. Gunakan kelas untuk mengatasi kelompok-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 elemen: <font>, <center> dan <strike>.
Hindari menggunakan atribut: warna dan bgcolor.
Bab Ringkasan
Gunakan atribut style 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
Gunakan properti CSS font-family font teks
Gunakan properti CSS font-size untuk ukuran teks
Gunakan properti perbatasan CSS untuk elemen perbatasan terlihat
Gunakan properti CSS Padding untuk ruang di dalam perbatasan
Gunakan properti marjin CSS untuk ruang luar perbatasan
<! DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightgray}
h1 {color: blue}
p {color: green}
</ style>
</ head>
<body>
<h1> Ini adalah heading </ h1>
<p> Ini adalah paragraf. </ p>
</ body>
</ html>
Coba Sendiri »
Styling HTML dengan CSS
CSS singkatan dari Cascading Style Sheets
Styling dapat ditambahkan ke elemen HTML dalam 3 cara:
Inline - menggunakan atribut gaya dalam 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 pada file CSS yang terpisah. Tapi, dalam tutorial ini, contoh internal, dan disederhanakan, untuk membuatnya lebih mudah bagi Anda memahaminya, dan mencoba sendiri.
**Catatan Anda dapat mempelajari lebih banyak tentang CSS di Tutorial CSS kami.
CSS Sintaks
Styling CSS memiliki sintaks berikut:
elemen {properti: value; propety: value}
Unsur adalah nama elemen HTML. Properti adalah properti CSS. Nilai adalah nilai CSS.
Beberapa gaya dipisahkan dengan titik koma.
Inline Styling (Inline CSS)
Styling Inline berguna untuk menerapkan gaya yang unik untuk elemen HTML tunggal:
Styling Inline menggunakan atribut style.
Styling garis ini mengubah warna teks dan margin kiri paragraf:
contoh
<span h1 = "warna: biru"> Ini adalah Heading Biru </ h1>
Coba Sendiri »
Styling internal (internal CSS)
Sebuah style sheet internal dapat digunakan untuk mendefinisikan gaya umum untuk semua elemen HTML pada halaman.
Styling internal didefinisikan dalam <head> pada halaman HTML, menggunakan elemen <style>:
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 paragraf. </ p>
</ body>
</ html>
Coba Sendiri »
Styling eksternal (External CSS)
Style sheet eksternal sangat ideal bila 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:
contoh
<DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</ head>
<body>
<h1> Ini adalah heading </ h1>
<p> Ini adalah paragraf. </ p>
</ body>
</ html>
Coba Sendiri »
CSS Font
Warna 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.
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>
<html>
<body>
<h1> Ini adalah heading </ h1>
<p> Ini adalah paragraf. </ p>
</ body>
</ html>
Coba Sendiri »
Catatan <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:
contoh
p {
border: 1px solid hitam;
}
Coba Sendiri »
Properti CSS Padding mendefinisikan padding (spasi) dalam perbatasan:
contoh
p {
border: 1px solid hitam;
padding: 10px;
}
Coba Sendiri »
Properti Margin CSS mendefinisikan margin (spasi) di luar perbatasan:
contoh
p {
border: 1px solid hitam;
padding: 10px;
margin: 30px;
}
Coba Sendiri »
**Catatan Contoh CSS di atas digunakan untuk menentukan ukuran px dalam piksel (pixel layar).
Id Atribut
Semua contoh di atas menggunakan CSS untuk gaya elemen HTML secara umum.
Gaya CSS mendefinisikan gaya yang sama untuk semua elemen yang sama.
Untuk menentukan gaya khusus untuk elemen khusus, pertama menambahkan atribut id untuk elemen:
contoh
<p id = "P01"> saya berbeda </ p>
kemudian menentukan gaya yang berbeda untuk (diidentifikasi) elemen:
contoh
p # P01 {
warna: biru;
}
Coba Sendiri »
Kelas Atribut
Untuk menentukan gaya untuk tipe khusus (kelas) dari unsur-unsur, menambahkan atribut kelas untuk elemen:
contoh
<p class = "error"> saya berbeda </ p>
Sekarang Anda dapat menentukan gaya yang berbeda untuk jenis (kelas) dari unsur:
contoh
p.error {
color: red;
}
Coba Sendiri »
**Catatan Gunakan id untuk mengatasi elemen tunggal. Gunakan kelas untuk mengatasi kelompok-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 elemen: <font>, <center> dan <strike>.
Hindari menggunakan atribut: warna dan bgcolor.
Bab Ringkasan
Gunakan atribut style 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
Gunakan properti CSS font-family font teks
Gunakan properti CSS font-size untuk ukuran teks
Gunakan properti perbatasan CSS untuk elemen perbatasan terlihat
Gunakan properti CSS Padding untuk ruang di dalam perbatasan
Gunakan properti marjin CSS untuk ruang luar perbatasan
Tidak ada komentar:
Posting Komentar