FarikhaNaili

MATERI II

CASCADING STYLE SHEETS (CSS)

Tujuan :

1. Memahami tentang konsep CSS

1. Memahami aturan penulisan pada CSS

2. Memahami selector sebagai pengontrol design

3. Memahami pembuatan background

4. Memformat text pada web

5. Memahami pengaturan bentuk font

6. Membuat pengaturan tabel dan pewarnaannya

7. Membuat hyperlink dan tombol yang menarik

I. KONSEP CSS

Apa itu CSS :

Feature untuk membuat dynamic HTML.

Style sheet mendeskripsikan bagaimana tamp

ilan document HTML di layar (template)

Membuat special efek (mendefinisikan style

untuk <H1> dengan style bold dan italic dan

berwarna biru)

Support ke semua browser.

Aturan penulisan :

Nilai untuk property tidak

boleh dalam tanda petik.

contoh : color : green;

Nama property bersifat case sensitive.

color : green;

property : color

value : green

Cara penggunaan CSS :

External Style Sheet

Bentuk :

dimana :

‰

‰

rel=“stylesheet”, menera

ngkan halaman ini akan di

kenai efek style sheet

‰

type=“text/css”, file yang dipanggil berupa css

‰

href=“css_files.css”, alamat

dokumen stylesheet yang dipanggil

Contoh Penggunaan :

script efek.css

body {

color: green;

background: white;

Bengkel Internet PENS-ITS : Cascading Style Sheets

font-family : arial;

}

Internal Style Sheet

Bentuk umum :

...definisi style...

</style>

Contoh Penggunaan :

Inline Style sheet

Contoh Penggunaan :

<HTML>

<HEAD>

<TITLE>centranet</TITLE>

<LINK REL="STYLESHEET"

TYPE="text/css" HREF="efek.css">

</HEAD>

<BODY>

<P> PENS ITS adalah kampus teknik yang

concern ke bidang elektro

</BODY>

<HTML>

<HEAD>

<TITLE>centranet</TITLE>

body {

color: white;

background: green;

font-family : arial;

}

</STYLE>

</HEAD>

<BODY>

<H1>Zefnet</H1>

<P>Zefnet adalah sebuah web Developer dan Linux Center

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>centranet</TITLE>

</HEAD>

<BODY style="color: white;

background: green;

font-family : arial;“ >

<H1>ZEFNET</H1>

<P>ZEFNET adalah sebuah web

Developer dan Linux Center

</BODY>

</HTML>

Bengkel Internet PENS-ITS : Cascading Style Sheets

II. ATURAN PENULISAN PADA CSS

Syntaxis CSS dibagi dalam 3 bagian :

selector {property : value}

dimana :

selector : tag HTML yang akan di

definisikan (body, H1, Link , dll).

property : atribut yang akan diubah

Cara penulisan :

FONT-FAMILY : sans-serif;

FONT-SIZE : small;

Cara penulisan yang salah :

FONT-FAMILY : “sans-serif”;

FONT-SIZE : ‘small’;

Cara mendeklarasikan kelompok : (tanda koma serta &)

H1, H2 {color : green};

H3, H4 & H5 {color : red};

Cara menuliskan komentar :

•

Menggunakan tanda : /* ..... */

•

Menggunakan tanda : <!-- - - >

Bentuk ukuran :

Ukuran Keterangan

Untuk menentukan ukuran yang pecahan (desimal)

x-height, digunakan unt

uk menentukan ukuran yang

sifatnya vertikal

Pixels, menentukan ukuran yang bersifat pixel (layar

monitor) seperti ukuran huruf.

III. SELECTOR SEBAGAI PENGONTROL DESIGN

1. Selector untuk merubah body.

<HTML>

<HEAD>

<TITLE> Selector </TITLE>

body

{

FONT-FAMILY: Geneva, Arial;

FONT-SIZE: 20px;

color: red;

BACKGROUND-COLOR: green;

}

</style>

</HEAD>

<BODY>

Halaman efect CSS

</BODY>

</HTML>

Bengkel Internet PENS-ITS : Cascading Style Sheets

2. Jenis-jenis selector

a. Selector bebas

<HTML>

<HEAD>

<TITLE> Selector </TITLE>

gbawah{

TEXT-DECORATION: underline;

}

</style>

</HEAD>

<BODY>

<gbawah> Efect Garis Bawah dengan

Selector Bebas </gbawah>

</BODY>

</HTML>

b. Selector dengan class

