CASCADING STYLE SHEETS (CSS)
Tujuan :
1. Memahami tentang konsep CSS
1. Memahami aturan penulisan pada CSS
2. Memahami selector sebagai pengontrol design
3. Memahami pembuatan background
4. Memformat text pada web
5. Memahami pengaturan bentuk font
6. Membuat pengaturan tabel dan pewarnaannya
7. Membuat hyperlink dan tombol yang menarik
I. KONSEP CSS
CSS (Cascading Style Sheet) adalah sebuah mekanisme sederhana untuk menambahkan style ke
dalam dokumen web. Digunakan untuk mendefenisikan style untuk suatu teks dengan jenis
huruf, ukuran , warna tertentu ke dalam tiap elemen / halaman HTML
Beberapa keuntungan menggunakan CSS dalam desain web, diantaranya :
Cara yang Flexible dan Powerful untuk menentukan format elemen HTML
o Dapat mendefinisikan Font, size, background, color, image, margin dll
Dapat berbagi style dalam banyak dokumen atau bahkan keseluruhan website
Dapat membuat sebuah class style yang mendefinisikan tampilan secara efektif
Rule CSS nya di aplikasikan secara hierarchy
Struktur penulisan CSS
Contoh :
CSS dapat digunakan dengan beberapa metode diantaranya ;
Inline Style Sheet
Embeded Style Sheet
Linked Style Sheet / External Style Sheet
1. Inline Style Sheet
Di deskripsikan dalam attribute style yang ada pada masing – masing elemen (tag HTML).
Metode ini digunakan untuk mengganti style pada masing – masing elemen secara terpisah.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title> Inline CSS </title>
</head>
<body>
<P align=center style=“color : blue; font-family : verdana;”>
</p>
</body>
</html>
2. Embeded Style Sheet
Pada metode ini deklarasi dilakukan pada tag <style> yang terletak pada blok tag <head>.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title> Embeded CSS </title>
<style>
body {
background-color : yellow;
}
</style>
</head>
<body>
<P>
</p>
</body>
</html>
3. Linked Style Sheet / external Style Sheet
Selector – selector CSS di deklarasikan pada file yang terpisah dengan halaman webnya.
Disimpan dengan extension *.css.
Contoh
File style.css
Body {
Background-color : black;
}
File index.html
<!DOCTYPE html>
<html>
<head>
<title> Embeded CSS </title>
<link rel=“stylesheet” type=“text/css” href=“./css/style.css”>
</head>
<body>
<P>
</p>
</body>
</html>
II. Selector
Pendeklarasian Selector menjadi hal yang sangat penting dalam penggunaan CSS. Beberapa
Jenis selector yang bisa digunakan adalah :
1. Elemen Selector
Adalah selector yang menunjuk sebuah elemen HTML (tag) secara spesifik dan desain akan
berlaku untuk semua Elemen HTML (tag) sesuai dengan elemen selector yang di
deklarasikan.
Contoh :
H1 { color : blue; }
Note : maka semua text yang ada dalam tag <H1> akan berwarna biru.
2. Class Selector
Adalah selector yang menunjuk ke sebuah elemen - elemen HTML (tag) yang memiliki class
tertentu sesuai dengan class yang di deklarasikan dalam CSS. Class selector dapat di panggil
berulang – ulang oleh elemen – elemen HTML yang berbeda.
Contoh :
<style>
.warning { color : red; }
</style>
class di atas hanya bisa digunakan ketika class tersebut di panggil oleh salah satu elemen
HTML yang berada di blok tag <body>
Contoh :
<!DOCTYPE html>
<html>
<head>
<title> Class Selector </title>
<style>
.warning { color : red; }
</style>
</head>
<body>
<p align=center class=warning>
Ini adalah blok peringatan
</p>
</body>
</html>
3. Id Selector
Adalah selector CSS yang menunjuk pada elemen HTML (tag) yang unik, spesifik pada satu
elemen HTML (tag) yang memiliki ID sesuai dengan selector yang telah di deklarasikan.
Berbeda dengan class selector yang dapat di panggil berulang – ulang oleh banyak elemen
HTML, id selector hanya bisa di panggil sekali, berkaitan dengan penamaan ID yang harus
unik.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title> Class Selector </title>
<style>
#tanda {
Text-decoration : underline;
Color : red;
}
</style>
</head>
<body>
<p align=center id=tanda>
Paragraph ini masuk ke ID Tanda
</p>
</body>
</html>
4. Pseudoclass / Pseudoelement
Pseudo class dapat digunakan sebagai selector meskipun class-nya tidak terdapat di kode
HTML. Untuk menyatakan style yang digunakan jika suatu kondisi eksternal dikenakan pada
elemen HTML (misalnya di-klik mouse)
Sintaks pseudo class :
selector:pseudo-class {
property: value
}
Anchor (<A>) pseudo class :
o :link (text yang mengandung link)
o :visited (link yang telah di kunjungi)
o :hover (link yang di over oleh mouse)
o :active (link ketika di klik)
o :focus (link ketika terseleksi oleh keyboard-tab)
Contoh :
<!DOCTYPE html>
<html>
<head>
<title> Class Selector </title>
<style>
Img:hover {
Border : solid 3px black;
}
</style>
</head>
<body>
<img src=./image/1.gif />
</body>
</html>
Note : pseudoclass di atas digunakan untuk memberi frame / border pada setiap gambar
yang di lewati / di sorot oleh mouse.
Pseudo-element digunakan untuk menyeleksi bagian – bagian tertentu(khusus) dari sebuah
element HTML.
Pseudo-element :
- :first-letter
- :first-line
- :first-child
- :last-child
Contoh :
<!DOCTYPE html>
<html>
<head>
<title> Class Selector </title>
<style>
p {
width : 100px;
border : solid 1px black;
padding : 5px;
}
p:first-letter { font-size: 200%; float: left}
p:first-line
{ color: green }
</style>
</head>
<body>
<p><span>The first</span> few words
of an article in The
Economist.<br/>
The Second Word was the idea</p>
</body>
</html>
III. TEXT FORMATTING
- Direction
Values : [rtl | ltr | inherit]
-
Letter-Spacing
Values : [normal | <length> | inherit]
-
Color
Values : [kodewarna | namawarna | rgb()]
-
Text-align
Values : [left | right | center | justify]
-
Text-shadow
Values : [shadow,… | none | inherit ]
Contoh : .text { text-shadow: 2px 2px 2px #000; }
-
White-space
Values : [normal | nowrap | pre | pre-line | pre-wrap | inherit]
-
Text-transform
Values : [capitalize | lowercase | none | uppercase | inherit]
-
Text-indent
Values : [ length | percentage | inherit ]
-
Text-decoration
Values : [line-through | overline | underline | none | inherit ]
-
Font-style
Values : [ italic | normal | oblique | inherit ]
-
Font-weight
Values : [ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | bold | bolder | lighter |
normal | inherit ]
-
Font-size
Values : [absolute-size | relative-size | length | percentage | inherit ]
Absolute size :
xx-small
x-small
small
medium
large
x-large
xx-large
Relative size = [smaller | larger]
-
Font-family
Values : [ family name,… | inherit ]
-
List-Style-Type
Values : [circle | disc | square | armenian | decimal | decimal-leading-zero | georgian |
lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin |
upper-roman | none | inherit ]
-
List-style-position
Values : [inside | outside | inherit ]
-
List-style-image
Values : [url | none | inherit ]
Contoh : ul { list-style-image : url(./image/gb1.jpg); }
IV. BACKGROUND
- Background-Color
Values : [kode-warna | nama-warna | rgb() | rgba() ]
Contoh :
p { Background-color: red}
p { Background-color: #448F2C}
p { Background-color: rgb(255,0,0)}
p { Background-color: rgb(100%,50%,25%)}
p { Background-color: #f25}
Efek transparan
background-color : rgba(255,255,255,0.2);
atau
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
-
Background-image
Values : [<url> | none]
Contoh :
body {background-image: url(./image/bg.png);}
-
Background-Repeat
Values : [repeat | repeat-x | repeat-y | no-repeat]
-
Background-Attachment
Values : [background-attachment: fixed; ]
-
Background-Position
Values : [left top|left center|left bottom|right top|right center|right bottom|center
top|center center|center bottom]
V. BOX DAN TABLE
- Border
Contoh :
.bingkai { border-top: 1px solid gray;
border-right: 2px dotted black;
border-bottom: 1px dashed blue;
border-left: 1px solid black;
}
-
Box-shadow
Contoh :
#content {
-webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.5);
-moz-box-shadow : 2px 2px 9px rgba(0,0,0,0.5);
box-shadow : 2px 2px 9px rgba(0,0,0,0.5);
}
-
Border-radius
#content {
border-radius : 5px;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
-o-border-radius : 5px;
}
-
Width
Values : […% | …px]
-
Height
Values : […% | …px]
-
Align
text-align : [left | center | right]
vertical-align : [top | middle | bottom]
-
Padding
Values : [..px | …%]
Konsep Box pada html
Margin – area di sekitar(di luar) border. Margin tidak memiliki warna background.
Border – Border adalah pembatas yang berada di sekitar padding dan konten di dalamnya.
Warna border di pengaruhi oleh warna background dari box tersebut. Kita bisa memberi
warna lain.
Padding – area yang membatasi border dengan konten di dalamnya.
Content – area konten adalah area dimana teks dan gambar berada
VI. LINK DAN MENU
Tampilan link secara default adalah sebagai berikut :
dan
Tapi dengan menggunakan pseudoclass berikut, tampilan untuk link bisa di optimalkan :
1. a:link
Digunakan untuk mengatur tampilan objek yang mengandung link
Contoh :
a:link {
text-decoration : none;
color : maroon;
font-weight : bold;
}
2. a:active
Digunakan untuk mengatur tampilan objek ketika di klik mouse
3. a:visited
Digunakan untuk mengatur tampilan ketika objek mengandung link telah di klik.
4. a:hover
Digunakan untuk mengatur tampilan ketika objek di over / di sorot mouse
5. a:focus
digunakan untuk mengatur tampilan ketika objek mengandung link terseleksi lewat
keyboard tab.
VII.
LATIHAN
1. Menu vertical
File Style.css
#list_menu ul li {
padding:0px;
margin:0px;
border-bottom: #999 solid 1px;
color : black;
}
#list_menu ul {
list-style-item : none;
list-style-type:none;
margin : 0px;
padding:0px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color : white;
}
#list_menu ul li a {
color : black;
text-decoration:none;
display:block;
padding:7px 8px;
}
#list_menu ul li a:hover {
background-color: #C9E2F8;
display: block;
border-right:#1561A6 solid 3px;
}
#menu_kiri {
-webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.5); //untuk memberi shadow pada platform
menu
-moz-box-shadow : 2px 2px 9px rgba(0,0,0,0.5);
box-shadow : 2px 2px 9px rgba(0,0,0,0.5);
float: left;
background: white;
margin-right:20px;
margin-top: : 0px;
width:200px;
height:680px;
/* FIXME */
padding: 0px;
font-size: 12.5px;
font-weight: bold;
}
body{
margin:0px;
font-family:verdana;
font-size : 12px;
}
#menu_kategori {
text-align:center;
vertical-align:middle;
width : auto;
height: 25px;
padding : 3px 4px;
margin:0px;
border-bottom: #999 solid 1px;
background: url(./images/fav.png);
border-bottom: #999 solid 1px;
font-family:Verdana, Geneva, sans-serif;
font-size:12pt;
font-weight : bold;
color : white;
}
File menu.html
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<div id=menu_kiri >
<div id=list_menu>
<ul>
<li align=center id=menu_kategori> MENU </li>
<li><a href=# > Menu satu </a></li>
<li> <a href=# >Menu Dua </a></li>
<li><a href=#>Menu Tiga</a></li>
<li><a href=#>Menu Empat></li>
<li><a href=# >Menu Lima</a></li>
</ul>
</div>
</div>
</body>
</html>
2. Menu Horizontal
File Style.css
body{
font-family:verdana;
font-size : 12px;
}
#menu_atas {
width : 100%;
height :100%;
height : 25px;
}
#menu_atas ul {
vertical-align:middle;
margin : 0;
text-align : center;
list-item :none;
padding: 0;
list-style-type : none;
font-family : verdana;
font-size : 10pt;
width : auto;
height : 25px;
}
#menu_atas ul li {
width : auto;
padding : 0;
margin : 0;
border-right : solid #ccc 1px;
border-bottom : solid 1px #EEEEEE;
float : left;
}
#menu_atas ul li a {
color : black;
text-decoration: none;
display : block;
padding : 6px 7px;
}
#menu_atas ul li a:hover {
display : block;
border-bottom : solid 4px black;
}
#menu_atas ul li:last-child {
background-color : red;
color : white;
}
File menu.html
<!DOCTYPE html>
<html >
<head>
<title>Untitled Document</title>
<link rel=stylesheet type=text/css href=style.css>
</head>
<body>
<div align=center id=menu_atas >
<ul align=center>
<li><a href=#>Menu Satu </a></li>
<li><a href=#>Menu Dua </a></li>
<li><a href=#>Menu Tiga </a></li>
<li><a href=#>Menu Empat </a></li>
<li><a href=#>Menu Lima </a></li>
<li><a href=#> Keluar </a></li>
</ul>
</div>
</body>
</html>
3. Layout
Index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background:url(./images/bg01.png);
background-repeat:repeat;
margin : 0;
padding-top : 25px;
padding-bottom : 25px;
/*background: #414A53; */
}
#container {
width : 800px;
margin : 0 auto;
//border : solid 1px white;
height : 100%;
}
#baner {
width : 100%;
height : 150px;
}
#menu {
width : 100%;
height : 35px;
//background-color : #FF6B6B;
background-color : #710000;
}
#isi {
height : 600px;
width : 100%;
background-color : white;
}
#footer {
color : gray;
text-shadow: 2px 2px 2px #000;
padding : 7px 9px;
font-family : georgia;
font-size : 12px;
}
</style>
</head>
<body>
<div align=center id=container>
<div id=baner><img src="./images/head2.jpg" width=100% height=150 />
</div>
<div id=menu>&nbsp;
</div>
<div id=isi>&nbsp;
</div>
<div id=footer>
Copyright&copy;rez 2014
</div>
</div>
</body>
</html>
VIII. Tugas
Kerjakan Latihan di atas, kembangkan design pada latihan ke-tiga sesuai dengan Kreatifitas
masing – masing dengan menggunakan CSS.
