Gaya HTML - CSS
CSS adalah singkatan dari Cascading Style Sheets.
CSS menghemat banyak pekerjaan. Itu dapat mengontrol tata letak beberapa halaman web sekaligus.
CSS = Gaya dan Warna
Apa itu CSS?
Cascading Style Sheets (CSS) digunakan untuk memformat tata letak halaman web.
Dengan CSS, Anda dapat mengontrol warna, font, ukuran teks, jarak antar elemen, bagaimana elemen diposisikan dan ditata, gambar latar belakang atau warna latar apa yang akan digunakan, tampilan berbeda untuk perangkat dan ukuran layar yang berbeda, dan lebih banyak!
Tip: Kata cascading berarti bahwa gaya yang diterapkan ke elemen induk juga akan diterapkan ke semua elemen turunan di dalam induk. Jadi, jika Anda mengatur warna teks isi ke "biru", semua judul, paragraf, dan elemen teks lain di dalam badan juga akan mendapatkan warna yang sama (kecuali jika Anda menentukan yang lain)!
Menggunakan CSS
CSS dapat ditambahkan ke dokumen HTML dengan 3 cara:
- Inline - dengan menggunakan
style
atribut di dalam elemen HTML - Internal - dengan menggunakan
<style>
elemen di<head>
bagian - Eksternal - dengan menggunakan
<link>
elemen untuk menautkan ke file CSS eksternal
Cara paling umum untuk menambahkan CSS, adalah dengan menyimpan gaya di file CSS eksternal. Namun, dalam tutorial ini kita akan menggunakan gaya inline dan internal, karena ini lebih mudah untuk didemonstrasikan, dan lebih mudah bagi Anda untuk mencobanya sendiri.
CSS sebaris
CSS sebaris digunakan untuk menerapkan gaya unik ke satu elemen HTML.
CSS sebaris menggunakan style
atribut elemen HTML.
Contoh berikut menyetel warna teks <h1>
elemen menjadi biru, dan warna teks <p>
elemen menjadi merah:
Contoh
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</p>
CSS internal
CSS internal digunakan untuk menentukan gaya untuk satu halaman HTML.
CSS internal didefinisikan di <head>
bagian halaman HTML, di dalam <style>
elemen.
Contoh berikut menyetel warna teks SEMUA <h1>
elemen (pada halaman itu) menjadi biru, dan warna teks SEMUA <p>
elemen menjadi merah. Selain itu, halaman akan ditampilkan dengan warna latar belakang "biru bubuk":
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
Lembar gaya eksternal digunakan untuk menentukan gaya untuk banyak halaman HTML.
Untuk menggunakan lembar gaya eksternal, tambahkan tautan ke dalamnya di <head>
bagian setiap 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>
Lembar gaya eksternal dapat ditulis dalam editor teks apa pun. File tidak boleh berisi kode HTML apa pun, dan harus disimpan dengan ekstensi .css.
Berikut adalah tampilan file "styles.css":
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Tips: Dengan lembar gaya eksternal, Anda dapat mengubah tampilan seluruh situs web, dengan mengubah satu file!
Warna, Font, dan Ukuran CSS
Di sini, kami akan mendemonstrasikan beberapa properti CSS yang umum digunakan. Anda akan belajar lebih banyak tentang mereka nanti.
Properti CSS color
mendefinisikan warna teks yang akan digunakan.
Properti CSS font-family
mendefinisikan font yang akan digunakan.
Properti CSS font-size
mendefinisikan ukuran teks yang akan digunakan.
Contoh
Penggunaan warna CSS, font-family dan properti font-size:
<!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>
Perbatasan CSS
Properti CSS border
mendefinisikan batas di sekitar elemen HTML.
Tip: Anda dapat menentukan batas untuk hampir semua elemen HTML.
Contoh
Penggunaan properti perbatasan CSS:
p {
border: 2px
solid powderblue;
}
Lapisan CSS
Properti CSS padding
mendefinisikan padding (spasi) antara teks dan perbatasan.
Contoh
Penggunaan perbatasan CSS dan properti padding:
p {
border: 2px
solid powderblue;
padding: 30px;
}
Batas CSS
Properti CSS margin
mendefinisikan margin (spasi) di luar perbatasan.
Contoh
Penggunaan perbatasan CSS dan properti margin:
p {
border: 2px
solid powderblue;
margin: 50px;
}
Tautan ke CSS Eksternal
Lembar gaya eksternal dapat direferensikan dengan URL lengkap atau dengan jalur relatif ke halaman web saat ini.
Contoh
Contoh ini menggunakan URL lengkap untuk menautkan ke lembar gaya:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Contoh
Contoh ini menautkan ke lembar gaya yang terletak di folder html di situs web saat ini:
<link rel="stylesheet" href="/html/styles.css">
Contoh
Contoh ini menautkan ke lembar gaya yang terletak di folder yang sama dengan halaman saat ini:
<link rel="stylesheet" href="styles.css">
Anda dapat membaca lebih lanjut tentang jalur file di bab Jalur File HTML .
Ringkasan Bab
- Gunakan
style
atribut HTML untuk penataan sebaris - Gunakan elemen HTML
<style>
untuk mendefinisikan CSS internal - Gunakan
<link>
elemen HTML untuk merujuk ke file CSS eksternal - Gunakan
<head>
elemen HTML untuk menyimpan elemen <style> dan <link> - Gunakan properti CSS
color
untuk warna teks - Gunakan
font-family
properti CSS untuk font teks - Gunakan properti CSS
font-size
untuk ukuran teks - Gunakan
border
properti CSS untuk perbatasan - Gunakan
padding
properti CSS untuk ruang di dalam perbatasan - Gunakan
margin
properti CSS untuk ruang di luar perbatasan
Tip: Anda dapat mempelajari lebih lanjut tentang CSS di Tutorial CSS kami .
Latihan HTML
Tag Gaya HTML
Tag | Description |
---|---|
<style> | Defines style information for an HTML document |
<link> | Defines a link between a document and an external resource |
Untuk daftar lengkap semua tag HTML yang tersedia, kunjungi Referensi Tag HTML kami .