Assalamu'alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan memaparkan mengenai HTML CSS.
Styling HTML dengan CSS
CSS singkatan C ascading S tyle S heets. CSS menjelaskan bagaimana elemen HTML yang akan ditampilkan pada layar, kertas, atau media lainnya . CSS menghemat banyak pekerjaan . Hal ini dapat mengontrol tata letak halaman web beberapa sekaligus.
CSS dapat ditambahkan ke elemen HTML dalam 3 cara:
- Inline - dengan menggunakan atribut style dalam elemen HTML
- Internal - dengan menggunakan <style> elemen dalam <head>
- Eksternal - dengan menggunakan file CSS eksternal
Cara yang paling umum untuk menambahkan CSS, adalah untuk menjaga gaya dalam file CSS yang terpisah. Namun, di sini kita akan menggunakan inline dan styling internal, karena ini lebih mudah untuk menunjukkan, dan lebih mudah bagi Anda untuk mencoba sendiri.
Tip: Anda dapat mempelajari lebih banyak tentang CSS di kami Tutorial CSS .
Inline CSS
Sebuah CSS inline digunakan untuk menerapkan gaya unik untuk elemen HTML.
Sebuah CSS inline menggunakan atribut gaya elemen HTML.
Contoh ini menetapkan warna teks <h1> elemen biru:
Contoh
<h1 style="color:blue;">This is a Blue Heading</h1>
CSS internal
Sebuah CSS internal digunakan untuk menentukan gaya untuk halaman HTML.
Sebuah CSS internal didefinisikan dalam <head> halaman HTML, dalam elemen <style>:
Contoh
<!DOCTYPE html><html><head><style>body {background-color: powderblue;}h1 {color: blue;}p {color: red;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>
CSS eksternal
Style sheet eksternal digunakan untuk menentukan gaya untuk banyak halaman HTML. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web, dengan mengubah satu file!
Untuk menggunakan style sheet eksternal, menambahkan link ke dalam <head> dari halaman HTML:
Contoh
<!DOCTYPE html><html><head><link rel="stylesheet" href="styles.css"></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>
Style sheet eksternal dapat ditulis dalam editor teks. file tidak harus berisi kode HTML, dan harus disimpan dengan ekstensi .css.
Berikut adalah bagaimana "styles.css" terlihat:
body {background-color: powderblue;}h1 {color: blue;}p {color: red;}
CSS Font
CSS warna properti mendefinisikan warna teks yang akan digunakan.
CSS font-family properti mendefinisikan font yang akan digunakan.
CSS font-size properti mendefinisikan ukuran teks yang akan digunakan.
Contoh
<!DOCTYPE html><html><head><style>h1 {color: blue;font-family: verdana;font-size: 300%;}p {color: red;font-family: courier;font-size: 160%;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>
CSS Border
CSS perbatasan properti mendefinisikan perbatasan sekitar elemen HTML:
Contoh
p {border: 1px solid powderblue;}
CSS Padding
CSS Padding properti mendefinisikan padding (spasi) antara teks dan perbatasan:
Contoh
p {border: 1px solid powderblue;padding: 30px;}
CSS Margin
CSS Margin properti mendefinisikan margin (ruang) di luar perbatasan:
Contoh
p {border: 1px solid powderblue;margin: 50px;}
Id Atribut
Untuk menentukan gaya tertentu untuk satu elemen khusus, menambahkan atribut id ke elemen:
<p id="p01">I am different</p>
kemudian menentukan gaya untuk elemen dengan id tertentu:
Contoh
#p01 {color: blue;}
Catatan: The id dari elemen harus unik dalam sebuah halaman, sehingga pemilih id digunakan untuk memilih salah satu elemen yang unik!Kelas Atribut
Untuk menentukan gaya untuk jenis khusus dari elemen, menambahkan atribut kelas untuk elemen:
<p class="error">I am different</p>
kemudian menentukan gaya untuk elemen dengan kelas khusus:
Contoh
p.error {color: red;}
Referensi eksternal
style sheet eksternal dapat dirujuk dengan URL penuh atau dengan path relatif ke halaman web saat ini.
Contoh ini menggunakan URL lengkap untuk link ke sebuah style sheet:
Contoh
<link rel="stylesheet" href="http://www.w3schools.com/html/styles.css">
Contoh ini link ke style sheet yang terletak di folder html di situs web saat ini:
Contoh
<link rel="stylesheet" href="/html/styles.css">
Contoh ini link ke style sheet yang terletak di folder yang sama dengan halaman saat:
Contoh
<link rel="stylesheet" href="styles.css">
REFERENSI
No comments:
Post a Comment