1. Eksternal CSS
Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML Eksternal CSS ditulis di sebuah file khusus yang berekstensi .css . File eksternal CSS biasanya diletakkan setelah bagian <head> pada halaman.
Cara ini lebih sederhana dan simpel daripada menambahkan kode CSS di setiap elemen HTML yang ingin Anda atur tampilannya.
Manfaat External CSS
- Ukuran file HTML akan menjadi lebih kecil dan struktur dari kode HTML jadi lebih rapi.
- Loading website menjadi lebih cepat.
- File CSS dapat digunakan di beberapa halaman website sekaligus.
- Halaman akan menjadi berantakan, ketika file CSS gagal dipanggil oleh file HTML. Hal ini terjadi disebabkan karena koneksi internet yang lambat.
Contoh External CSS
Berikut ini adalah contoh penempatan External CSS pada file HTML. Sebagai contoh saya membuat file CSS dengan nama style.css berikut isi kode style.css.
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Untuk menggunakan file style.css dalam HTML, Anda perlu menambahkannya ke dalam file HTML. Dengan menggunakan tag <link> berikut contohnya.
<link rel="stylesheet" type="text/css" href="style.css">
Berikut ini penempatan kode dalam satu file HTML.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Eksternal CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>JAVABITPRO</h2>
</body>
</html>
2. Internal CSS
Internal dapat digunakan jika satu halaman HTML memiliki gaya yang unik.
Gaya internal didefinisikan dalam elemen <style>, di dalam bagian <head> halaman HTML
Internal dapat digunakan jika satu halaman HTML memiliki gaya yang unik.
Gaya internal didefinisikan dalam elemen <style>, di dalam bagian <head> halaman HTML
Contoh :
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
3. 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. Anda akan lebih sulit dalam mengatur website jika hanya menggunakan inline style CSS. Sebab, Inline CSS digunakan hanya untuk mengubah satu elemen saja.
Manfaat Inline CSS
- Sangat membantu ketika Anda hanya ingin menguji dan melihat perubahan pada satu elemen.
- Berguna untuk memperbaiki kode dengan cepat.
- Proses permintaan HTTP yang lebih kecil dan proses load website akan lebih cepat.
Kekurangan Inline CSS
- Tidak efisien karena Inline style CSS hanya bisa diterapkan pada satu elemen HTML.
Contoh :
<h1 style="color:blue;text-align:center;">JAVABITPRO</h1>
Tags:
CSS