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 :

NamaKODeBaru { Parameter : nilai }

</STYLE>

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:

<html>

<head>

<title>Contoh: Inline style sheet</title>

</head>

<body>

</body>

</html>

Embedded Style Sheet

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

Contoh:

<html>

<head>

<title>Contoh: Embedded style sheet</title>

<style>

h1{color:red}

</style>

</head>

<body>

<h1>Hello World....</h1>

</body>

</html>

Linked Style Sheet

Penulisan skrip CSS dihalaman berbeda atau terpisah dari html.

Contoh:

<HTML>

<HEAD>

TYPE="text/css">

</HEAD>

<BODY>

Q: sebutkan <I>sebuah kata bijak</I> yang anda ketahui?<br>

A: <B> never judge a book from its</B> cover!!!

</BODY>

</HTML>

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

{

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

{

color:red;

}

.isi{

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

font-size:large;

color:#00FF00;

}

Contoh pemanggilan class:

<html>

<head>

</head>

<body>

<p class="isi">Contoh Class</p>

</body>

</html>

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

Contoh style2.css

{

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

<html>

<head>

</head>

<body>

<p id="judul">Contoh pemanggilan ID</p>

</body>

</html>

CSS Background

Property background

Background-color

Body {Background-color : green; }

Background-Image

Body {Background-image : url(gambar1.jpg); }

Background-attachment

Body {Background-attachment : scroll;}

Background-Repeat

Body {

Background-repeat : repeat;

Background-image : url(image/gambar1.jpg);

}

Background-position

Body {

Background-repeat : no-repeat;

Background-image : url(image/gambar1.jpg);

Background-position : bottom center

}

CSS Font

Property Font

Font-family

P {Font-family : Arial,Helvetica;}

Font-size (satuan em,pt,px,mm,cm,%)

P { Font-size : 24em; }

Font-style (nilai : oblique,italic,normal)

P {Font-style : oblique;}

Font-variant (nilai : normal,small-caps)

P {Font-family : Arial,Helvetica;}

Font-weight (nilai :normal,bold,bolder,lighter,100-900)

P {Font-weight : bolder;}

CSS Teks

Property teks

color

P {color :red;}

teks-align (nilai left,right,center,justify)

P {Text-align :justify;}

text-decoration (nilai : none,underline,overline,line-through,blink)

P {Text-decoration :overline;}

text-transform (nilai : none,capitalize,uppercase,lowercase)

P {Text-transform : capitalize;}

Letter-spacing

P {letter-spacing : 20px;}

Teks-indent

P {Text-indent : 50px;}

CSS List

Property list

List-style-type (nilai : disc,circle,square,lower-roman,upper-roman,none,lower-alpha,upper-alpha)

Ul {List-style-type : disc ;}

List-style-image (nilai : url,none)

Ul {List-style-image : url(gambar1.jpg) ;}

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; <---- spasi atas, bawah, kanan, kiri ukurannya akan sama yaitu 10px

Margin: 10px 20px 30px 10px; <--- urutannya adalah atas, kanan, bawah, kiri

Margin : 10px 20px <--- Ini adalah spasi atas dan kanan, bagian bawah akan mengikuti spasi atas (10px) dan bagian kiri akan mengikuti spasi kanan (20px)*

Margin: 20px 10px 30px; <---- ini akan ter set menjadi atas, kanan dan kiri....

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 :
<div style=
margin-left:40px;
background:#ccccff;">
Kalau yang ini contoh Margin....
</div>

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:

UL{border-style: dashed; border-width: thin;}

</STYLE>

Padding

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

Padding : 10px; <---- spasi atas, bawah, kanan, kiri ukurannya akan sama yaitu 10px

Padding: 10px 20px 30px 10px; <--- urutannya adalah atas, kanan, bawah, kiri

Padding : 10px 20px <--- Ini adalah spasi atas dan kanan, bagian bawah akan mengikuti spasi atas (10px) dan bagian kiri akan mengikuti spasi kanan (20px)*

Padding: 20px 10px 30px; <---- ini akan ter set menjadi atas, kanan dan kiri....

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 :
<div style="
padding-left:40px;
background:#ccccff;">
Ini contoh padding lhooo....</div>

hasilnya :

ini contoh padding lhooo....

C. LATIHAN

Latihan 1 :

<html>

<head>

<title>Contoh penerapan Margin,Padding dan Border</title>

UL{

background:green;

margin 12px 12px 12px 12px;

padding: 3px 3px 3px 3px;

border-style:dashed;

border-width:thin;

}

LI{

color:black;

background:gray;

margin: 12px 12px 12px 12px;

padding: 12px 0px 12px 12px;

list-style:none;

}

LI.withborder{

border-style:dashed;

border-width:medium;

border-color:black;

}

</style>

</head>

<body>

<UL>

<LI>Elemen pertama

<LI class="withborder">Elemen kedua(dengan border)</LI>

</LI>

</UL>

</body>

</html>

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:

<html>

<head>

<title>Layout 2 Kolom</title>

<style>

body{background-color:#6caad9;

}

#coloumnleft{

float:left;

width:85%;

margin-top:0.5cm;

margin-right:1cm;

border-right:1px solid black;

}

#coloumnRight{

margin-top:1cm;

font: 16px Arial, Helvetica, sans-serif;

}

#footer{

clear:both;

border-top:1px solid #FFFFFF;

text-align:center;

}

li{

list-style-type:none;

}

</style>

</head>

<body>

<p>

<h1>Praktikum-2009</h1>

<h3>Modul Praktikum, Sudah jadi</h3>

3 Oktober 2009<br>

silahkan mengisi paragraf ini</p>

</div>

<ul>

</ul>

</div>

labkom6.blogspot.com

</div>

</body>

</html>

Latihan 2: layout dengan 3 kolom :

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

<html>

<head>

#header{

text-align:center;

font:bold 140% Georgia, "Times New Roman", Times, serif;

padding-bottom:6px;

border-bottom:5px dotted;

border-width:5px;

margin-bottom:6px;

}

#columnRight{

width:20%;

float:left;

border-top:10px solid black;

border-bottom:10px solid black;

background:#999999;

padding-bottom:1em;

margin-left:1%;

font:xx-small Arial, Helvetica, sans-serif;

}

#columnLeft{

width:24%;

float:left;

padding-left:10px;

padding-top:10px;

background:white;

border:1px solid;

}

#columnMain{

width:50%;

float:left;

margin-right:5px;

background:#FFFF99;

padding:1em 1em 1em 1em;

border:1px dotted;

}

#footer {

clear:both;

padding-bottom:1em;

border-top:1px solid #333;

text-align:center;

}

body{

background-color:#00CC99;

font:xx-small Arial, Helvetica, sans-serif;

}

font:x-small Arial, Helvetica, sans-serif;

text-decoration:none;

}

li{

list-style-type:none;

}

</style>

</head>

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

</div>

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

</div>

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

</div>

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

</div>

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

</div>

</html>

Bahan Ajar Cascading Style Sheets (CSS)

0 Response to "Bahan Ajar Cascading Style Sheets (CSS)"

Post a Comment