BAB 2
PENGENALAN CSS
(Cascading Style Sheets)
2.1 Pengertian CSSCascading Style Sheets (CSS) adalah suatu teknologi yang digunakan
untuk memperindah halaman website (situs), dengan CSS kita dapat
dengan mudah mengubah keseluruhan warna dan tampilan yang ada di
situs kita sekaligus memformat ulang situs kita.
CSS ini telah distandarkan oleh World Wide Web Consortium (W3C)
untuk digunakan di web browser
Keuntungan CSS
- Dapat di-update dengan cepat dan mudah, karena kita
cukup mendefinisikan sebuah style-sheet global yang berisi
aturan-aturan CSS tersebut untuk diterapakan pada seluruh
dokumen-dokumen HTML pada halaman situs kita.
- User yang berbeda dapat mempunyai style-sheet yang
berbeda pula.
- Ukuran dan kompleksitas document code dapat diperkecil.
2.2 Penulisan CSS
Syntaxis CSS dibagi dalam 3 bagian, yaitu : selector {property : value}
Dimana :
selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubah.
h1 { color: green; }
selector
property
value
Penulisan CSS dibagi 3 penempatan :
o Internal Style Sheet
o External Style Sheet
o Inline Style Sheet
1. Internal Style Sheet
Yaitu menuliskan langsung script CSS di file HTML-nya.
Contoh :
<html>
<head>
<title>Belajar CSS</title>
<style type=”text/css”>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Selamat Datang CSS</p>
</body>
</html>
2. External CSS
Yaitu memanggil file CSS dari tempat/folder/lokasi lain, dengan kata
lain file CSS terpisah dengan file HTML. Browser akan membaca definisi
style dari file test.css dan akan mengikuti format tersebut.Eksternal style
ditulis di text editor lain dengan ekstention .css . Contoh :
<html>
<head>
<title>Belajar CSS</title>
<link rel=”stylesheet” type=”text/css”
href=”test.css”/>
</head>
<body>
<h3> Selamat Datang CSS </h3>
</body>
</html>
3. Inline CSS
Yaitu penulisan kode CSS dalam tag HTML.
Contoh :
<html>
<head>
<title>Belajar CSS</title>
</head>
<p style=”background: blue; color: white;”>Style
Menggunakan CSS</p>
</body>
</html>
2.3 Jenis – jenis CSS
1. Font Property
Font
Syntax : font: <value>
PossibleValues :
[<font-style>||<font-variant>||<font-weight>]?<font-size>[/<lineheight>]?<font-family>
Contoh:
P { font: italic bold 12pt/14pt Times, serif }
Font Size
Syntax : font-size: <value>
PossibleValues :
<absolute-size>|<relative-size>|<length>|<percentage>
• <absolute-size>:xx-small | x-small |small|medium| large|x-large | xxlarge
• <relative-size> : larger | smaller
• <percentage>(in relation to parent element)
Font Style
Syntax : font-style: <value>
Possible Values : normal |italic|oblique
Font Variant
Syntax : font-variant: <value>
Possible Values : normal | small-caps
Font Weight
Syntax : font-weight: <value>
Possible Values : normal |bold|bolder| lighter | 100 | 200 | 300 |400 |
500 | 600 | 700 | 800 | 900
2. Color & Background Property
Color
Sintax : color : <color>
Nilai (value) dari color adalah sebuah keyword atau sebuah kode RGB.
16 keyword diambil dari palette Windows VGA: aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal,
white, and yellow.
Ada 4 cara dalam menuliskan warna menggunakan kode RGB:
1. #rrggbb (e.g., #00cc00)
2. #rgb (e.g., #0c0)
- rgb(x,x,x) dimana x adalah integer antara 0 dan 255 (e.g.,
rgb(0,204,0))
- rgb(y%,y%,y%) dimana y adalah nomor antara 0.0 dan
100.0 (e.g., rgb(0%,80%,0%))
Background Color
Syntax : background-color: <value>
Possible Values : <color>| transparent
Background
Syntax : background: <value>
Possible Values :
<background-color>||<background-image>||<backgroundrepeat>||<background-attachment>||<background-position>
3. CSS : Text Alignment & Box Property
Text Alignment
Syntax : text-align: <value>
Possible Values : left | right | center | justify
Box Properties
Bottom Border Width
Syntax : border-bottom-width: <value>
Possible Values : thin | medium | thick |<length>
Width
Syntax : width: <value>
Possible Values: <length>|<percentage>| auto
Height
Syntax : height : <value>
Possible Values : <length>| auto
Border Style
Syntax : border-style: <value>
Possible Values: [ none | dotted | dashed | solid | double | groove |
ridge | inset | outset ]{1,4}
2.4 Hyperlink dengan CSS.
a : link = link awal dengan warna orange dan untuk garis bawah teks masih ada.
a : visited = jika cursor dan di klik akan berwarna biru
a : hover = jika cursor disorot ke link yang kita sorot maka akan berwarna
merah dan garis bawah pada teks akan hilang, sebab terdapat selector textdecoration dan value none.
a : active = jika link tersebut diklik dan halaman web berada pada link tersebut.
LATIHAN
1. Buatlah layout halaman web menggunakan CSS yang berisikan tentang profil diri
Anda !
2. Buatlah contoh penulisan CSS dengan metoda :
Internal Style Sheet
External Style Sheet
Inline Style Sheet
No comments:
Post a Comment
Silahkan Berikan Komentar Yang Baik