Styling HTML dengan CSS
CSS adalah singkatan dari Cascading Style Sheets.
CSS menjelaskan bagaimana elemen HTML ditampilkan di layar, kertas, atau media lainnya.
CSS menghemat banyak pekerjaan. Ini bisa mengendalikan tata letak beberapa halaman secara sekaligus.
CSS dapat ditambahkan ke elemen HTML dengan 3 cara:
- - Inline - dengan menggunakan atribut style dalam elemen HTML
- - Internal - dengan menggunakan elemen <style> di bagian <head>
- - Eksternal - dengan menggunakan file CSS eksternal
Cara yang paling umum untuk menambahkan CSS, adalah dengan menjaga styles dalam file CSS terpisah. Namun, di sini kita akan menggunakan inline dan styling internal, karena ini lebih mudah untuk ditunjukkan, dan lebih mudah bagi Anda untuk mencobanya sendiri.
Tip: Anda bisa belajar lebih banyak tentang CSS di Tutorial CSS kami.
Inline CSS
CSS inline digunakan untuk menerapkan style unik ke elemen HTML tunggal.
CSS inline menggunakan atribut style elemen HTML.
Contoh ini mengatur warna teks elemen <h1> menjadi biru:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body>
</html>
CSS internal
CSS internal digunakan untuk mendefinisikan style untuk satu halaman HTML.
CSS internal didefinisikan di bagian <head> dari halaman HTML, dalam elemen <style>:
Contoh Code:
<!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 eksternal digunakan untuk menentukan style untuk banyak halaman HTML.
Dengan style eksternal, Anda bisa mengubah tampilan keseluruhan situs web, dengan mengubah satu file!
Untuk menggunakan style eksternal, tambahkan tautan ke bagian <head> pada halaman HTML:
Contoh Code:
<!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 eksternal dapat ditulis dalam editor teks manapun. File tidak boleh berisi kode HTML apapun, dan harus disimpan dengan ekstensi .css
Berikut adalah bagaimana tampilan "styles.css":
Contoh Code style eksternal:
body {
background-color: powderblue;}
h1 {
color: blue;}
p {
color: red;}
Font CSS
Properti color CSS mendefinisikan warna teks yang akan digunakan.
Properti font-family CSS mendefinisikan font yang akan digunakan.
Properti font-size CSS mendefinisikan ukuran teks yang akan digunakan.
Contoh Code:
<!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
Properti border CSS mendefinisikan batas di sekitar elemen HTML:
Contoh Code:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
CSS Padding
Properti CSS Padding mendefinisikan padding (spasi) antara teks dan border:
Contoh Code:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Margin CSS
Properti margin CSS mendefinisikan margin (spasi) di luar perbatasan:
Contoh Code:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Atribut id
Untuk menentukan style tertentu untuk satu elemen khusus, tambahkan atribut id ke elemen:
<p id="p01">I am different</p>
lalu tentukan style untuk elemen dengan id tertentu:
<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>
</body>
</html>
Catatan: id elemen harus unik di dalam halaman, jadi pemilih id digunakan untuk memilih satu elemen unik!
Atribut Class
Untuk menentukan style untuk jenis elemen khusus, tambahkan atribut class ke elemen:
<p class="error">I am different</p>
kemudian definisikan sebuah style untuk elemen dengan class tertentu:
<!DOCTYPE html>
<html>
<head>
<style>
p.error {
color: red;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="error">I am different.</p>
<p>This is a paragraph.</p>
<p class="error">I am different too.</p>
</body>
</html>
Referensi Eksternal
Bagian style eksternal dapat dirujuk dengan URL lengkap atau dengan path relatif ke halaman web saat ini.
Contoh ini menggunakan URL lengkap untuk menautkan ke style sheet:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://nusantaracoding.com/html/styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Contoh ini menautkan ke style sheet yang terletak di folder html di situs web saat ini:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/html/styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Contoh ini menautkan ke style sheet yang terletak di folder yang sama dengan halaman saat ini:
<!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>
Anda dapat membaca lebih lanjut tentang path file di dalam Bab HTML File Paths.<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Ringkasan Bab
- - Gunakan atribut style HTML untuk inline styling
- - Gunakan elemen <style> HTML untuk menentukan CSS internal
- - Gunakan elemen HTML <link> untuk merujuk ke file CSS eksternal
- - Gunakan elemen <head> HTML untuk menyimpan elemen <style> dan <link>
- - Gunakan properti colorCSS untuk warna teks
- - Gunakan properti font-family CSS untuk font teks
- - Gunakan properti font-size CSS untuk ukuran teks
- - Gunakan properti border CSS untuk perbatasan
- - Gunakan properti padding CSS untuk ruang di dalam perbatasan
- - Gunakan properti margin CSS untuk ruang di luar perbatasan
HTML Style Tags
| Tag | Description |
|---|---|
| <style> | Mendefinisikan informasi gaya untuk dokumen HTML |
| <link> | Mendefinisikan hubungan antara dokumen dan sumber eksternal |
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2
Lihat Tutorial CSS Lengkapnya Disini: TUTORIAL CSS