Sebelumnya pasti anda sudah mengetahui fungsi dan kegunaan dari css yang sudah dibahas dalam artikel sebelumnya yaitu “Pengertian CSS (Cascading Style Sheet)“. Show Ada 3 cara memasang kode CSS ke dalam HTML yaitu :
INLINE CSS Kode CSS di tulis langsung ke dalam tag HTMLyang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaknya hanya di gunakan jika anda mau memformat suatu elemen satu kali saja. Contoh: <h1 style="color: red;"> H1 dengan CSS </h1> Pada contoh si atas, elemen <h1> di format agar tulisannya menggunakan warna merah, elemen lain, tidak akan menggunakan warna merah karena format ini hanya berlaku pada elemen paragraf yang di tentukan kode CSS nya. Penulisan CSS dengan cara ini mulai dengan kata “style = lalu di ikuti dengan syntax Property:value;” EMBEDDED CSS Kita bisa menempelkan kode CSS di antara tag <head> & </head>. penulisan CSS dengan cara ini awalnya diawali dengan tag <style>—-</style>. Contoh : <head> <style type=”text/css”> h1 {color : red;} </style> </head> EXTERNAL CSS Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran “.css” atau ekstensi “.css”. Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini. Ketika browser membaca style sheet, browser akan memformat dokumen HTML sesuai dengan informasi di style sheet. Section Artikel Tiga Cara Menyisipkan CSSAda beberapa cara yang dapat dilakukan untuk menggunakan CSS, 3 cara tersebut adalah :
CSS EksternalDengan eksternal CSS, kita dapat mengubah tampilan seluruh situs web hanya dengan mengubah satu file! Setiap halaman HTML harus menyertakan referensi ke file eksternal CSS di dalam elemen, di dalam bagian head halaman HTML tersebut. Contoh <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>Ini adalah Heading</h1> <p>Ini adalah Paragaraf.</p> </body> </html> Eksternal CSS dapat ditulis di editor teks apa pun, dan harus disimpan dengan ekstensi .css. File .css eksternal tidak boleh berisi tag HTML apa pun. Berikut adalah tampilan file “mystyle.css”: body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } Catatan: Jangan menambahkan spasi antara nilai properti dan unit (seperti margin-left: 20 px;). Cara yang benar adalah: margin-left: 20px; Internal CSS
Internal CSS ditentukan di dalam elemen Contoh <!DOCTYPE html> <html> <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>Ini Heading</h1> <p>Ini Paragraf.</p> </body> </html> Inline CSSInline CSS dapat digunakan untuk menerapkan gaya unik untuk satu elemen. Untuk menggunakan Inline CSS, tambahkan atribut ke elemen yang relevan. Atribut style dapat berisi properti CSS apa pun. Contoh <!DOCTYPE html> <html> <body> <h1 style="color:blue;text-align:center;">Ini adalah Heading</h1> <p style="color:red;">Ini adalah Paragraf.</p> </body> </html> Tips: Inline CSS ini menghilangkan beberapa kelebihan dari CSS yang dikenal untuk meringkas code.Gunakan metode ini dengan hemat. Multiple Sytle CSSJika beberapa properti telah ditentukan untuk pemilih (elemen) yang sama di halaman CSS berbeda, nilai dari style terakhir yang akan digunakan. Asumsikan bahwa lembar gaya eksternal memiliki gaya berikut untuk elemen h1 { color: navy; } Kemudian, asumsikan bahwa css internal juga memiliki gaya berikut untuk elemen h1 { color: orange; } Contoh <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> h1 { color: orange; } </style> </head> <body> <h1>Ini adalah Heading</h1> <p>Ini adalah Paragraf.</p> </body> </html> Contoh <!DOCTYPE html> <html> <head> <style> h1 { color: orange; } </style> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>Ini adalah Heading</h1> <p>Ini adalah Paragraf.</p> </body> </html> Urutan CSS
Jadi, inline css memiliki prioritas tertinggi, dan akan menggantikan Eksternal dan internal style serta default browser. Apa itu inline style CSS?Inline CSS
Inline CSS adalah kode CSS yang dituliskan di dalam file HTML. Jenis CSS ini hanya mempengaruhi satu baris kode HTML. Inline CSS tidak bisa diaplikasikan ke semua halaman website sekaligus. Namun, jenis CSS ini tepat digunakan ketika Anda ingin membuat elemen HTML dengan format khusus di sebuah halaman.
Atribut apakah yang digunakan untuk mendefinisikan inline CSS?Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML. Setiap elemen HTML memiliki atribut style, di situ lah inline CSS ditulis. Cara ini kurang efisien karena setiap tag HTML yang diberikan harus memiliki style masing-masing.
Berapa cara menggunakan CSS?Ada tiga cara dalam menggunakan CSS pada file HTML.. Inline. Metode ini digunakan dengan cara memasukkan file css ke dalam tag HTML secara langsung.. Internal. Metode ini menggunakan CSS dengan tag <style> pada file html. ... . External. Metode ini digunakan dengan cara memisahkan file html dan juga file css.. Bagaimana cara menggunakan Memanggil CSS dalam HTML?Untuk memasukkan CSS ke dalam file HTML kita akan memakai tag <link rel="stylesheet" href="path_ke_css_file" /> . Jika sedang membuat project web yang besar, sebaiknya menggunakan mode external CSS karena akan jauh lebih mudah untuk maintenance dan juga efisiensi size CSS.
|