CASCADING STYLE SHEET
- CSS digunakan dalam kode HTML untuk menciptakan
suatu kumpulan style yang digunakan untuk
memperluas kemampuan HTML
- Penggunaan CSS:
selector {property: value;}
JENIS CSS
- Inline: digunakan langsung terhadap tag yang berada
di dalam BODY dengan menggunakan atribut STYLE,
untuk melakukan pengaturan dengan properti-
properti CSS
- Internal: properti-properti CSS diatur diantara tag
STYLE yang diletakkan di antara tag HEAD.
- External: pendefinisian style dilakukan pada file
tersendiri. Untuk mengakses style eksternal,
digunakan tag LINK.
MENGATUR FONT DAN TEKS
- Properti font-size: mengatur besar huruf.
- Properti font-family: berguna untuk menentukan nama font.
- Properti font-style: mengatur teks agar dimiringkan atau tidak.
- Properti text-indent: digunakan untuk melakukan indentasi, yaitu menjorokkan baris pertama agak ke kanan.
- Properti line-height: berguna untuk menentukan jarak vertikal antara satu baris dengan baris di atas dan di bawahnya.
- Properti text-decoration: mengatur teks agar digarisbawahi, dicoret atau dibuat berkedip.
- Properti font-weight: berguna untuk menebalkan teks.
- Properti text-transform: berguna untuk melakukan konversi terhadap teks.
- Properti text-align: mengatur peletakan teks pada arah horizontal.
Simpan teks di bawah ini dengan nama styleku.css
body { font-size:39pt;
color:white;
background-color:blue;}
table { background-color:silver;
color:green;}
Lalu simpan teks dibawah ini dengan nama coba.html
External CSS
| Kata | Arti |
|---|---|
| Red | Merah |
| Blue | Biru |
Biru? Pasti!
Merah? Pasti!
Merah? Nggak Mungkin !
div tanpa blockquote: perhatikan hasilnya dan bandingkan dengan hasil di bawah ini:
blockquote saja
div dengan blockquote: apa bedanya dengan hasil di atas?
teks dalam cite
teks dalam cite yang berada dalam div dengan class="biru". warnanya menjadi biru
teks h5 berdiri sendiri dengan warna bawaan
warna teks ini ungu
teks dalam h4 ungu juga
teks dalam h5 biru
tanpa span
Miring lho
dan ini digarisbawahi
kembali miring saja
teks normal
teks ini besar dan miring
teks normal
Output:
HTML vs. CSS
This is a header
Here is a block of
paragraph text, blah
blah blah etc.
Another header
And yet another paragraph
with a block of text.
Output:
The Class Selector
This is a normal paragraph, nothing
exciting going on here.
But this is a really important
paragraph - pay attention!
p { color: gray; font-size: 12px;}
p.alert { color: red; font-size: 18px; font-weight: bold; }
The ID Selector
HTML
- Chapter 1
- Chapter 2
- Chapter 3
CSS #contents {
font-weight: bold;
font-size: 18px; }
Descendant Selectors
This is a stand-alone paragraph.
A paragraph inside our blockquote.
And another blockquoted paragraph.
blockquote p { color: blue; font-weight: bold; border-left: 3px solid blue; padding-left:10px; }
The Declaration Block
selector { property: value; property: value; }
Color:
aqua, black, blue, fuchsia, gray, etc.
By Hex Value
Roses are #ff0000
Violets are #0000ff
background-color
margin
padding
border
Margin and Padding Values
margin: 0px 20px 10px 20px;
