Tutorial Buat Style CSS Yang Mudah Dipahami
Pengenalan
Ada 3 cara untuk menambahkan style CSS ke website kalian : dengan menggunakan metode Inline, Internal, External Style Sheets.
1. Inline Style Sheets
Adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style.
Untuk menggunakan metode inline ini kalian harus menggunakan atribut <style> kedalam tag HTML. Cara ini kurang direkomendasikan karena, karena setiap tag HTML harus diberikan style masing-masing.
Namun dibeberapa waktu metode ini menjadi berguna.
Berikut contoh penggunaan Metode Inline Style CSS.
<!DOCTYPE html>
<html>
<head>
<tittle>Implementasi Inline Style CSS</tittle>
</head>
<body>
<h2 style="background-color : red; color:blue" >
Text ini akan berwarna merah dan background berwarna biru
</h2>
</body>
</html>
Manfaat Inline CSS
- Berguna jika Anda ingin menguji dan melihat perubahan.
- Berguna untuk perbaikan cepat.
Kekurangan Inline CSS
- Inline CSS harus diterapkan pada setiap elemen.
2. Internal Style Sheets
Digunakan untuk memisahkan kode CSS dari tag HTML, namun tetap dalam satu halaman tag HTML. Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada sebuah tag <style>. Tag style ini harus berada pada bagian <head> dari halaman HTML.
Cara menambahkan Internal CSS kedalam halaman HTML.
1). Buka file HTML dengan menggunakan text editor.
2). Cari tag <head> lalu tambahkan kode seperti dibawah ini:
<style type="text/css">
3). Pada baris baru, tambahkan rule CSS:
body {
background-color: blue;
}
h1 {
color: red;
padding: 60 px;
}
4). Setelah menambah rule CSS, jangan lupa untuk menambah tag penutup :
</style>
Nantinya file HTML yang sudah ditambahkan style akan sepeti ini :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}
</style>
</head>
<body>
<h1>Hostinger Tutorials</h1>
<p>This is our paragraph.</p>
</body>
</html>Kelebihan internal CSS
- Perubahan hanya terjadi pada 1 halaman
- Class dan Id bisa digunakan oleh internal stylesheet.
Class(.) dapat diberikan pada banyak halaman HTML dan dapat dipanggil sekaligus.
Id(#) hanya dapat bekerja pada satu penandaan saja.
- Tidak perlu mengupload beberapa file karena HTML dan CSS bisa digunakan difile yang sama
Kekurangan internal CSS
- Jika memiliki beberapa halaman dengan style yang sama, Anda harus membuat kode CSS pada masing-masing halaman tersebut.
3. External Style Sheets
Digunakan untuk 'mengangkat' kode CSS tersebut kedalam sebuah file tersendiri yang sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, tinggal 'memanggil' file CSS tersebut. File CSS eksternal biasanya diletakkan setelah bagian <head> pada halaman:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Dalam contoh diatas, file style.css berisikan semua rule. Contohnya:
.xleftcol {
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol {
float: left;
width: 34%;
background:#eff2df;
}
Manfaat CSS eksternal :
- Ukuran file HTML menjadi lebih kecil serta menjadi lebih rapih.
- Kecepatan loading menjadi cepat.
- File CSS yang sama dapat digunakan dibanyak halaman.
Kekurangan CSS eksternal :
- Halaman belum tampil secara sempurna hingga file CSS selesai dipanggil.
Source :
Buku paket Pemrograman Web dan Perangkat Bergerak
https://www.malasngoding.com/belajar-html-mengenal-class-dan-id-pada-html/
https://www.hostinger.co.id/tutorial/perbedaan-inline-css-external-css-dan-internal-css
Komentar
Posting Komentar