Berhubung untuk selanjutnya kita akan mencoba membahas dan
mempelajari tentang CSS, maka ada baiknya kita mengenal apa itu CSS.
CSS Adalah ..
Cascading Style Sheet (CSS) adalah salah satu bahasa pemrograman
yang digunakan untuk mengatur tampilan komponen web sehingga tampilan website
lebih menarik, terstruktur dan seragam.
Sama halnya styles dalam aplikasi pengolahan kata seperti
Microsoft Word, CSS dapat mengatur ukuran font, gambar, backgroud web, tabel,
footer, dan banyak komponen lainnya.
Sistem Penulisan Sintax
Berikut
contoh pendeklarasian CSS secara umum.
h1 {
color: #0789de;
}
h1 = selector,
Didalam “{ }” = deklarasi,
color = Property,
#0789de = Value.
Terdapat 3 sistem penulisan CSS yaitu :
1 1. Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style=”…” dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain.
Contoh :
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style=”…” dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain.
Contoh :
<p style="font-family: sans-serif; color: #3366CC;">
Inline Style Sheet
</p>
2 2. Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> … </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.
Contoh :
CSS didefinisikan terlebih dahulu dalam tag <style> … </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.
Contoh :
<style type="text/css">
h1 {
font-family: sans-serif;
color: #3366CC;
}
</style>
</head>
<body>
<h1>First Title</h1>
<p>A paragraph of interesting content.</p>
</body>
3 3. External Style Sheet
Metode ini hampir sama dengan metode Embedded Style Sheet, saja sintax CSS ditulis pada file berbeda yang kemudian di panggil pada file HTML yang memerlukan sintax tersebut.
Contoh :
Metode ini hampir sama dengan metode Embedded Style Sheet, saja sintax CSS ditulis pada file berbeda yang kemudian di panggil pada file HTML yang memerlukan sintax tersebut.
Contoh :
File Style.css
h1 {
font-family: sans-serif;
color: #3366CC;
}
File HTML
<head>
<title>External Style Sheet</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Tidak ada komentar:
Posting Komentar