Css
html
1.
PENGENALAN CSS
Ø CSS = Cascading Style Sheet adalah suatu teknik penulisan kode untuk
memperindah dan mempermudah dalam pengkodean HTML dengan tujuan untuk
memperindah tampilan situs.
2.
SINTAKS CSS
Ø Secara umum CSS terdiri dari 2 bagian,yaitu:
o Selector,menunjukkan elemen yang akan diatur/diformat. Jika
digunakan untuk lebih dari 1 elemen,gunakan pemisah berupa tanda koma (,).
o Declaration,merupakan pengaturan dari selector yang dipilih.
§ Property yaitu bagian dari elemen yang akan diatur
§ Value yaitu nilai dari property element yang diatur.
3.
SELECTOR DALAM CSS
Pada CSS terdapat 3
macam selector,yaitu:
Ø CLASS
Selector diawali dengan
tanda “.” (dot). Sebuah
selector class dapat digunakan lebih dari satu tag HTML. Masukkan style css
dalam selector class jika terdapat 2 atau lebih elemen/tag HTML yang bisa
memiliki style yang sama dalam satu halaman.
Contoh kode
selector class:
.post{background-color:#cdcdcd;}
Kode HTML untuk
menggunakan selector class tersebut:
<div
class=”post”>.....teks....</div>
Class “.post” dapat digunakan lebih dari 1
kali pada sebuah halaman.
Ø ID
Selector id diawali
dengan tanda “#”. Kebalikan dari selector class,selector id boleh digunakan
sekali pada satu halaman.
Contoh kode
selector id:
#header{backgorund-color:silver;padding:5px;}
Kode HTML untuk
menggunakan selector id:
<div
id=”header”> teks contoh </div>
Ø TAG HTML
Selector tag HTML tidak
memerlukan tanda awalan apapun. Berbeda dengan selector ID dan selector
class,selector HTML akan mempengaruhi tag HTML yang diberi style.
Contoh kodenya :
p {font-family:Arial;font-size:10pt;}
kode diatas akan
membuat semua tag <p> {paragraf} agar ditampilkan menggunakan font Arial
dengan ukuran 10pt (point).
4.
PROPERTY YANG DAPAT DIATUR CSS
Property yang dapat
diatur menggunakan CSS :
|
Type
|
Property
|
|
ð Font
|
o Font
o Font-family
o Font-size
o Font-size-adjust
o Font-stretch
o Font-style
o Font-variant
o Font-weight
|
|
ð Text
|
Color
Direction
Color
Letter-spacing
Text-align
Text-decoration
Text-indent
Text-shadow
Text-transform
Unicode-bidi
White-space
Word-spacing |
|
ð Background
|
v Background
v Background-attachment
v Background-color
v Background-image
v Background-position
v Background-repeat
|
|
ð Border
|
Ø Border
Ø Border-color
Ø Border-style
Ø Border-width
Ø Border-bottom
Ø Border-bottom-color
Ø Border-bottom-style
Ø Border-bottom-width
Ø Border-left
Ø Border-left-color
Ø Border-left-style
Ø Border-left-width
Ø Border-right
Ø Border-right-color
Ø Border-right-style
Ø Border-left-width
Ø Border-top
Ø Border-top-color
Ø Border-top-style
Ø Border-top-width
|
|
ð Margin
|
ü Margin
ü Margin-bottom
ü Margin-left
ü Margin-right
ü Margin-top
|
|
ð Padding
|
§ Padding
§ Padding-bottom
§ Padding-left
§ Padding-right
§ Padding-top
|
|
ð Dimension
|
o
Height
o
Line-height
o
Max-height
o
Max-width
o
Min-height
o
Min-width
o
Width
|
|
ð Position
|
Ø Bottom
Ø Clip
Ø Left
Ø Overflow
Ø Right
Ø Top
Ø Vertical-align
Ø Z-indexs
|
|
ð Outline
|
i.
Outline
ii.
Outline-color
iii.
Outline-style
iv.
Outline-width
|
|
ð Table
|
ü Border-collapse
ü Border-spacing
ü Border-side
ü Empty-cells
ü Table-layout
|
|
ð List
and Marker
|
·
List-style
·
List-style-image
·
List-style-position
·
List-style-type
·
Marker-offset
|
|
ð Generated
Content
|
Content
Counter-increment
Counter-reset
Quotes |
|
ð Classification
|
v Clear
v Cursor
v Display
v Float
v Position
v visibility
|
5.
MENAMBAHKAN CSS
PADA DOKUMEN WEB
Ada 3 cara menambahkan
CSS pada dokumen web,yaitu:
1.
Dengan membuat
link dari dokumen HTML ke file CSS.\
Syarat utamanya adalah
kita memiliki file berekstensi “.css”. Metode ini sering disebut disebut juga
Eksternal Style Sheet. Bentuknya :
<link rel=”stylesheet” type=”text/css”
href=”css_files.css”>
Baris diatas biasanya diletakkan
didalam elemen <head>.
Ada beberapa atribut
yang dapat dibawa oleh elemen link,yaitu :
Ø Rel
Merupakan atribut yang
dibutuhkan dan mengatur hubungan antara dokumen yang memuat <link> dengan
dokumen tujuan. Value yang dibutuhkan untuk bekerja dengan style sheet adalah
stylesheet.
rel=”stylesheet”
Ø Type
Menjelaskan tipe
dokumen yang akan dihubungkan. Pada kasus ini,kita akan menghubungkan dengan
CSS style sheet. Maka value dari type yang dibutuhkan adalah text/css.
type=”text/css”
Ø Href
Digunakan untuk
mengatur URL dari dokumen yang akan dihubungkan.
href=”..../stylesheets/interface.css”
Ø Hreflang
Digunakan untuk
mengatur sumber bahasa penulisan
hreflang=”en-US”
Ø Media
Digunakan untuk
mendefenisikan media output yang miliki untuk digunakan bersama dokumen.
media=”screen”
beberapa value yang
dapat digunakan untuk atribut media adalah :
|
Value
|
Fungsi
|
|
Screen
|
Layar
komputer tanpa halaman (seperti komputer desktop dan laptop)
|
|
tty
|
Media
dengan karakter grid,seperti teletype,terminal atau peralatan portable dengan
kemampuan tampilan yang terbatas.
|
|
tv
|
Televisi
dengan resolusi rendah,layar warna dan kemampuan untuk menggulung dokumen
kebawah yan terbatas.
|
|
print
|
Dokument
cetak,yang kadang-kadangditujukan sebagai pages media (dan mode pre-view
dokumen didalam layar).
|
|
project
|
Proyektor
|
|
handheld
|
Peralatan
handheld,yang sering memiliki layar kecil,untuk grafik bitmap,dqan memiliki
bandwidth yang terbatas.
|
|
braille
|
Peralatan
umpan balik tulisan braille.
|
|
embossed
|
Pencetak
halaman braille.
|
|
aural
|
Synthesizer
suara.
|
|
all
|
Cocok
untuk semua peralatan.
|
2.
Dengan
menyisipkan kode CSS ke dokumen HTML.
3.
Dengan
mengisipkan secara inline pada tag HTML.
