1. Font Family
penulisan:
font-family: <family-name>, <family-name>, <generic-family>;
font-family: <family-name>, <family-name>, <generic-family>;
Contoh penulisan font-family
p{
font-family: "Arial Black", Gadget, sans-serif;
}
dan
p{
font-family: serif;
}
2. Font Style
menambahkan style pada font dihalaman html.yang dapat diisi sebagai berikut : normal,italic,obliquepenulisan:
font-style: value;
Contoh :
p{
font-style:italic;
}
3. Font Variant
Variant font dapat diisi dua value yaitu normal atau small-caps.penulisan::font-variant:value;
contoh :
h3{
font-variant:small-caps;
}
4. font weight
penulisan:
font-weight:value;
contoh :
h4{
font-weight: bolder;
}
contoh :
h4{
font-weight: bolder;
}
5. Font
penulisan:
Value : <font-style> spasi <font-variant> spasi <font-weight> spasi <font-size>/<line-height> spasi <font-family>penulisan :
font :value;
contoh :
P {
font: oblique bold 10pt/12pt Times, serif ;
}
6. Padding TOP
penulisan:
<div style="background-color:lime;width:100px;clear:both;padding-top:10px;">
<div style="background-color:red;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>
7. Padding left
penulisan:
<div style="background-color:lime;width:100px;clear:both;padding-left:10px;">
<div style="background-color:red;clear:both;">
a n g g a p
d i s i n i
a d a l a h
k o n t e n t / i s i
</div>
<div style="clear:both;"></div>
</div>
8. Background Image
penulisan:
body {background-image:url('bgdesert.jpg');}
9. background-attachment Property
penulisan:
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
10.background-origin Property
penulisan:
div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
11. CSS3 animation Property
penulisan:
div
{
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
{
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
12.CSS border Property
penulisan:
p
{
border:5px solid red;
}
{
border:5px solid red;
}
13.CSS border-width Property
penulisan:
p
{
border-style:solid;
border-width:15px;
}
{
border-style:solid;
border-width:15px;
}
14.CSS3 border-image Property
penulisan:
div
{
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
{
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
15.CSS border-collapse Property
penulisan:
table
{
border-collapse:collapse;
}
{
border-collapse:collapse;
}
16. CSS empty-cells Property
penulisan:
table
{
border-collapse:separate;
empty-cells:hide;
}
{
border-collapse:separate;
empty-cells:hide;
}
17.CSS3 box-align Property
penulisan:
div
{
width:350px;
height:100px;
border:1px solid black;
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;
{
width:350px;
height:100px;
border:1px solid black;
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;
18.CSS3 box-sizing Property
penulisan:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
19.CSS color Property
penulisan:
body
{
color:red;
}
h1
{
color:#00ff00;
}
p
{
color:rgb(0,0,255);
}
{
color:red;
}
h1
{
color:#00ff00;
}
p
{
color:rgb(0,0,255);
}
20. CSS background-position Property
penulisan:
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}