PENGERTIAN CSS
¨ CSS
(Cascading Style Sheet) adalah suatu teknologi yang digunakan untuk mempermudah
pembuatan suatu tampilan sebuah website.
¨ Dengan
CSS kita dapat dengan cepat mengaplikasikan suatu style pada tag tertentu.
Bahkan kita dapat meletakkan CSS pada suatu file sehingga dapat digunakan oleh
banyak halaman sekaligus.
¨ CSS diapit oleh tag
<style></style> dan berada diantara tag
<head></head>
KEUNTUNGAN CSS
- Bisa
membuat ratusan bahka ribuan halaman website hanya dengan satu kali
penulisan bahasa CSS.
- CSS
sudah menjadi elemen penting dalam pembuatan web sesuai dengan teknologi
web modern yang sudah menjadi tren saat ini dan beberapa tahun yang akan
datang
- CSS
adalah solusi cepat dalam membuat suatu website
- HTML
sebagai kerangka dari web dan untuk design dari website dituntut
menggunakan CSS
ATRIBUT YANG DIGUNAKAN PADA CSS
ATURAN PENULISAN CSS
¨ Hampir
semua tag dapat dimanipulasi menggunakan CSS seperti <body>,
<span>, <div>, <table>, <p>, dan masih banyak lagi.
¨ Berikut
ini adalah contoh sederhana penggunaan CSS
(aturan CSS) pada tag body.
SELEKTOR & DECLARATOR
¨ Selector
merupakan tag dari penulisan HTML misal H1, H2, p, body, dll
¨ Declarator
adalah yang memerintahkan browser untuk membuat tampilan selector sesuai dengan
perintah yang ada pada deklarator
¨ Property
: jenis perintah
¨ Value
: hasil dari properti
¨ Rumus
CSS
JENIS - JENIS SELEKTOR
- Selektor
ID
Fungsi : untuk
memberi tanda supaya pada tag HTML yang sudah diberi ID bisa di beri format
lain.
Penulisan pada selektor ID menggunakan tanda ‘#”
Contoh:
p{font-family:verdana}
#contoh{font-family:arial}
- Selektor
Class
Fungsinya
sama dengan selektor ID. namun selektor class bisa diletakkan pada tag HTML
lebih dari satu, sedangkan pada selektor ID tidak bisa menggunakan nama ID yang
sama dengan kata lain selektor ID digunakan untuk yang spesifik.
Penulisan selektor class ditandai menggunaka tanda ‘.’
Contoh :
.media{font-family:calibri}
CARA MENGGABUNGAN HTML DENGAN CSS
Terdapat tiga cara dalam menggabungkan HTMl dengan CSS,
yakni sebagai berikut :
- Inline
Style
- Embedded
Style
- Link
Style
INLINE STYLE
Inline stye adalah cara penulisan style CSS secara langsung
ke dalam tag HTML, berikut contoh penulisan inline style :
EMBEDDED STYLE
Embedded stye adalah cara penulisan style CSS ke dalam file
HTML perhalaman (page) dan penulisan file CSS dibuat sebelum …</head>.
Contoh:
LINK STYLE / EKSTERNAL STYLE
Merupakan penulisan secara terpisah antara file HTML dengan file CSS dan kita tinggal
memasang link saja, dan pemasangan link bisa diletakka di antara
<head>….</head>
Untuk cara ini banya digunakan para web designer atau
programmer karena link style adalah cukup satu kali penulisan file CSS yang
nantinya dipakai oleh seluruh halaman website
Biasanya penamaannya berekstensi .css (ex: style.css)
KOMPONEN-KOMPONEN
PROPERTI PADA CSS
1.
PROPERTY TEXT STYLE
2.
PROPERTY TEXT LAYOUT
3.
PROPERTY BORDER
4.
PROPERTY MARGIN
5.
PROPERTY PADDING
6.
PROPERTY PAGE LAYOUT
7.
PROPERTY BACKGROUND
8.
PROPERTY TIPE ELEMEN
9.
PROPERTY INTERFACE
1. PROPERTY TEXT STYLE
Property Text Style bisa anda gunakan untuk
membuat gaya tulisan anda pada web. Adapun komponen Text Style atau yang
berhubungan dengan model atau gaya tulisan/font dari CSS adalah sebagai berikut
ini
|
NO.
|
PROPERTY
/
ATRIBUT
|
PENULISAN
|
KETERANGAN
|
VALUE
LAIN
|
|
|
color
|
Selektor
{color:#000000}
|
Mengontrol
warna dari text penulisannya
|
bisa warna Hexadesimal bisa hanya tulisan
misalnya untuk kuning =
Yellow.
|
|
|
font-weight
|
Selektor
{ font-weight:100}
|
Mengontrol
tebal dari text penulisannya
|
Seratus, kelipatannya, ‘Bold’ atau yang
lain.
|
|
|
font-family
|
Selektor{font-family:Arial,
Helvetica, sans-serif}
|
Mengatur
font yang anda pakai
|
|
|
|
font-size
|
Selektor{
font-size:12px}
|
Mengatur
ukuran font yang akan dipakai
|
bisa
menggunakan ukuran… px,…em atau small,medium,large dll.
|
|
|
font-variant
|
Selektor{
font-variant:small-caps}
|
Mengatur
font yang akan muncul apakah menggunakan huruf kecil atau small caps
|
normal
|
|
|
font-style
|
Selektor{
font-style:italic}
|
Mengatur
style font yang akan digunakan pada text
|
|
|
|
text-decoration
|
Selektor{text-decoration:underline}
|
Mengatur
style font lanjutan dari font style.
|
line
through, none, blink, overline
|
|
|
text-transform
|
Selektor{
text-transform:lowercase}
|
Mengatur
capital font
|
uppercase,
capitalize
|
2. PROPERTY TEXT LAYOUT
Property Text Layout ini berfungsi untuk mengatur
bagaimana efek dari suatu layout suatu tulisan pada halaman website. Property
ini lebih berfokus pada penempatan dan tampilan yang ditempatkan pada halaman
web anda. Anda bisa mengombinasikan antara tampilan page layout dan text layout
supaya tampilan website anda lebih elegant dan sesuai dengan keinginan anda
tentunya dan itu yang jelas tidak bisa anda dapatkan pada HTML.
|
NO.
|
PROPERTY
/
ATRIBUT
|
PENULISAN
|
KETERANGAN
|
VALUE
LAIN
|
|
|
letter-spacing
|
Selektor{letter-spacing:normal}
|
Mengontrol
jarak space antar karakter
|
normal
diatur sebagai justify text oleh browser.
|
|
|
word-spacing
|
Selektor{
word-spacing:normal}
|
Mengontrol
jarak space antar text atau kata
|
-
|
|
|
line-height
|
Selektor{
line-height:normal}
|
Mengatur
jarak line atau garis
|
…em,
…px atau persentase …%
|
|
|
text-indent
|
Selektor{
text-indent:50px}
|
Mengatur
dari baris pertama yang masuk biasanya untuk awal paragraph.
|
|
|
|
text-align
|
Selektor{
text-align:justify}
|
Mengatur
posisi dari text
|
left,
right, center
|
|
|
vertical-align
|
Selektor{
vertical-align:top}
|
Mengontrol
jarak space antar text atau kata
|
text-top,text-bottom,
bottom, middle, baseline, sub, super.
|
|
|
direction
|
Selektor{
direction:ltr}
|
Mengatur
dan menentukan arah dari suatu tulisan pada website
|
rtl
Keterangan
: ltr =Tulisan yang terbaca dari kiri ke kanan rtl =Tulisan yang terbaca dari
kanan ke kiri
|
|
|
unicode-bidi
|
elektor{
unicode-bidi:bidi-override}
|
Mengontrol
dan mengarahkan pada tulisan unicode
|
normal,
embed
|
3. PROPERTY BORDER
Property ini adalah untuk mengatur elemen yang
mempunyai garis dengan berbagai variasi lebar,warna serta gaya suatu tampilan.
Anda bisa membuat suatu garis antara kiri-kanan-atas-bawah dengan berbeda
style. Berikut ini propertynya :
|
NO.
|
PROPERTY
/
ATRIBUT
|
PENULISAN
|
KETERANGAN
|
VALUE
LAIN
|
|
|
border
|
Selektor{border:normal}
|
Mengatur
border secara keseluruhan
|
thin,
thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge,
solid
|
|
|
border-width
|
Selektor{
border-width:thin}
|
Mengatur
lebar border secara keseluruhan
|
thick,
medium
|
|
|
border-top-width
|
Selektor{
border-top-width:thin}
|
Mengatur
lebar border top
|
thick,
medium
|
|
|
border-right-width
|
Selektor{
border-right-width:thin}
|
Mengatur
lebar border right
|
thick,
medium
|
|
|
border-bottom-width
|
Selektor{
border-bottom-width:thin}
|
Mengatur
lebar border bottom
|
thick,
medium
|
|
|
border-left-width
|
Selektor{
border-left-width:normal}
|
Mengatur
lebar border left
|
thick,
medium
|
|
|
border-color
|
Selektor{
border-color:#333333}
|
Mengatur
warna dari border
|
bisa
gunakan warna hexadecimal yang awalnya dimulai dengan tanda #
|
|
|
border-style
|
Selektor{
border-style:normal}
|
Mengatur
style dari border
|
thin,
thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge,
solid
|
|
|
border-top
|
Selektor{
border-top:normal}
|
Mengatur
border top
|
thin,
thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge,
solid
|
|
|
border-right
|
Selektor{
border-right:normal}
|
Mengatur
border right
|
thin,
thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge,
solid
|
|
|
border-bottom
|
Selektor{
border-bottom:normal}
|
Mengatur
border bottom
|
thin,
thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge,
solid
|
|
|
border-left
|
Selektor{
border-left:normal}
|
Mengatur
border left
|
thin,
thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge,
solid
|
4. PROPERTY MARGIN
Property Margin ini untuk mengatur ruang atau
jarak batasan antar elemen, misalnya antara elemen atas dan bawah, atau antara
kiri dan bawah dll. Berikut ini propertynya :
|
NO.
|
PROPERTY
/
ATRIBUT
|
PENULISAN
|
KETERANGAN
|
VALUE
LAIN
|
|
|
margin
|
Selektor{
margin:auto}
|
Mengatur
jarak meliputi secara keseluruhan antar elemen
|
bisa
ukuran …px,…em atau persentase misalnya 25%
|
|
|
margin-top
|
Selektor{
margin-top:auto}
|
Mengatur
jarak top dengan elemen
|
bisa
ukuran …px,…em atau persentase misalnya 25%
|
|
|
margin-left
|
Selektor{
margin-left:auto}
|
Mengatur
jarak left dengan elemen Selektor{ margin-left:auto} Value lain bisa
ukuran …px,…em
|
bisa
ukuran …px,…em atau persentase misalnya 25%
|
|
|
margin-right
|
Selektor{
margin-right:auto}
|
Mengatur
jarak right dengan elemen
|
bisa
ukuran …px,…em atau persentase misalnya 25%
|
|
|
margin-bottom
|
Selektor{
margin-bottom:auto}
|
Mengatur
jarak bottom dengan elemen
|
bisa
ukuran …px,…em atau persentase misalnya 25%
|
5. PROPERTY PADDING
Property padding adalah
untuk mengatur ruang antara elemen dan konten. Berikut ini propertynya :
|
NO.
|
PROPERTY
/
ATRIBUT
|
PENULISAN
|
KETERANGAN
|
VALUE
LAIN
|
|
|
padding
|
Selektor{
padding:7px}
|
Mengatur
ruang elemen dengan konten secara global
|
bisa
ukuran …px,…em atau persentase misalnya 25%
|
|
|
padding-top
|
Selektor{
padding-top:7px}
|
Mengatur
ruang elemen top dengan konten
|
bisa
ukuran …px,…em atau persentase misalnya 25%
|
|
|
padding-left
|
Selektor{
padding-left:7px}
|
Mengatur
ruang elemen left dengan konten
|
bisa
ukuran …px,…em atau persentase misalnya 25%
|
|
|
padding-right
|
Selektor{
padding-right:7px}
|
Mengatur
ruang elemen right dengan konten
|
bisa
ukuran …px,…em atau persentase misalnya 25%
|
|
|
padding-bottom
|
Selektor{
padding-bottom:7px}
|
Mengatur
ruang elemen bottom dengan konten
|
bisa
ukuran …px,…em atau persentase misalnya 25%
|
6. PROPERTY PAGE LAYOUT
Property Page Layout adalah untuk mendesign suatu
layout pada halaman web, ini property penting yang harus anda kuasai karena
dengan menguasai property ini maka anda bisa membuat suatu halaman web yang
bagus dan tentunya harus didukung akan kreatifitas seseorang. Pada HTML tidak
mendukung akan tampilan layout sebaik CSS, dengan menguasai Property ini anda
juga bisa merubah pada themes atau template pada script CMS yang da sekarang
ini. Berikut
ini propertynya :
|
NO.
|
PROPERTY
/
ATRIBUT
|
PENULISAN
|
KETERANGAN
|
VALUE
LAIN
|
|
|
position
|
Selektor{
position:absolute}
|
Menentukan
dimana elemen akan ditempatkan juga untuk menempatkan elemen induk.
|
fixed,relative,
static, top, bottom, left, right
|
|
|
top
|
Selektor{
top:absolute}
|
Menentukan
bagian atas dari suatu elemen ditempatkan.
|
fixed,relative,
static,auto
|
|
|
left
|
Selektor{
left:absolute}
|
Menentukan
bagian kiri dari suatu elemen ditempatkan.
|
fixed,relative,
static,auto
|
|
|
bottom
|
Selektor{
bottom:absolute}
|
Menentukan
bagian bawah dari suatu elemen ditempatkan.
|
fixed,relative,
static,auto
|
|
|
right
|
Selektor{
right:absolute}
|
Menentukan
bagian kanan dari suatu elemen ditempatkan.
|
fixed,relative,
static,auto
|
|
|
width
|
Selektor{width:50%}
|
Menentukan
lebar dari suatu elemen
|
…px,…em,auto
|
|
|
min-width
|
Selektor{
min-width:50%}
|
Menentukan
lebar minimal dari suatu elemen
|
…px,…em,auto
|
|
|
max-width
|
Selektor{
max-width:50%}
|
Menentukan
lebar maximal dari suatu elemen
|
…px,…em,auto,none
|
|
|
height
|
Selektor{
height:50%}
|
Menentukan
tinggi dari suatu elemen
|
…px,…em,auto,none
|
|
|
min-height
|
Selektor{
min-height:50%}
|
Menentukan
tinggi minimal dari suatu elemen
|
…px,…em,auto,none
|
|
|
max-height
|
Selektor{
max-height:50%}
|
Menentukan
tinggi maximal dari suatu elemen
|
…px,…em,auto,none
|
|
|
z-index
|
Selektor{z-index:auto}
|
Mengatur
beberpa elemen yang terjadi overlap
|
mengunakan
bilangan bulat ( integer)
|
|
|
visibility
|
Selektor{
visibility:hidden}
|
Mengatur
elemen apakah ditampilkan pada browser atau tidak.
|
visible,
collapse
|
|
|
overflow
|
Selektor{
overflow:auto}
|
Mengatur
menampilkan konten yang tidak bisa ditampung oleh elemen
|
hidden,
scroll, visible
|
|
|
float
|
Selektor(float:left}
|
Membuat
efek elemen yang keluar dari flow dan ditempatkan disisi kiri atau kanan
suatu elemen
|
None,
right
|
|
|
clear
|
Selektor{
clear:both}
|
Digunakan
bersama dengan float dan disini ditentukan apakah elemen bisa menerima suatu
float atau tidak.
|
left,
right, none
|
|
|
clip
|
Selektor{
clip:rect('top', 'right', 'bottom', 'left')}
|
Mengatur
cupilkan kecil suatu elemen untuk ditampilkan.
|
both
|
7. PROPERTY BACKGROUND
Property ini berguna untuk mengatur tampilan
background atau halaman belakang suatu web serta pengaturan suatu background
yang lainnya misalnya background dari font. Berikut ini propertynya :
|
NO.
|
PROPERTY
/
ATRIBUT
|
PENULISAN
|
KETERANGAN
|
VALUE
LAIN
|
|
1.
|
background
|
Selektor{
background:bottom}
Selektor(background:url(http://rudydevianto.com/background.png)
fixed no-reapet top left}
|
Mengatur
background secara luas
|
mengatur
posisi dari gambar background pada halaman.
|
|
|
background-color
|
Selektor
{background-color:#000033}
|
Mengatur
warna dari background
|
bisa
gunakan pewarnaan hexadecimal.
|
|
|
background-image
|
Selektor(background:url(http://rudydevianto.com/logo.png)}
|
Mengatur
background gambar dari suatu table , halaman atau elemen yang lain
|
none
untuk tidak menampilkan gambar.
|
|
|
background-attachment
|
Selektor{
background-attachment:scroll}
|
Mengatur
suatu gambar apakah jika mouse di scroll gambar ikut scroll atau tetap
|
fixed
|
|
|
background-repeat
|
Selektor{
background-repeat:repeat}
|
Membuat
perintah pada image yang ada pada background untuk perulangan karena
disebabkan gambar yang ukuran kecil
|
repeat,
reapet-x, reapeat-y
|
|
|
background-position
|
Selektor{
background-position:top}
|
Mengatur
posisi dari gambar background pada halaman.
|
left,
right, bottom, center
|
8. PROPERTY TIPE ELEMEN
Property ini untuk mengatur suatu elemen dalam
web. Berikut ini propertynya :
|
NO.
|
PROPERTY
/
ATRIBUT
|
PENULISAN
|
KETERANGAN
|
VALUE
LAIN
|
|
1.
|
display
|
Selektor{
display:block}
|
Mengatur
sebagaimana elemen akan terpasang pada halaman website
|
compact,
inline, inline-table, list-item, marker, none, run-in, table, table-caption,
table-cell, table-column, table-column-group, table-footer-group,
table-header-group,table-row, table-row-group
|
|
|
white-space
|
Selektor{
white-space:normal}
|
Menggunakan
elemen block dan untuk menentukan apa yang akan browser lakukan kepada
white-space ( spasi )
|
normal,
nowrap, pre
|
|
|
list-style-type
|
Selektor{
list-style-type:armenian}
|
Menentukan
suatu Style List Item ( Bullet )
|
cirle,
cjk-ideographic, decimal, decimal-leading-zero, disc, georgian, hebrew,
hiragana, hiragana-iroha, lower-alpha, lower-greek, lower-latin, lower-roman,
none, square, upper-alpha, upper-latin, upper-roman
|
|
|
list-style-image
|
Selektor{
list-style-image:url(http://rudydevianto.com/bullet.gif)}
|
Membuat
bullet dari gambar
|
-
|
|
|
list-style-position
|
Selektor{
list-style-position:inside}
|
Mengatur
posisi bullet
|
outside
|
|
|
list-style
|
Selektor{
list-style-type:armenian}
|
Mengatur
style dari list ( bullet ) secara global
|
url,
inside, outside, cirle, cjk-ideographic, decimal, decimal-leading-zero, disc,
georgian, hebrew, hiragana, hiragana-iroha, lower-alpha, lower-greek,
lower-latin, lower-roman, none, square, upper-alpha, upper-latin, upper-roman
|
|
|
border-collapse
|
Selektor{border-collapse:collapse}
|
Mengatur
border table
|
separate
|
|
|
border-spacing
|
Selektor{border-spacing:0}
|
Mengatur
space pada border
|
-
|
|
|
caption-side
|
Selektor{caption-side:bottom}
|
Mengatur
posisi dari caption
|
top,
left, center, right
|
|
|
empty-cells
|
Selektor{empty-cells:hide}
|
Menampilkan
atau menyembunyikan cell pada table
|
show
|
|
|
table-layout
|
Selektor{table-layout:auto}
|
Mengatur
layout suatu table apakah menyesuaikan atau tetap .
|
fixed
|
9. PROPERTY INTERFACE
Property ini untuk mengatur tampilan pada web
untuk membuat tampilan yang ditujukan untuk pengguna .
|
NO.
|
PROPERTY
/
ATRIBUT
|
PENULISAN
|
KETERANGAN
|
VALUE
LAIN
|
|
1.
|
cursor
|
Selektor{cursor:auto}
|
Mengatur tampilan cursor yang akan dipakai user pada browser
|
url , crosshair, default, e-resize, help, move, ne-resize, n-resize,
nw-resize, pointer, se-resize, sw-resize, text, wait, w-resize
|
|
|
Outline
|
Selektor{outline:#333333}
|
Mengatur garis tepi dari elemen secara global
|
dashed,
dotted, double, groove, hidden, inset, none, outside, ridge, solid, medium,
thin, thick
|
|
|
outline-color
|
Selektor{outline-color:#333333}
|
Mengatur
warna dari garis tepi suatu elemen
|
warna
bisa menggunakan warna hexadecimal lain
|
|
|
outline-style
|
Selektor{outline-style:dashed}
|
Mengatur
style dari garis tepi suatu elemen
|
dotted,
double, groove, hidden, inset, none, outside, ridge, solid, medium, thin,
thick
|
|
|
outline-width
|
Selektor{outline-width:medium}
|
Mengatur
sebeapa lebar garis tepi suatu elemen
|
thick,
thin
|
