Css adalah kepanjangan dari Cascade Style Sheet, yaitu suatu bahasa pemrograman yang biasa digunakan oleh para desainer web/blog untuk mengatur style elemen yang ada di web mereka. Tujuan penggunaan CSS adalah agar diperoleh suatu style yang konsisten pada elemen tertentu.
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
contoh :
.font{
Font-family : ComicSans;
}
· ID
Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer
dalam desain web karena didefiniskan denga ID berbeda. Contoh :
#font{
Font-family : ComicSans;
}
*) 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 : url(image/gambar1.jpg);
}
5. Background-position
Body {
Background-repeat : no-repeat;
Background-image : url(image/gambar1.jpg);
Background-position : bottom center
}
*) 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,underline,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,loweralpha,
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.
pada 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;
}
*) Link
#font a:link, #font a:visited{
font-family:Geneva, Arial, Helvetica, sans-serif;
size:12px;
color:#6699FF;
padding-left:9px;
padding-bottom:0px;
padding-right:3px;
font-weight:bold;
text-decoration:none;
}
#font a:hover{
font-family:Geneva, Arial, Helvetica, sans-serif;
size:12px;
color:#36ce76;
padding-left:3px;
padding-bottom:0px;
padding-right:3px;
font-weight:bold;
}