<HTML>

<HEAD>

<TITLE> Selector </TITLE>

.right { text-align : right }

</style>

</HEAD>

<BODY>

<h2

class="right"

>Class Heading 2 </h2>

class="right"

> Class Paragraf</p>

</BODY>

</HTML>

c. Selector Id

<HTML>

<HEAD>

<TITLE> Selector </TITLE>

#BODY_115 {

FONT-SIZE: 20px;

TEXT-DECORATION: underline;

COLOR: blue;

FONT-FAMILY:Comic Sans MS;

}

</style>

</HEAD>

<BODY

id="BODY_115"

Menggunakan ID Selector

</BODY>

</HTML>

IV. MEMFORMAT HALAMAN WEB

1. Format dengan margin

<HTML>

<HEAD>

<TITLE>Pengaturan Margin</TITLE>

BODY

{

margin-top : 1cm;

margin-right : 2cm;

margin-bottom : 1cm;

margin-left : 2cm;

}

</STYLE>

</HEAD>

<BODY>

Pengaturan Margin Halaman

(1cm,2cm,1cm,2cm)

</BODY>

</HTML>

2. Pemetaan menggunakan padding

Padding hampir sama dengan margin :

a. Margin hanya digunakan untuk membuat

batasan-batasan sisi halaman.

b. Padding dapat membuat batasan-batasan pada

komponen web lain seperti tabel, disamping

pengaturan batas halaman.

<HTML>

<HEAD>

<TITLE>Pengaturan Margin</TITLE>

BODY {

padding-top : 10%;

padding-right : 20%;

padding-bottom : 40%;

padding-left: 20%;

}

Bengkel Internet PENS-ITS : Cascading Style Sheets

</STYLE>

</HEAD>

<BODY>

Text ini berada di tengah halaman ,

karna di lakukan pengaturan halaman

dengan menggunakan padding atas 10%,

kanan 20%,bawah 40%,dan kiri 20%.

</BODY>

</HTML>

V. MEMBUAT BACKGROUND

1. Background warna

<HTML>

<HEAD>

<TITLE>Menggunakan Background

Warna</TITLE>

BODY { background-color : yellow}

</STYLE>

</HEAD>

<BODY>

Halaman ini di buat Berwarna Kuning

</BODY>

</HTML>

2. Background campuran

<HTML>

<HEAD>

<TITLE>Menggunakan Background

Warna</TITLE>

