Mengenai CSS ( CASDING STYLE SHEET )

CSS (CASCADING STYLE SHEET)

CSS DASAR 

Ø  Tentang CSS

Ø  Kegunaan CSS

Ø  Aturan Penulisan

Ø  CSS Background

Ø  CSS Font

Ø  CSS Teks

Ø  CSS Border

Ø  Margin

Ø  Contoh Layout Web menggunakan CSS

  

Tentang CSS

CSS (Cascading Style Sheet) 

adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk

mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak

terjadi pengulangan tulisan.

Keuntungan menggunakan CSS

•   Memisahkan presentastion  sebuah dokumen dari content document itu sendiri.

•   Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web

•   Mempercepat proses rendering/pembacaan HTML.

Cara penulisan CSS

  Inline style sheet 

Penulisan didalam elemen HTML.

Contoh script 1

 

 

Gambar 1

  Embedded Style Sheet

Penulisan CSS didalam dokumen HTML dan menggunakan tag <style></style>

Contoh script 1

 

 

Gambar 2

 Linked Style Sheet

Penulisan skrip CSS dihalaman berbeda atau terpisah dari html.

Contoh script 3

 

Contoh script style1.css 

 

 

Gambar 3 

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

stlye1.css  

 

Contoh script 4

 

Gambar 4

ID

Diawali dengan tanda  #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain

web krn didefiniskan denga ID berbeda.

Misl.

Style1.css 

 

Contoh script5

 

Gambar 5

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 : ur l(image/gambar1.jpg);

}

5.   Background-position

Body {

  Background-repeat : no-repeat;

  Background-image : ur l(image/gambar1.jpg);

 Background-position : bottom center                                                                                                                         

                     }

style1.css

 

Contoh script6

 

Gambar 6

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,under line,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;

}         

Pada file HTML

<html>

<head>

<link rel=”stylesheet” type=”text/css”  href=”cssku.css”>

</style>

</head>

<body>

<p class=kotak > teks1 <p>

</body>

</html>

Latihan

Membuat layout halaman web menggunakan CSS

File cssku.css

#header {

 position:static;

 height:90px;

 width:800px;

 background-color:#666666;

 padding-top:4%;

 padding-right:2%

 padding-bottom:2%;

 padding-left:4%;

 line-height:0.5px;

 left:50px;

 right:50px;

}

.judul1 {

font-family:verdana,helvetica,sans-serif;

font-size:1em;

color:#ffffff;

letter-spacing:1em;

}

.judul2 {

font-family:verdana,helvetica,sans-serif;

font-size:1.5em;

color:#ffff00;

letter-spacing:1em;

text-decoration:line-underline;

}

.judul3 {

font-family:verdana,helvetica,sans-serif;

font-size:1.5em;

color:#ffff00;

letter-spacing:0.25em;

text-decoration:line-underline;

}

#nav_left{

 background-color:#999999;

 height:40px;

 width:170px;

 line-height:0.1;

 padding:0.5em;

 border-bottom-width:1px;

 border-bottom-style:solid;

 border-bottom-color:#ffffff;

}

#nav_left_link {

    font-size:10px;

 background-color:#666666;

 height:415px;

 width:170px;

 padding:0.5em;

 border-bottom-width:1px;

 border-bottom-style:solid;

 border-bottom-color:#ffffff;

}

#nav_left_menu_caption {

 background-color:#666666;

 height:20px;

 width:170px;

 line-height:0.1;

 padding:0.5em;

 border-bottom-width:1px;

 border-bottom-style:solid;

 border-bottom-width:#ffffff;

}

.menu_caption {

font-family:verdana,arial,helvetica,sans-serif;

font-size:1em;

color:#ffff00;

text-align:center;

vertical-align:middle;

}

#stylelink a:link, #stylelink a:visited {

 display:block;

  border-top:1px solid #ffffff;

  border-bottom:1px solid #cccccc;

 background-color:#666666;

 font-weight:bold;

 color:#ffff00;

 width:100px;

 padding-top:3px;

 padding-right:0px;

 padding-bottom:3px;

 padding-left:10px;

 text-decoration:none;

}

#stylelink a:hover {

  border-top:1px solid #cccccc;

 background-color:#0000hh;

 background-image:none;

 font-weight:bold;

 text-decoration:none;

 color:#ffffff;

}

#bawah{

 background-color:#999999;

 height:30px;

 width:800px;

 padding-right:2em;

 padding-left:4em;

 padding-top:1em;

 padding-bottom:1em;}

. copyright_bawah{

font-family:verdana,arial,helvetica,sans-serif;

font-size:10px;

color:#ffffff; 

text-align:center;

width:800px;

}

#box_isi {

  position : absolute;

 height:auto;

 width:615px;

 left:204px;

 top:100px;

 padding:1em;

 border-left-width:1px;

 border-left-style:dotted;

 border-left-color:#666666;

 border-right-width:1px;

 border-right-style:dotted;

 border-right-color:#666666;}

.isi {

font-family:verdana,arial,helvetica,sans-serif;

font-size:1.2em;

color:#666666;

line-height:2em;

text-align:justify;

vertical-align:none;

}

body {

font-family:verdana,arial,helvetica,sans-serif;

background-color:#cccccc;

margin:auto;

padding:0.2em;

}

p {

font-family:verdana,arial,helvetica,sans-serif;

font-size:10px;

}