Best Author
sangdedi

743,613
octa

486,297
fitrotinnikm

456,615
idjah

445,181
dwi

313,549
adit

310,104
resta-andara

275,157
benedict

261,583
rahadian

240,940
bara

228,942
nabilalalala

216,884
kurnitap_

154,132
kuswanto

140,191
suranto

100,765
admin

99,004
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>