CSS

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,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;
}

*) 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;
}

Untuk Selengkapnya Dowload Artikel CSS.pdf