Pengembangan Layanan IT - Pada kesempatan kali ini admin akan membahas tentang Cara penggunaan CSS, CSS merupakan singkatan dari Cascading Style Sheet. CSSadalah aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan. Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen.
Macam - macam versi Css :
Macam - macam versi Css :
CSS 1
Masih kuno, css hanya di kembangkan dan digunakan untuk formatting dokumen.
CSS 2
Lebih terasa mantap, Css sudah menggunakan font, table-layout, dan format dokumen agar mendukung media printer.
CSS 3
Terbaru, pengembangan dari versi sebelumnya dan memberikan fitur yang mengarah efek animasi seperti border efek, accordion,dll.
Keuntungan Menggunakan Css :
Masih kuno, css hanya di kembangkan dan digunakan untuk formatting dokumen.
CSS 2
Lebih terasa mantap, Css sudah menggunakan font, table-layout, dan format dokumen agar mendukung media printer.
CSS 3
Terbaru, pengembangan dari versi sebelumnya dan memberikan fitur yang mengarah efek animasi seperti border efek, accordion,dll.
Keuntungan Menggunakan Css :
- Memisahkan pembuatan dokumen (CSS dan HTML).
- Mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen web.
- Akses web lebih cepat saat di-loading (mempercepat pembacaann HTML).
- Fleksibel, interaktif, tampilan lebih menarik dan nyaman dipandang.
- Lebih kecil ukuran file sehingga bandwith yang digunakan juga otomatis menjadi lebih kecil.
- Dapat digunakan pada semua web browser.
Cara Menggunakan Css :
Untuk menggunakan CSS, ada 3 cara yang bisa kita gunakan yaitu:
- Embedded Style Sheet.
- Inline Style Sheet.
- Linked Style Sheet.
A. EMBEDDED STYLE SHEET
Embedded Style Sheetadalah cara penulisan kode dimana penulisan CSS dilakukan pada tag HTML, yaitu pada tag <style> ... </style> dan sebelum tag <body>.
Pada tag tersebut akan disisipkan kode CSS yang akan digunakan oleh tag HTML.
Sintak Penulisannya : <style type="text/css"><!—Atribut CSS --></style>
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Embedded Style Sheet</title>
</head>
<style type="text/css">
body{
background-color:red;
}
p{
font-weight:bold;
font-size:20px;
color: white;
text-decoration: underline;
}
</style>
<body>
<p>Contoh Embedded Style Sheet</p>
</body>
</html>
B. INLINE STYLE SHEET
Inline Style Sheet adalah cara penggunaan CSS langsung pada tag HTML yang di butuhkan saja. Cari ini dilakukan umumnya dikarenakan hanya sedikit properti yang dibutuhkan.
Sintak Penulisannya : <tag HTML style="Properti:value/nilai"> ... </tag HTML>
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Inline Style Sheet</title>
</head>
<body>
<h1 style="background-color:#9900ff; color:#FFFFF; text-align:center">
Contoh Inline style sheet</h1>
</body>
</html>
C. LINKED STYLE SHEET
Linked Style Sheet adalah cara yang dianjurkan untuk menggunakan kode css dengan HTML. Metode ini merupakan cara pengerjaan dimana antara kode css dan HTML di pisahkan. Untuk menggunakan kode css yang telah dipisahkan ini, maka dalam kode html dibuat skrip yang isinya adalah memanggil file css tersebut untuk digunakan dalam kode html.
Sintak Penulisannya : <link rel="stylesheet" type="text/css" href="namafile.css" >
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Linked Style Sheet</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Contoh Linked style sheet</h1>
</body>
</html>
Code cssnya dengan nama style.css :
body{
background-image:url(latar.jpg);
font-family:georgia;
}
h1{
background-color:#C3B413;
text-align:center;
color:#FFFFF;
}
