17.07
Unknown
PENGENALAN
CSS adalah standard pembuatandanpemakaian style untukdokmenterstruktur, CSS di gunakan untuk mempersingkat penulisan tag HTML seperti font, color, text, dan table menjadilebihringkassehinggatidakterjadipengulanganpenulisan.
CSS distandarisasioleh W3C (World Wide Web Consortium).CSS dapat dipasang pada dokumen HTML yang telah jadi. Dalam melayout sebuah web ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu:
Metode Table
MetodeDiv
Keuntunganmenggunakan CSS adalah :
Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
Ukuran file menjadi lebihkecil, sehingga load file lebihcepat,
Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
Dapat berkolaborasi dengan JavaScript.
Digunakan dalam hamper semua web browser.
Cara penulisanCSS :
Inline Style Sheet (Penulisan di dalam elemen HTML)
Embedded Style Sheet (Penulisan CSS di dalamelemen HTML dengan menggunakan tag<style>)
Linked Style Sheet (Penulisan skrip CSS di dokumen yang berbeda/terpisah)
SELECTOR
Terdiri dari tag class dan ID. Setiap tag yang ada di dalam HTML bisa menjadi Selector
Selector Class
Diawal penulisan menggunakan tanda titik, pada HTML ditambahkan class.
Contoh :
Style1.css
h1{
color : red;
}
.isiteks{
font-family : Arial,Helvetica;
font-size : 12px;
color : #6699FF;
}
contoh_class.html
<!DOCTYPE html>
<html>
<head>
<link href="style1.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="isiteks">Contoh Class</p>
</body>
</html>
Selector ID
Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header ,content, dan footer dalam desain web, karena didefiniskan dengan ID berbeda.
Contoh :
Style2.css
h1{
color : red;
}
.isiteks{
font-family : Arial,Helvetica;
font-size : 12px;
color : #6699FF;
}
#judul{
font-family : Arial,Helvetica;
font-size : 12px;
color : lightgreen;
}
Contoh_id.html
<!DOCTYPE html>
<html>
<head>
<link href="style2.css"rel="stylesheet" type="text/css">
</head>
<body>
<p id="judul">CSS Paragraph Menggukan ID</p>
<p class="isiteks">Contoh Class</p>
</body>
</html>
Semoga bermanfaat.. :)
Posted in: Tutorial CSS
0 komentar:
Posting Komentar
tolong komentarnya berhubungan dengan artikel yang ada