Bahan Ajar Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

A.      TUJUAN

1.      Praktikan mengetahui manfaat CSS dalam halaman web

2.      Praktikan  mengetahui jenis-jenis penulisan CSS

3.    Praktikan dapat mengaplikasikan format CSS dalam tiap halaman web

B.       DASAR TEORI

CSS (Cascading Style Sheet)

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

CSS dimulai dengan :

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:

Oke Coy!!!!

• Embedded Style Sheet

Penulisan CSS didalam dokumen HTML dan menggunakan tag

Contoh:

Hello World....

• Linked Style Sheet

Penulisan skrip CSS dihalaman berbeda atau terpisah dari html.

Contoh:

      TYPE="text/css">

Q: sebutkan sebuah kata bijak yang anda ketahui?

A: never judge a book from its cover!!!

            File global.css

            B {color: red; text-decoration: underline;

     font-family: Arial }

I {color:blue; font-family:"Monotype    Corsiva";  font-size:20}  

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 style1.css

h1

{

      color:red;

}

.isi{

      font-family:Geneva, Arial, Helvetica, sans-serif;

      font-size:large;

      color:#00FF00;

}

Contoh pemanggilan class:

Contoh Class

ID

Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain web krn didefiniskan denga ID berbeda.

Contoh style2.css

h1

{

      color:red;

}

.isi

{

      font-family:Geneva, Arial, Helvetica, sans-serif;

      font-size:large;

      color:#00FF00;

}

#judul

{

      font-family:Verdana, Arial, Helvetica, sans-serif;

      font-size:36px;

      color:#990066;

}

Contoh pemanggilan ID

Contoh pemanggilan ID

CSS Background

Property background

1. Background-color

Body {Background-color : green; }

2.  Background-Image

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

Model Pemformatan Pada CSS

Dengan mengerti tentang pemformatan, maka akan lebih mudah memahami apa yang dilakukan terhadap properti-properti pada CSS.

Setiap kotak, mempunyai content area ( seperti text atau image) dan tiga area lain yang berada di sekelilingnya, yaitu padding, border, dan margin. Ketiga area tersebut masing-masing memiliki 4 bagian yaitu top, right, left, dan bottom.

Margin

Margin adalah untuk mengatur spasi bagian luar, yang sering kita temui adalah sebagai berikut: margin : 10px; <---- 10px="" akan="" atas="" bawah="" kanan="" kiri="" o:p="" sama="" spasi="" ukurannya="" yaitu="">

Margin: 10px 20px 30px 10px; <--- adalah="" atas="" bawah="" kanan="" kiri="" o:p="" urutannya="">

Margin : 10px 20px <--- adalah="" akan="" atas="" bagian="" bawah="" dan="" ini="" kanan="" kiri="" mengikuti="" o:p="" px="" spasi="">

Margin: 20px 10px 30px; <---- akan="" atas="" dan="" ini="" kanan="" kiri....="" menjadi="" o:p="" set="" ter="">

Apabila ingin mengatur jaraknya secara manual/salah satu aja, bisa sebagai berikut :
margin-left:10px;
margin-right:20px;
margin-top:30px;
margin-bottom:10px;

Contoh margin:

kodenya :

margin-left:40px;
background:#ccccff;">
Kalau yang ini contoh Margin....

hasilnya :

kalau yang ini contoh Margin....

Border

Border merupakan pembatas antara margin dan padding yang dapat berupa garis yang dapat diatur ketebalannya dengan menggunakan atribut border-width, warna border dengan border-color, dan jenis garis dengan atribut border-style. Berikut contoh penggunaan border:

Padding

Padding adalah untuk mengatur spasi bagian dalam. Yang sering kita jumpai sebagai berikut: (sama seperti margin)

Padding : 10px; <---- 10px="" akan="" atas="" bawah="" kanan="" kiri="" o:p="" sama="" spasi="" ukurannya="" yaitu="">

Padding: 10px 20px 30px 10px; <--- adalah="" atas="" bawah="" kanan="" kiri="" o:p="" urutannya="">

Padding : 10px 20px <--- adalah="" akan="" atas="" bagian="" bawah="" dan="" ini="" kanan="" kiri="" mengikuti="" o:p="" px="" spasi="">

Padding: 20px 10px 30px; <---- akan="" atas="" dan="" ini="" kanan="" kiri....="" menjadi="" o:p="" set="" ter="">

Apabila ingin mengatur jaraknya secara manual/salah satu aja, bisa sebagai berikut :
padding-left:10px;
padding-right:20px;
padding-top:30px;
padding-bottom:10px;

Contoh padding:

kodenya :

Ini contoh padding lhooo....

hasilnya :

            ini contoh padding lhooo....

C.      LATIHAN

Latihan 1 :

Elemen pertama

Elemen kedua(dengan border)

 CSS

Layout dan Posisi

A.      TUJUAN

1.      Praktikan dapat merancang dan membuat halaman web menggunakan CSS

2.      Praktikan dapat mengaplikasikan elemen pengaturan layout dan posisi menggunakan CSS dalam halaman web.

B.       DASAR TEORI

Layout dan Posisi

            Ada beberapa cara untuk menentukan posisi sebuah element mneggunakan CSS. Anda bisa meletakkan sebuah elemen dengan salah satu dari empat cara, yaitu :

·    Static. Merupakan model peletakkan elemen secara normal. Elemen diletakkan bersambungan denagn elemen sebelumnya. Misalkan ada tiga paragraf,paragaraf kedua diatur dengan style berikut :

Width: 350px; height:150 px;

Border : 1pt solid black;

Background-color: white;

Padding : ,5em;

Position : static;

·    Relative. Model peletakkan elemen secara relative terhadap elemen sebelumnya. Dapat diberikan atribut tamabahan top dan left, untuk menagtur jarak elemen terhadap elemen sebelumnya. Contoh :

Width: 350px; height:50px;

Border : 1pt solid balck;

Background-color: white;

Padding : .5em;

Position : relative;

Top :50px; left:100px;

·    Absolute adalah peletakkan model paragraph secara absolute di dalam sebuah window. Anda dapat menambahkan atribut top, left, right, right, dan bottom, terhadap elemen untuk mengatur posisinya dengan pasti. Contoh :

Width : 350px; height : 50px;

Border :1pt solid black;

Background-color:white;

Padding:.5em;

Position:absolute;

Top:50px; left:100px;

·    Fixed sama seperti pada peletakkan dengan model relative. Hanya saja posisi fixed tidak berubah, walaupun window di scroll keatas atau kebawah.

Contoh html pengaturan posisi

Contoh :

Pengaturan posisi image

Mengunci image agar berada pada posisi yang pasti, dapat dilakukan dengan mengubah property background-attachment dengan nilai fixed, berikut listing selengkapnya:

Contoh :

C.      LATIHAN

Latihan 1: layout dengan dua kolom:

Praktikum-2009

Modul Praktikum, Sudah jadi

3 Oktober 2009

silahkan mengisi paragraf ini

2009

2008

2007

2006

2005

© 2009 Labkom 6

labkom6.blogspot.com

Latihan 2: layout dengan 3 kolom :

(layout tiga kolom dengan navigasi di sebelah kiri, isi di tengah, dan tambahan satu kolom di kanan.

[...isi bagian header....]

[...isi bagian kolom kiri...]

[...isi bagian kolom tengah...]

[....isi bagian kolom kanan....]

[....isi bagian footer....]

Tweet