CSS
(CASCADING STYLE SHEET)
CSS DASAR
Ø
Tentang
CSS
Ø
Kegunaan
CSS
Ø
Aturan
Penulisan
Ø
CSS
Background
Ø
CSS
Font
Ø
CSS
Teks
Ø
CSS
Border
Ø
Margin
Ø Contoh
Layout Web menggunakan CSS
Tentang CSS
CSS
(Cascading Style Sheet)
adalah
standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS
digunakan untuk
mempersingkat
penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas
sehingga tidak
terjadi
pengulangan tulisan.
Keuntungan menggunakan
CSS
• Memisahkan presentastion sebuah dokumen dari content document itu
sendiri.
• Mempermudah dan Mempersingkat pembuatan dan
pemeliharaan dokumen web
• Mempercepat proses rendering/pembacaan HTML.
Cara
penulisan CSS
Inline style sheet
Penulisan
didalam elemen HTML.
Contoh
script 1
![](file:///C:/Users/gunardi/AppData/Local/Temp/msohtmlclip1/01/clip_image002.gif)
![](file:///C:/Users/gunardi/AppData/Local/Temp/msohtmlclip1/01/clip_image004.gif)
Gambar
1
Embedded
Style Sheet
Penulisan
CSS didalam dokumen HTML dan menggunakan tag <style></style>
Contoh
script 1
![](file:///C:/Users/gunardi/AppData/Local/Temp/msohtmlclip1/01/clip_image006.gif)
![](file:///C:/Users/gunardi/AppData/Local/Temp/msohtmlclip1/01/clip_image008.gif)
Gambar
2
Linked
Style Sheet
Penulisan
skrip CSS dihalaman berbeda atau terpisah dari html.
Contoh
script 3
![](file:///C:/Users/gunardi/AppData/Local/Temp/msohtmlclip1/01/clip_image010.gif)
Contoh
script style1.css
![](file:///C:/Users/gunardi/AppData/Local/Temp/msohtmlclip1/01/clip_image012.gif)
![](file:///C:/Users/gunardi/AppData/Local/Temp/msohtmlclip1/01/clip_image014.gif)
Gambar
3
Aturan
penulisan CSS
Selector
Terdiri
dari tag,class,ID
Declaration
Mendeskripsikan
property dan value
Contoh
H1
{
Color : #0000FF }
Keterangan
:
Selector : H1
Properti : Color
Value :
#0000FF
Macam-macam Selector
Tag/Elemen
Setiap tag yang ada pada HTML bisa dijadikan
selector
Class
Diawal penulisan menggunakan tanda
titik,
pada HTML ditambahkan class
stlye1.css
![](file:///C:/Users/gunardi/AppData/Local/Temp/msohtmlclip1/01/clip_image016.gif)
Contoh
script 4
![](file:///C:/Users/gunardi/AppData/Local/Temp/msohtmlclip1/01/clip_image018.gif)
![](file:///C:/Users/gunardi/AppData/Local/Temp/msohtmlclip1/01/clip_image020.gif)
Gambar
4
ID
Diawali
dengan tanda #, dapat digunakan untuk
mendefinisikan header,content, dan footer dalam desain
web
krn didefiniskan denga ID berbeda.
Misl.
Style1.css
![](file:///C:/Users/gunardi/AppData/Local/Temp/msohtmlclip1/01/clip_image022.gif)
Contoh
script5
![](file:///C:/Users/gunardi/AppData/Local/Temp/msohtmlclip1/01/clip_image024.gif)
![](file:///C:/Users/gunardi/AppData/Local/Temp/msohtmlclip1/01/clip_image026.gif)
Gambar
5
CSS
Background
Property
background
1. Background-color
Contoh:
Body
{
Background-color : green;
}
2. Background-Image
Contoh:
Body
{
Background-image : url(gambar1.jpg);
}
3. Background-attachment
Body
{
Background-attachment : scroll;
}
4. Background-Repeat
Body
{
Background-repeat : repeat;
Background-image : ur l(image/gambar1.jpg);
}
5. Background-position
Body
{
Background-repeat : no-repeat;
Background-image : ur l(image/gambar1.jpg);
Background-position : bottom center
}
style1.css
![](file:///C:/Users/gunardi/AppData/Local/Temp/msohtmlclip1/01/clip_image028.gif)
Contoh
script6
![](file:///C:/Users/gunardi/AppData/Local/Temp/msohtmlclip1/01/clip_image030.gif)
![](file:///C:/Users/gunardi/AppData/Local/Temp/msohtmlclip1/01/clip_image032.gif)
Gambar
6
CSS
Font
Property
Font
1. Font-family
P
{
Font-family : Arial,Helvetica;
}
2. Font-size (satuan em,pt,px,mm,cm,%)
P
{
Font-size : 24em;
}
3. Font-style (nilai : oblique,italic,normal)
P
{
Font-style : oblique;
}
4. Font-variant (nilai : normal,small-caps)
P
{
Font-family : Arial,Helvetica;
}
5. Font-weight (nilai
:normal,bold,bolder,lighter,100-900)
P
{
Font-weight : bolder;
}
CSS
Teks
Property
teks
1. color
P
{
color :red;
}
2. teks-align (nilai left,right,center,justify)
P
{
Text-align :justify;
}
3. text-decoration (nilai : none,under
line,overline,line-through,blink)
P
{
Text-decoration :overline;
}
4. text-transform (nilai : none,capitalize,uppercase,lowercase)
P
{
Text-transform : capitalize;
}
5. Letter-spacing
P
{
letter-spacing : 20px;
}
6. Teks-indent
P
{
Text-indent : 50px;
}
CSS
List
Property
list
1. List-style-type (nilai :
disc,circle,square,lower-roman,upper-roman,none,lower-alpha,upper-alpha)
Ul {
List-style-type : disc ;
}
2. List-style-image (nilai : url,none)
Ul {
List-style-image : url(gambar1.jpg) ;
}
3. List-style-position (nilai : inside,outside)
Ul {
List-style-position : inside;
}
CSS
Border
Property
Border
1. border-style (nilai :
none,dotted,dashed,solid,double,groove,ridge,inset,outset)
. b1
{
Border-style-type : groove ;
}
2. border-bottom-style (nilai :
none,dotted,dashed,solid,double,groove,ridge,inset,outset)
. b1
{
Border-bottom-style
: groove ;
}
3. border-bottom-width ()
. b1
{
border-bottom-width
:10px;
}
4. border-bottom-color ()
. b1
{
border-bottom-color :red;
}
Margin
dan Padding
Margin
: pengaturan batas atas,bawah,kanan,kiri pada halaman web
Body
{
Margin-top : 4cm;
Margin-right
: 3cm;
Margin-bottom
:3cm;
Margin-left
: 4cm;
}
Margin
: pengaturan batas atas,bawah,kanan,kiri antara border dengan content.
Pd
css
. kotak {
Padding-top
: 25px;
Padding-right : 25px;
Padding-bottom : 25px;
Padding-left: 25px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
Pada
file HTML
<html>
<head>
<link
rel=”stylesheet” type=”text/css”
href=”cssku.css”>
</style>
</head>
<body>
<p
class=kotak > teks1 <p>
</body>
</html>
Latihan
Membuat
layout halaman web menggunakan CSS
File
cssku.css
#header
{
position:static;
height:90px;
width:800px;
background-color:#666666;
padding-top:4%;
padding-right:2%
padding-bottom:2%;
padding-left:4%;
line-height:0.5px;
left:50px;
right:50px;
}
.judul1
{
font-family:verdana,helvetica,sans-serif;
font-size:1em;
color:#ffffff;
letter-spacing:1em;
}
.judul2
{
font-family:verdana,helvetica,sans-serif;
font-size:1.5em;
color:#ffff00;
letter-spacing:1em;
text-decoration:line-underline;
}
.judul3
{
font-family:verdana,helvetica,sans-serif;
font-size:1.5em;
color:#ffff00;
letter-spacing:0.25em;
text-decoration:line-underline;
}
#nav_left{
background-color:#999999;
height:40px;
width:170px;
line-height:0.1;
padding:0.5em;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#ffffff;
}
#nav_left_link
{
font-size:10px;
background-color:#666666;
height:415px;
width:170px;
padding:0.5em;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#ffffff;
}
#nav_left_menu_caption
{
background-color:#666666;
height:20px;
width:170px;
line-height:0.1;
padding:0.5em;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-width:#ffffff;
}
.menu_caption
{
font-family:verdana,arial,helvetica,sans-serif;
font-size:1em;
color:#ffff00;
text-align:center;
vertical-align:middle;
}
#stylelink
a:link, #stylelink a:visited {
display:block;
border-top:1px solid #ffffff;
border-bottom:1px solid #cccccc;
background-color:#666666;
font-weight:bold;
color:#ffff00;
width:100px;
padding-top:3px;
padding-right:0px;
padding-bottom:3px;
padding-left:10px;
text-decoration:none;
}
#stylelink
a:hover {
border-top:1px solid #cccccc;
background-color:#0000hh;
background-image:none;
font-weight:bold;
text-decoration:none;
color:#ffffff;
}
#bawah{
background-color:#999999;
height:30px;
width:800px;
padding-right:2em;
padding-left:4em;
padding-top:1em;
padding-bottom:1em;}
.
copyright_bawah{
font-family:verdana,arial,helvetica,sans-serif;
font-size:10px;
color:#ffffff;
text-align:center;
width:800px;
}
#box_isi
{
position : absolute;
height:auto;
width:615px;
left:204px;
top:100px;
padding:1em;
border-left-width:1px;
border-left-style:dotted;
border-left-color:#666666;
border-right-width:1px;
border-right-style:dotted;
border-right-color:#666666;}
.isi
{
font-family:verdana,arial,helvetica,sans-serif;
font-size:1.2em;
color:#666666;
line-height:2em;
text-align:justify;
vertical-align:none;
}
body
{
font-family:verdana,arial,helvetica,sans-serif;
background-color:#cccccc;
margin:auto;
padding:0.2em;
}
p
{
font-family:verdana,arial,helvetica,sans-serif;
font-size:10px;
}
0 komentar:
Posting Komentar