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. Show 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 CSSCSS dapat ditambahkan ke dokumen HTML dengan 3 cara, sebagai berikut
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 sebarisCSS 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 elemenmenjadi merah Contoh <h1 style="color:blue;">Heading</h1> <p style="color:red;">Paragraf</p> CSS dalamCSS 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 eksternalCSS 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 CSSDi 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 batasproperti 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 CSSProperti 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 EksternalCSS eksternal dapat direferensikan oleh URL lengkap atau string relatif ke halaman web Bagaimana cara menggunakan CSS dalam HTML?Ada tiga cara untuk menambahkan CSS ke dokumen HTML. . Inline – menggunakan atribut style dalam elemen HTML Internal – menggunakan elemen |