CSS = Gaya dan Warna
memanipulasi Teks
Warna, box
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 yang - dengan menggunakan
<style>elemen di<head>bagian - Eksternal - dengan menggunakan file CSS eksternal
Cara yang paling umum untuk menambahkan CSS, adalah untuk menjaga gaya di 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.
CSS inline
Sebuah CSS inline digunakan untuk menerapkan gaya yang unik untuk elemen HTML tunggal.
Sebuah CSS inline menggunakan atribut gaya elemen HTML.
Contoh ini menetapkan warna teks dari
<h1>elemen biru:Contoh
<h1 style="color:blue;">This is a Blue Heading</h1>
CSS internal
Sebuah CSS internal yang digunakan untuk menentukan gaya untuk halaman HTML.
Sebuah CSS internal didefinisikan dalam
<head>bagian dari halaman HTML, 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>
CSS eksternal
Sebuah style sheet eksternal digunakan untuk mendefinisikan gaya untuk banyak halaman HTML.
Dengan style sheet eksternal, Anda dapat mengubah tampilan situs web seluruh, dengan mengubah satu file!
Untuk menggunakan style sheet eksternal, menambahkan link ke dalam
<head>bagian 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 apapun. file tidak harus berisi kode HTML, dan harus disimpan dengan ekstensi .css.
Berikut adalah bagaimana "styles.css" penampilan:
body {
background-color: powderblue;}
h1 {
color: blue;}
p {
color: red;}
CSS Fonts
CSS
colorproperti mendefinisikan warna teks yang akan digunakan.
CSS
font-familyproperti 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
borderproperti mendefinisikan perbatasan sekitar elemen HTML:Contoh
p {
border: 1px solid powderblue;}
CSS Padding
CSS
paddingproperti mendefinisikan padding (spasi) antara teks dan perbatasan:Contoh
p {
border: 1px solid powderblue;
padding: 30px;}
CSS Margin
CSS
marginproperti 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
idatribut 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 suatu halaman, sehingga pemilih id digunakan untuk memilih salah satu elemen yang unik!
Kelas Atribut
Untuk menentukan gaya untuk jenis khusus dari elemen, menambahkan
classatribut 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 style sheet:
Contoh
<link rel="stylesheet" href="https://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">
Bab Ringkasan
- Gunakan HTML
styleatribut untuk styling inline - Gunakan HTML
<style>elemen untuk mendefinisikan CSS internal yang - Gunakan HTML
<link>elemen untuk merujuk ke file CSS eksternal - Gunakan HTML
<head>elemen ke toko <style> dan <link> elemen - Gunakan CSS
colorproperti untuk warna teks - Gunakan CSS
font-familyproperti untuk font teks - Gunakan CSS
font-sizeproperti untuk ukuran teks - Gunakan CSS
borderproperti untuk perbatasan - Gunakan CSS
paddingproperti untuk ruang di dalam perbatasan - Gunakan CSS
marginproperti untuk ruang luar perbatasan
Latihan HTML
HTML Style Tags
| Tag | Description |
|---|---|
| <style> | Defines style information for an HTML document |
| <link> | Defines a link between a document and an external resource |
Tidak ada komentar:
Posting Komentar