Best Author
sangdedi

743,781
octa

486,781
fitrotinnikm

456,617
idjah

445,263
dwi

313,751
adit

310,222
resta-andara

275,695
benedict

261,599
rahadian

241,030
bara

228,950
nabilalalala

216,928
kurnitap_

154,132
kuswanto

140,607
suranto

100,765
admin

99,036
iwan

80,055
kupukupu

78,106

Aturan 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.

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 :o verline;

}

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;

}

Penulis :
Telah menulis sebanyak 17 artikel
Mendapatkan 78 komentar
  Rating tulisan 0 dari 5

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>