3 Cara Menambahkan CSS Pada Website ~ KODELOVER

Saat browser membaca sebuah style sheet, ia akan memformat dokumen HTML sesuai dengan informasi di style sheet.
Tiga Cara Memasukkan CSS

Ada tiga cara untuk memasukkan style sheet:

Lembar gaya eksternal
Lembar gaya internal
Gaya inline

Lembar Gaya Eksternal

Dengan lembar gaya eksternal, Anda bisa mengubah tampilan keseluruhan situs dengan mengubah hanya satu file!

Setiap halaman harus menyertakan referensi ke file sheet style eksternal di dalam elemen <link>. Elemen <link> masuk ke bagian <head>:
Contoh
<Head>
<Link rel = "stylesheet" type = "text / css" href = "mystyle.css">
</ Head>

Lembar gaya eksternal dapat ditulis dalam editor teks manapun. File tidak boleh berisi tag html. File style sheet harus disimpan dengan ekstensi .css.

Berikut adalah bagaimana tampilan "myStyle.css":
Tubuh {
    Background-color: lightblue;
}

H1 {
    Warna: angkatan laut;
    Margin-left: 20px;
}
Catatan Jangan menambahkan spasi antara nilai properti dan unit (seperti margin-left: 20 px;). Cara yang benar adalah: margin-left: 20px;
Lembar Gaya Internal

Lembar gaya internal dapat digunakan jika satu halaman memiliki gaya yang unik.

Gaya internal didefinisikan dalam elemen <style>, di dalam bagian <head> dari halaman HTML:
Contoh
<Head>
<Style>
Tubuh {
    Warna latar belakang: linen;
}

H1 {
    Warna: merah marun;
    Margin-left: 40px;
}
</ Style>
</ Head>
Gaya inline

Gaya sebaris dapat digunakan untuk menerapkan gaya unik untuk elemen tunggal.

Untuk menggunakan gaya sebaris, tambahkan atribut gaya ke elemen yang relevan. Atribut gaya dapat berisi properti CSS.

Contoh di bawah ini menunjukkan bagaimana mengubah warna dan margin kiri elemen <h1>:
Contoh
<H1 style = "color: blue; margin-left: 30px;"> Ini adalah judul. </ H1>
Catatan Gaya inline kehilangan banyak keuntungan dari style sheet(dengan mencampur konten dengan presentasi). Gunakan metode ini dengan hemat!

Beberapa Style Sheets

Jika beberapa properti telah didefinisikan untuk pemilih (elemen) yang sama dalam lembar gaya yang berbeda, nilai dari lembar gaya baca terakhir akan digunakan.
Contoh

Asumsikan bahwa style sheet eksternal memiliki gaya berikut untuk elemen <h1>:
H1 {
    Warna: angkatan laut;
}

Kemudian, asumsikan bahwa style sheet internal juga memiliki gaya berikut untuk elemen <h1>:
H1 {
    warna oranye;
}

Jika gaya internal didefinisikan setelah tautan ke lembar gaya eksternal, elemen <h1> akan "berwarna oranye":
Contoh
<Head>
<Link rel = "stylesheet" type = "text / css" href = "mystyle.css">
<Style>
H1 {
    warna oranye;
}
</ Style>
</ Head>

Namun, jika gaya internal didefinisikan sebelum tautan ke lembar gaya eksternal, elemen <h1> akan menjadi "angkatan laut":
Contoh
<Head>
<Style>
H1 {
    warna oranye;
}
</ Style>
<Link rel = "stylesheet" type = "text / css" href = "mystyle.css">
</ Head>
Urutan Cascading

Gaya apa yang akan digunakan bila ada lebih dari satu gaya yang ditentukan untuk elemen HTML?

Secara umum kita dapat mengatakan bahwa semua gaya akan "mengalir" ke dalam style sheet "virtual" baru dengan aturan berikut, di mana nomor satu memiliki prioritas tertinggi:

    Gaya sebaris (di dalam elemen HTML)
    Lembar gaya eksternal dan internal (di bagian kepala)
    Default browser

Jadi, gaya inline (di dalam elemen HTML tertentu) memiliki prioritas tertinggi, yang berarti akan menimpa gaya yang didefinisikan di dalam tag <head>, atau dalam style sheet eksternal, atau nilai default browser.
dengan presentasi). Gunakan metode ini dengan hemat!

KODELOVER

3 Cara Menambahkan CSS Pada Website

Related Post