CSS Part 2 :cara menggunakan css di html
CARA MENGINPUTKAN CSS DI HTML
ASSALAMUALAIKUM wr wb.
Apa kabar teman-teman bagaimana keadaan kalian baikkan,kali ini saya akan membahas cara menginputkan css ke html apa teman-teman tau cara menginputkan css kedalam html kalau belum tau berikut penjelasannya.
Berikut beberapa cara yang digunakan untuk menginputkan css kedalam html:
1.Menggunakan File CSS Eksternal
Menggunakan file CSS eksternal maksudnya adalah anda membuat dokumen css menjadi sebuah file css yang terpisah dengan ekstensi file .css. Misalnya anda membuat sebuah dokumen CSS dan menyimpannya dengan nama style.css. Misalnya anda membuat sebuah dokumen css seperti berikut ini dan anda menyimpannya sebagai sebuah file bernama style.css.
body {
font-family: arial;
background-color: rgb(185,179,175);}
h1 {
color: rgb(255,255,255);}
Untuk menambahkan file css yang anda buat tersebut, berikut ini contohnya.
<!DOCTYPE html>
<html>
<head>
<title>Menggunakan File CSS</title>
<link href="css/styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>CSS</h1>
<p>Terdapat berbagai jenis css yang bisa digunakan .</p>
</body>
</html>
Keterangan dari contoh kode di atas sebagai berikut:
link : elemen link digunakan untuk memberitahukan ke browser dimana lokasi file CSS yang akan digunakan untuk mengatur halaman web. Elemen ini tidak memerlukan closing tag dan berada di antara elemen head dan /head.
href : bagian ini berisi path atau lokasi dari file css disimpan
type: atribut ini menentukan tipe dokumen yang menjadi rujukan. Isinya seharusnya “text/css”
rel: atribut ini menentukan hubungan antara file css dengan dokumen HTML yang merujuk ke file css tersebut. Isi dari atribut tersebut adalah stylesheet saat merujuk ke file CSS.
Sebuah halaman HTML dapat menggunakan lebih dari satu file CSS. Untuk melakukan hal ini, maka dapat membuat elemen <link> sebanyak file CSS yang digunakan.
Menggunakan file CSS eksternal maksudnya adalah anda membuat dokumen css menjadi sebuah file css yang terpisah dengan ekstensi file .css. Misalnya anda membuat sebuah dokumen CSS dan menyimpannya dengan nama style.css. Misalnya anda membuat sebuah dokumen css seperti berikut ini dan anda menyimpannya sebagai sebuah file bernama style.css.
body {
font-family: arial;
background-color: rgb(185,179,175);}
h1 {
color: rgb(255,255,255);}
Untuk menambahkan file css yang anda buat tersebut, berikut ini contohnya.
<!DOCTYPE html>
<html>
<head>
<title>Menggunakan File CSS</title>
<link href="css/styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>CSS</h1>
<p>Terdapat berbagai jenis css yang bisa digunakan .</p>
</body>
</html>
Keterangan dari contoh kode di atas sebagai berikut:
link : elemen link digunakan untuk memberitahukan ke browser dimana lokasi file CSS yang akan digunakan untuk mengatur halaman web. Elemen ini tidak memerlukan closing tag dan berada di antara elemen head dan /head.
href : bagian ini berisi path atau lokasi dari file css disimpan
type: atribut ini menentukan tipe dokumen yang menjadi rujukan. Isinya seharusnya “text/css”
rel: atribut ini menentukan hubungan antara file css dengan dokumen HTML yang merujuk ke file css tersebut. Isi dari atribut tersebut adalah stylesheet saat merujuk ke file CSS.
Sebuah halaman HTML dapat menggunakan lebih dari satu file CSS. Untuk melakukan hal ini, maka dapat membuat elemen <link> sebanyak file CSS yang digunakan.
Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian kepala
<head>
<link rel=â€stylesheet†type=â€text/css†href=â€mystyle.css†/>
</head>
dengan eksternal style sheet dapat ditulis dalam bentuk editor teks apapun , dan harus disimpan pada ekstensi css . sebuah contoh dari file style sheet dibawah ini :
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gifâ€);}
<head>
<link rel=â€stylesheet†type=â€text/css†href=â€mystyle.css†/>
</head>
dengan eksternal style sheet dapat ditulis dalam bentuk editor teks apapun , dan harus disimpan pada ekstensi css . sebuah contoh dari file style sheet dibawah ini :
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gifâ€);}
2.Menggunakan Internal CSS
Cara ini dapat dilakukan dengan cara anda menuliskan aturan-aturan CSS langsung pada dokumen HTML yang anda buat. Berikut ini contohnya:
view source
print
?
<!DOCTYPE html>
<html>
<head>
<title>Using Internal CSS</title>
<style type="text/css">
body {
font-family: arial;
background-color: rgb(185,179,175);}
h1 {
color: rgb(255,255,255);}
</style>
</head>
<body>
<h1>Kentang</h1>
<p>Terdapat berbagai jenis kentang yang bisa anda konsumsi sebagai pengganti nasi.</p>
</body>
</html>
Elemen <style> menggunakan atribut type yang menunjukkan bahwa style yang ditentukan berupa CSS.
Cara ini dapat dilakukan dengan cara anda menuliskan aturan-aturan CSS langsung pada dokumen HTML yang anda buat. Berikut ini contohnya:
view source
?
<!DOCTYPE html>
<html>
<head>
<title>Using Internal CSS</title>
<style type="text/css">
body {
font-family: arial;
background-color: rgb(185,179,175);}
h1 {
color: rgb(255,255,255);}
</style>
</head>
<body>
<h1>Kentang</h1>
<p>Terdapat berbagai jenis kentang yang bisa anda konsumsi sebagai pengganti nasi.</p>
</body>
</html>
Elemen <style> menggunakan atribut type yang menunjukkan bahwa style yang ditentukan berupa CSS.
Di bagian kepala html anda dapat mendefinisikan gaya internal dengan menggunakan tag style seperti ini :
<head>
<style type=â€text/cssâ€>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gifâ€);}
</style>
</head>
<head>
<style type=â€text/cssâ€>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gifâ€);}
</style>
</head>
3. Inline style
gaya inline dengan mencampurkan konten dengan presentasi akan banyak kehilangan keuntungan , maka anda dapat menggunakan metode hemat dibawah ini :
Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. berikut contoh bagaimana mengubah warna dan margin kiri paragraf :
<p style=â€color:sienna;margin-left:20pxâ€>This is a paragraph.</p>
gaya inline dengan mencampurkan konten dengan presentasi akan banyak kehilangan keuntungan , maka anda dapat menggunakan metode hemat dibawah ini :
Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. berikut contoh bagaimana mengubah warna dan margin kiri paragraf :
<p style=â€color:sienna;margin-left:20pxâ€>This is a paragraph.</p>
4.Multiple Style Sheet
Jika beberapa properti telah ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda maka nilai-nilai akan diwariskan dari style sheet lebih spesifik.
contoh style sheet eksternal untuk pemilih h3 :
h3
{
color:red;
text-align:left;
font-size:8pt;
}
contoh style sheet internal untuk pemilih h3 :
h3
{
text-align:right;
font-size:20pt;
}
Jika halaman dengan internal style sheet link ke style sheet eksternal properti untuk h3 akan menjadi:
color:red;
text-align:right;
font-size:20pt;
Warna diwariskan dari style sheet eksternal dan teks-alignment dan ukuran font diganti oleh internal style
Beberapa Styles Akan Cascade ke Satu :
gaya dapat ditentukan :
didalam sebuah elemen HTML
didalam bagian kepala halaman HTML
didalam bagian kepala halaman HTML
didalam sebuahj file CSS eksternal
Secara umum kita dapat mengatakan bahwa semua gaya akan “cascade†menjadi lembaran baru “virtual†gaya oleh aturan berikut, di mana nomor empat memiliki prioritas tertinggi:
Browser default
Eksternal style sheet
Internal style sheet (di bagian kepala)
Inline style (di dalam elemen HTML)
Jadi gaya inline yang ada di dalam elemen HTML memiliki prioritas tertinggi , yang berarti bahwa ia akan menimpa gaya yangb didefinisikan di dalam tag <head>, atau dalam style sheet eksternal , atau dalam browser (nilai default).
Secara umum kita dapat mengatakan bahwa semua gaya akan “cascade†menjadi lembaran baru “virtual†gaya oleh aturan berikut, di mana nomor empat memiliki prioritas tertinggi:
Browser default
Eksternal style sheet
Internal style sheet (di bagian kepala)
Inline style (di dalam elemen HTML)
Jadi gaya inline yang ada di dalam elemen HTML memiliki prioritas tertinggi , yang berarti bahwa ia akan menimpa gaya yangb didefinisikan di dalam tag <head>, atau dalam style sheet eksternal , atau dalam browser (nilai default).
Sekian dari artikel saya semoga bermanfaat terima kasih.
REFERENSI:
WASSALAMUALAIKUM wr wb.
Komentar
Posting Komentar