Rabu, 16 Maret 2011

Peraturan Penulisan CSS

Pengertian CSS
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. Perlu diketahui, bahwa CSS berbeda dengan HTML.



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 krn 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;
}
by; Salsa

Tidak ada komentar:

Posting Komentar