Dengan CSS kita dapat mengatur jenis font, ukuran font, ukuran gambar, background, margin, dan juga lebih mudah untuk mengatur layout serta masih banyak lagi.
Versi CSS yang terbaru yaitu CSS3. Versi ini dapat melakukan banyak hal untuk desain website. Diantara yang terbaru di CSS3 yaitu rounded corner, box shadow, text shadow, animasi 2D, animasi 3D, Anda juga bisa menambahkan font dengan @font-face di CSS3. Dengan hadirnya CSS3 kini juga tersedia media query untuk membuat sebuah website responsive, yang dapat menyesuaikan tampilan dengan ukuran layar perangkat yang digunakan.
CSS memiliki beberapa komponen sebagai berikut:
- Selector
- Properties
- Declaration
- Values
Contoh penulisan CSS:
body {
background: black;
}
Penjelasan:
body sebagai selector.
background sebagai properties.
black sebagai values
declaration adalah bagian di dalam tanda "{}", terdiri dari properties dan values.
Metode penulisan CSS ada 3, yaitu:
Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan, dengan cara menambahkan atribut style="" di dalam tag. Dengan metode ini CSS hanya berlaku pada tag yang bersangkutan. Di bawah ini contoh penggunaan inline style sheet pada sebuah file HTML.
<html>
<head>
<title>belajar CSS</title>
</head>
<body>
<p style="font-family:verdana; color:#000; text-align:justify;">
teks ini diatur dengan CSS metode inline style sheet
</p>
</body>
</html>
Embedded Style Sheet
CSS didefinisikan diantara tag <style>...</style> di dalam tag HEAD. Dengan metode ini disebutkan terlebih dahulu atribut-atribut HTML nya kemudian digunakan saat coding di dalam tag BODY. Berikut ini saya contohkan penulisan CSS dengan embedded style sheet.
<html>
<head>
<title>belajar CSS</title>
<style>
p {
font-family:verdana;
color:#000;
text-align:justify;
}
</style>
</head>
<body>
<p>
teks ini diatur dengan CSS metode embedded style sheet
</p>
</body>
</html>
External Style Sheet
Metode eksternal style sheet ini menggunakan file *.css untuk file sumber CSS nya. Jadi, file berekstensi .css tersebut berisi kode-kode CSS untuk mengatur halaman HTML yang memanggilnya. Untuk memanggilnya dengan menambahkan kode berikut di dalam tag HEAD pada file HTML.
<link rel="stylesheet" type="text/css" href="file_css_nya.css">
Penulisan kode External Style Sheet seperti halnya penulisan pada embedded style sheet. Hanya saja tanpa tag pembuka dan penutup <style></style>.
Itulah pengenalan saya untuk CSS semoga Anda dapat lebih paham dengan CSS dan mudah untuk belajarnya. Semoga bermanfaat :)
0 comments:
Post a Comment