Dengan CSS, kita dapat mengontrol warna, font, ukuran teks, jarak antar elemen, posisi dan susunan elemen, gambar latar atau warna latar belakang yang akan digunakan, tampilan yang berbeda untuk perangkat dan ukuran layar yang berbeda, dan masih banyak lagi.
Kiat. Kata cascading berarti bahwa gaya yang diterapkan pada elemen induk juga akan diterapkan pada semua elemen anak pada induknya. Jadi, jika kita mengatur warna badan teks menjadi "biru", semua heading, paragraf, dan elemen teks lainnya di dalam badan juga akan mendapatkan warna yang sama (kecuali jika kita tentukan lain)
Menggunakan CSS
CSS dapat ditambahkan ke dokumen HTML dengan 3 cara, sebagai berikut
- Inline – Menggunakan atribut style di dalam elemen HTML.
- Internal – Menggunakan elemen di .
- Eksternal – Menggunakan elemen untuk menautkan ke file CSS eksternal.
Cara paling umum untuk menambahkan CS, adalah mempertahankan gaya dalam file CSS eksternal. Namun, dalam tutorial ini kita akan menggunakan gaya inline dan internal, karena ini lebih mudah didemonstrasikan
CSS sebaris
CSS sebaris digunakan untuk menerapkan gaya unik ke satu elemen HTML
Inline CSS menggunakan atribut style dari elemen HTML.
Contoh berikut menyetel warna teks elemen
menjadi biru, dan warna teks elemen
menjadi merah
Contoh
<h1 style="color:blue;">Heading</h1> <p style="color:red;">Paragraf</p>
CSS dalam
CSS internal digunakan untuk menentukan gaya halaman HTML
CSS internal didefinisikan di bagian halaman HTML, di dalam < gaya>< elemen /a>
Contoh berikut menyetel SEMUA warna teks di dalam elemen (pada halaman itu) menjadi biru, dan SEMUA warna teks menjadi merah. Selain itu, halaman akan ditampilkan dengan warna latar belakang "powderblue".
Contoh
<!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>Ini heading</h1> <p>Ini Paragraf.</p> </body> </html>_
CSS eksternal
CSS eksternal digunakan untuk menentukan gaya untuk banyak halaman HTML
Untuk menggunakan CSS eksternal, pada setiap halaman HTML tambahkan tautan di bagian .
Contoh
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Ini heading</h1> <p>Ini Paragraf.</p> </body> </html>
CSS 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"
"gaya. css"
body { background-color: powderblue; } h1 { color: blue; } p { color: red; }
Warna, Font, dan Ukuran CSS
Di sini, kami akan mendemonstrasikan beberapa properti CSS yang umum digunakan
Properti warna CSS menentukan warna teks yang akan digunakan
Properti font-family CSS mendefinisikan font yang akan digunakan
Ukuran font properti CSS menentukan ukuran teks yang akan digunakan
Contoh penggunaan properti CSS color, font-family dan 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>Ini heading</h1> <p>Ini Paragraf.</p> </body> </html>_
CSS batas
properti border di CSS mendefinisikan batas di sekitar elemen HTML.
Tip. kita dapat menentukan batas untuk hampir semua elemen HTML
Contoh
<!DOCTYPE html> <html> <head> <style> p { border: 2px solid powderblue; } </style> </head> <body> <h1>Ini heading</h1> <p>Ini Paragraf.</p> <p>Ini Paragraf.</p> <p>Ini Paragraf.</p> </body> </html>
Pengisi CSS
Properti padding di CSS mendefinisikan padding (spasi) antara teks dan border.
Contoh penggunaan properti border dan padding CSS
<!DOCTYPE html> <html> <head> <style> p { border: 2px solid powderblue; padding: 30px; } </style> </head> <body> <h1>Ini heading</h1> <p>Ini Paragraf.</p> <p>Ini Paragraf.</p> <p>Ini Paragraf.</p> </body> </html> _
Margin CSS
Properti margin di CSS mendefinisikan margin (spasi) di luar garis tepi (border)
Contoh penggunaan CSS border dan properti margin.
<!DOCTYPE html> <html> <head> <style> p { border: 2px solid powderblue; margin: 50px; } </style> </head> <body> <h1>Ini heading</h1> <p>Ini Paragraf.</p> <p>Ini Paragraf.</p> <p>Ini Paragraf.</p> </body> </html>
Tautan ke CSS Eksternal
CSS eksternal dapat direferensikan oleh URL lengkap atau string relatif ke halaman web