body {background-color : #99CCFF}

h2 {background : green}

h3 {background-color : transparent}

p {background : rgb(240,248,255)}

</STYLE>

</HEAD>

<BODY>

<h2>Header 2,Background Hijao</h2>

<h3>Header 3 , Bakground Transparan</h3>

<p>Background pada paragraph</p>

</BODY>

</HTML>

3. Background gambar

Properties Value Keterangan

background-

image

url Alamat gambar

yang dituju

background-

repeat

repeat-x

repeat-y

no-repeat

Diulang dlm hal

Diulang sumbu x

Diulang sumbu y

Tampil 1 gbr

Background-

position

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

x-% y-%

x-pos y-pos

Atas kiri hal

Atas tngh hal

Atas kanan hal

Tgh kiri hal

Pusat hal

Tngh kanan hal

Bwh kiri hal

Bwh tgh hal

Bwh kanan hal

Pakai nilai %

Contoh 1 :

<HTML>

<HEAD>

<TITLE>Menggunakan Background

Gambar</TITLE>

BODY

{

background-image:

url("drums.jpg");

background-repeat: repeat-x;

}

</STYLE>

</HEAD>

<BODY>

Background Berulang pada Sumbu X

</BODY>

</HTML>

Contoh 2 :

<HTML>

<HEAD>

<TITLE>Menggunakan Background

Gambar</TITLE>

BODY

{

background-image:url ("motor.jpg");

background-repeat: no-repeat;

background-position: center center;

}

Bengkel Internet PENS-ITS : Cascading Style Sheets

</STYLE>

</HEAD>

<BODY>

Background di Pusat Halaman

</BODY>

</HTML>

VI. FORMAT TEXT PADA WEB

Properties Value Keterangan

Pengaturan warna

color green, dll

Pengaturan Spasi (jrk antar karakter)

letter-spacing Normal

Length

Ukrn standar HTML

Ukrn panjang

(cm,px)

Perataan Text

text-align left

right

center

justify

text-decoration none

underline

overline

line-through

blink

Bentuk standar

Bergaris bwh

Bergaris atas

Text dicoret

Text berkedip

Pengaturan text indentasi

text-indent length

Dengn cm, px

Dengan persentase

Pengubahan Bentuk Karakter

text-transform capitalize

uppercase

lowercase

none

Contoh 1 :

<HTML>

<HEAD>

<TITLE>Format Text </TITLE>

p {color : green; letter-spacing: 0.5cm}

h4 {letter-spacing: -2px}

</STYLE>

</HEAD>

<BODY>

<p>Pengaturan Spasi Pada Paragraph

</p>

<h4> Header 4</h4>

</BODY>

</HTML>

Contoh 2 :

<HTML>

<HEAD>

<TITLE>Format Text </TITLE>

h1 {text-align: center}

h2 {text-align: left}

h3 {text-align: right}

</STYLE>

</HEAD>

<BODY>

<h1>Header 1,Di tengah</h1>

<h2>Header 2 , Di kiri</h2>

<h3>Header 3 ,Di kanan</h3>

</BODY>

</HTML>

Contoh 3 :

<HTML>

<HEAD>

<TITLE>Format Text </TITLE>

em {text-decoration : overline}

h2 {text-decoration: blink}

h3 {text-decoration: underline}

a {text-decoration: none}

</STYLE>

</HEAD>

<BODY>

<em>Bentuk Overline</em>

<h2>Header 2, Bentuk Line-

through</h2>

<h3>Header 3,Bentuk Underline</h3>

<p> <a href="http://lecturer.eepis-

its.edu/~zenhadi">

Penggunaan Dalam Link,Nilai NONE</a></p>

</BODY>

</HTML>

Contoh 4 :

<HTML>

<HEAD>

<TITLE>Format Text </TITLE>

p.besar {text-transform: uppercase}

Bengkel Internet PENS-ITS : Cascading Style Sheets

p.kecil {text-transform: lowercase}

</STYLE>

</HEAD>

<BODY>

pengubahan kedalam hurup Besar

</p>

PENGUBAHAN KEDALAM HURUF KECIL

</p>

</BODY>

</HTML>

VII. PENGATURAN FONT

Properties Value Keterangan

Jenis Font

font-family arial, dll

Ukuran Huruf

Font-size Small

Medium

Large

Length

Kecil

Menengah

Besar

Besar font (pt,px)

Persentase

Pengaturan gaya pada font

font-style normal

italic

oblique

Ketebalan huruf

font-weight normal

bold

100 ~ 900

Contoh 1 :

<HTML>

<HEAD>

<TITLE>Pengaturan Font</TITLE>

p.italic

{

font-size :200 % ;

font-style: italic;

}

p.normal{

font-family : verdana ;

font-style: normal;

}

p.oblique {font-style: oblique}

</STYLE>

</HEAD>

<BODY>

<P class="italic">Menggunakan Style

Italic</P>

<P class="normal">Menggunakan Style Normal

</P>

<P class="oblique">Menggunakan Style

Oblieque</P>

</BODY>

</HTML>

Contoh 2 :

<HTML>

<HEAD>

<TITLE>Pengaturan Font</TITLE>

p.normal

{

font-family : verdana ;

font-weight: normal;

}

p.thick

{

font-family : verdana ;

font-weight: bold;

}

p.thicker

{

font-family : times ;

font-weight: 900;

}

</STYLE>

</HEAD>

<BODY>

This is a paragraph</p>

This is a paragraph</p>

This is a paragraph</p>

</BODY>

</HTML>

Bengkel Internet PENS-ITS : Cascading Style Sheets

VIII. PENGATURAN TABEL

Yang perlu diperhatikan adalah

pengaturan border, padding dan margin suatu

tabel.

1. Pengaturan padding

<HTML>

<HEAD>

<TITLE>Pengaturan Padding Table</TITLE>

td.kiri{

padding-top: 2cm;

padding-right: 2cm;

padding-bottom: 2cm;

padding-left: 2cm ;

background-color : #F0F8FF;

}

</style>

</HEAD>

<BODY>

<TR>

<TD class="kiri">Pading dengan jarak 2cm

dari kiri,atas,kanan,dan bawah</TD>

<TD>Tanpa jarak </TD>

</TR>

</TABLE>

</BODY>

</HTML>

2. Menggunakan file css untuk mempercantik

pembuatan tabel.

File table_specbody.css

/* CSS Document */

TH {

color : #FFFFFF;

background-color : #336699;

border-width: 1px ;

border-style:solid;

border-color :red ;

font-size: 9pt;

}

TD {

color : red;

background-color : #E6E6FA;

border-width: 1px ;

border-style:solid;

border-color :blue ;

font-size: 9pt;

}

File html yang akan memanggil file css

<HTML>

<HEAD>

<TITLE>Pengaturan Table spec</TITLE>

<LINK REL="STYLESHEET"

TYPE="text/css"

HREF="table_specbody.css">

</HEAD>

<BODY>

<table width="468" border="0"

cellpadding="5"

cellspacing="0" >

<tr>

<th width="112"

>Nama Computer</th>

<th width="91">Prossesor</th>

<th width="137" >System Operasi</th>

</tr>

<tr>

<td >Redhat Linux</td>

</tr>

<tr>

<td >Mandrake Linux</td>

</tr>

<tr>

<td>Windows</td>

</tr>

</table>

</BODY>

</HTML>

Bengkel Internet PENS-ITS : Cascading Style Sheets

IX.PENGATURAN HYPERLINK &

TOMBOL YANG MENARIK

Syntax penulisan pada CSS :

a:link {property : value}

Selector Keterangan

a:link

Keadaan awal pemicu link aktif

a:visited

Keadaan pemicu link setelah

dikunjungi

a:active

Keadaan pemicu yang sedang aktif

a:hover

Kejadian pada pemicu link saat mouse

digerakkan diatasnya

1. Penggunaan property selector

<HTML>

<HEAD>

<TITLE>Pengaturan pada link</TITLE>

/*Konversi pengaturan Link pada contoh

sebelumya menggunakan css */

A:link {color : green;}

A:hover { color : pink;}

</STYLE>

</HEAD>

<BODY>

<a href="http://lecturer.eepis-its.edu/~zenhadi"

target="_self">Contoh Hyperlink menggunakan

CSS</a>

</BODY>

</HTML>

2. Pembuatan tombol dengan tabel

<HTML>

<HEAD>

<TITLE>Pengaturan Pada Link

background</TITLE>

A:link {text-decoration: none}

A:visited {text-decoration: none}

A:active {text-decoration: none}

A:hover {

font-weight:none;

color: red;

background-color:blue;}

</STYLE>

</HEAD>

<BODY>

<TR>

<a href="#">Arahkan Mouse ke

sini</a>

</TD>

</TR>

<TR>

<a href="#">Arahkan Mouse ke

sini</a>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

3. Membuat tombol visual 3D

a. Pembuatan file css

/* CSS Document */

.leftlinks {

border:1px solid #22476C;

padding:5px;

margin:5px;

text-align:middle;

background-color:#336699;

width:150px;

}

.leftlinks a {

display:block;

margin:3px 0px;

border-top:1px solid #4C86C0;

border-left:1px solid #4C86C0;

border-right:1px solid #22476C;

border-bottom:1px solid #22476C;

padding: 4px 10px;

text-align:center;

background-color:#336699;

Bengkel Internet PENS-ITS : Cascading Style Sheets

color:#EDEDED;

text-decoration:none;

}

.leftlinks a:link {

color:#EDEDED;

}

.leftlinks a:visited {

color:#EDEDED;

}

.leftlinks a:hover {

display:block;

margin:3px 0px;

border-top:1px solid #22476C;

border-left:1px solid #22476C;

border-bottom:1px solid #4C86C0;

border-right:1px solid #4C86C0;

padding: 5px 9px 3px 11px;

text-align:center;

background-color:#336699;

color:#EED929;

text-decoration:none;

}

b. Pembuatan file HTML utk memanggil css

<HTML>

<HEAD>

<TITLE>Pengaturan Pada Link Visualisasi

tombol</TITLE>

<LINK REL="STYLESHEET"

TYPE="text/css"

HREF="link_frtombol.css">

</HEAD>

<BODY>

<a href="index.htm">Teras Wamika</a>

<a href="profil.htm"

>Pssrofil Organisasi</a>

<a href="struktur.htm">Struktur</a>

<a href="pembimbing.htm">Pembimbing

Org</a>

<a href="dpo.htm">DPO Organisasi</a>

<a href="kegiatan.htm">Kegiatan Rutin</a>

<a href="berita.htm">Berita UKM</a>

</div>

FarikhaNaili

Selasa, 12 April 2016

Recent Articles

Jaring Web

Popular Posts

Like us on Facebook

Text Widget