Dalam hal ini ada beberapa istilah dan kosep dasar dari css. Tapi
sebelum menuju pembahasan lebih lanjut, akan lebih baik kita harus
membiasakan dengan bagaimana suatu style harus ditulis. Berikut adalah contoh mudah penulisan css pada suatu halaman web:
Contoh CSS 1
<html>
<head>
<style Type="text/css">
h1{font-family:tahoma}
h2{color: blue}
p{font-size:11pt ; font-style: italic}
</style>
</head>
<body>
<h2>NuSinau</h2>
<p>NuSinau adalah suatu website tempat berbagi berbagai ilmu pengetahuan.
</p></body>
</html>
Sintak CSS (Syntax CSS)
selector (properti: nilai)
body (color: blue)
p {font-family: tahoma}
h1 {font-weight: bold}
dan lain-lain
Selector
Selector biasanya merupakan elemen HTML atau tag dimana berbagai properti diberi suatu nilai. Dalam sebuah selector, setiap properti mempunyai nilai masing-masing dan sejumlah properti dengan nilai-nilai terkait dapat diatur.
Seperti pada contoh diatas; body, p, dan h1 adalah suatu selector dimana warna (color), nama font (font-family) dan jenis font (font-weight) diberi nilai untuk tiap propertinya (tahoma, bold, blue, dll).
Seperti pada contoh diatas; body, p, dan h1 adalah suatu selector dimana warna (color), nama font (font-family) dan jenis font (font-weight) diberi nilai untuk tiap propertinya (tahoma, bold, blue, dll).
Contoh
h1 (font-size: 20px; text-align: left; color: blue; font-family: Arial;)
dapat pula ditulis seperti:
h1 (font-size: 20px;
text-align: left;
color: blue;
font-family: Arial;)
Pengelompokan Selector (Grouping of Selectors)
Seperti dapat dilihat, satu selector dapat memiliki beberapa properti. Dalam konteks yang berbeda, beberapa selector dapat mempunyai properti dengan nilai yang sama. Dengan begitu harus dilakukan pengolompokan selector.
h1 , body , p , ul
{
color : blue;
}
Pada contoh diatas, elemen header, body, paragraph, unordered list berada pada group yang sama. Semua elemen tersebut nantinya akan berwarna biru.
Mengapa Pengelompokan diperlukan dalam CSS?
- Untuk berbagi style yang sama, bila beberapa elemen mempunyai nilai properti yang sama (misalnya font, ukuran, warna, dll).
- Dengan satu perintah dapat memberikan properti style pada elemen yang berbeda dengan nilai yang sama.
- Untuk menghemat waktu bila terjadi penambahan properti dan juga ketika merubah properti di elemen.
Kata Kunci
Sintak CSS, konsep html, teori CSS, konsep dasar
css, sintak html, teori dasar css, konsep css3, sintak sintak html,
landasan teori css, prinsip dasar css.
Posting Komentar