Styling HTML dengan CSS
CSS adalah singkatan dari C ascading S tyle S heets.
CSS menjelaskan bagaimana elemen HTML ditampilkan di layar, kertas, atau di media lain .
CSS menghemat banyak pekerjaan . Ini dapat mengontrol tata letak beberapa halaman web sekaligus.
CSS dapat ditambahkan ke elemen HTML dalam 3 cara:
- Inline - dengan menggunakan atribut style dalam elemen HTML
- Internal - dengan menggunakan
<style>elemen di<head>bagian - Eksternal - dengan menggunakan file CSS eksternal
Cara paling umum untuk menambahkan CSS, adalah mempertahankan style dalam file CSS yang terpisah. Namun, di sini kita akan menggunakan gaya inline dan internal, karena ini lebih mudah untuk didemonstrasikan, dan lebih mudah bagi Anda untuk mencobanya sendiri.
Tip: Anda dapat belajar lebih banyak tentang CSS di Tutorial CSS kami
CSS sebaris
CSS sebaris digunakan untuk menerapkan gaya unik ke elemen HTML tunggal.
CSS sebaris menggunakan atribut gaya dari elemen HTML.
Contoh ini mengatur warna teks dari
<h1>elemen menjadi biru:
contoh :
<!DOCTYPE html><html>
<body>
<h1 style="color:blue;">Ini adalah Blue Heading</h1>
</body>
</html>
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 :
<!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>
<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.
Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web, dengan mengubah satu file!
Untuk menggunakan lembar gaya eksternal, tambahkan tautan ke dalamnya di
<head>bagian 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>
<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 di editor teks apa pun. File tidak boleh berisi kode HTML apa pun, dan harus disimpan dengan ekstensi .css.
Berikut adalah bagaimana tampilan "styles.css":
contoh :
body {
background-color: powderblue;}
h1 {
color: blue;}
p {
color: red;}
background-color: powderblue;}
h1 {
color: blue;}
p {
color: red;}
Font CSS
colorProperti CSS mendefinisikan warna teks yang akan digunakan.font-familyProperti CSS mendefinisikan font yang akan digunakan.font-size Properti CSS 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>
<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
borderProperti CSS mendefinisikan perbatasan di sekitar elemen HTML:
contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
}
</style>
</head>
<body>
<h1>ini adalah heading</h1>
<p>ini adalah paragraph.</p>
<p>ini adalah paragraph.</p>
<p>ini adalah paragraph.</p>
</body>
</html>
CSS Padding
paddingProperti CSS mendefinisikan padding (spasi) antara teks dan perbatasan:
contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
padding: 30px;}
border: 1px solid powderblue;
padding: 30px;}
</style>
</head>
<body>
<h1>ini adalah heading</h1>
<p>ini adalah paragraph.</p>
<p>ini adalah paragraph.</p>
<p>ini adalah paragraph.</p>
</body>
</html>
Margin CSS
marginProperti CSS mendefinisikan margin (spasi) di luar perbatasan:
contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
margin: 50px;
}
border: 1px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>
<h1>ini adalah heading</h1>
<p>ini adalah paragraph.</p>
<p>ini adalah paragraph.</p>
<p>ini adalah paragraph.</p>
</body>
</html>
Atribut id
Untuk menentukan gaya khusus untuk satu elemen khusus, tambahkan
idatribut ke elemen:
<p id="p01">I am different</p>
kemudian tentukan gaya untuk elemen dengan ID spesifik:
contoh :
<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
color: blue;
}
</style>
</head>
<body>
<p>ini adalah paragraph</p>
<p>ini adalah paragraph</p>
<p id="p01">Aku berbeda.</p>
</body>
</html>
Atribut kelas
Untuk menentukan gaya untuk jenis elemen khusus, tambahkan
classatribut ke elemen:
<p class="error">Aku berbeda</p>
kemudian tentukan gaya untuk elemen-elemen dengan kelas spesifik:
contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p.error {
color: red;
}
</style>
</head>
<body>
<p>ini adalah paragraph</p>
<p>ini adalah paragraph</p>
<p class="error">Aku berbeda.</p>
<p>ini adalah paragraph</p>
<p class="error">Aku berbeda</p>
</body>
</html>
Referensi Eksternal
Lembar gaya eksternal dapat direferensikan dengan URL lengkap atau dengan jalur relatif ke halaman web saat ini.
Contoh ini menggunakan URL lengkap untuk ditautkan ke lembar gaya:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.#.com/html/styles.css">
</head>
<body>
<h1>ini adalah heading.</h1>
<p>ini adalah heading.</p>
</body>
</html>
Contoh ini menautkan ke lembar gaya yang terletak di folder html di situs web saat ini:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/html/styles.css">
</head>
<body>
<h1>ini adalah heading.</h1>
<p>ini adalah heading.</p>
</body>
</html>
Ringkasan Bab
- Gunakan
styleatribut HTML untuk styling inline - Gunakan
<style>elemen HTML untuk menentukan CSS internal - Gunakan
<link>elemen HTML untuk merujuk ke file CSS eksternal - Gunakan
<head>elemen HTML untuk menyimpan elemen <style> dan <link> - Gunakan
colorproperti CSS untuk warna teks - Gunakan
font-familyproperti CSS untuk font teks - Gunakan
font-sizeproperti CSS untuk ukuran teks - Gunakan
borderproperti CSS untuk perbatasan - Gunakan
paddingproperti CSS untuk ruang di dalam perbatasan - Gunakan
marginproperti CSS untuk ruang di luar perbatasan
Selamat Mencoba dan semoga bermanfaat.
Jagonya HTML @Astra Djingga...
ReplyDeleteMantep, ditunggu postingan selanjutnya
Insyaaloh kedepannya asalkan kita belajar dan belajar dwngan tekut .. :v ane juga masih banyak2 belajar .. Terimakasih atas kunjungannya..
DeleteRequest pengenalan html,dan pembelajaran utk pemula gan,,soalnya ank2 SMK sering nyari gan
ReplyDelete