Best Author
sangdedi

743,975
octa

487,531
fitrotinnikm

456,625
idjah

445,595
dwi

314,005
adit

310,328
resta-andara

276,173
benedict

261,617
rahadian

241,246
bara

228,950
nabilalalala

217,076
kurnitap_

154,132
kuswanto

140,907
suranto

100,765
admin

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