Bengkel Internet STMIK BANI SALEH Cascading Style Sheets
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 tampilan 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 :
<link rel="stylesheet" type="text/css" href="css_files.css">
dimana :
<link, merupakan tag pembuka diakhiri dengan tanda ">"
rel="stylesheet", menerangkan halaman ini akan dikenai 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;
font-family : arial;
}
<HTML>
<HEAD>
<TITLE>centranet</TITLE>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="efek.css">
</HEAD>
<BODY>
<H1>STMIK BANI SALEH</H1>
<P> STMIK BANI SALEH adalah kampus teknik yang
concern ke bidang Teknik Informatika
</BODY>
Internal Style Sheet
Bentuk umum :
<style type="text/css">
...definisi style...
</style>
Contoh Penggunaan :
<HTML>
<HEAD>
<TITLE>centranet</TITLE>
<STYLE type="text/css">
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>
Inline Style sheet
Contoh Penggunaan :
<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>
II. ATURAN PENULISAN PADA CSS
Syntaxis CSS dibagi dalam 3 bagian :
selector {property : value}
dimana :
selector : tag HTML yang akan didefinisikan (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
em Untuk menentukan ukuran yang pecahan (desimal)
ex x-height, digunakan untuk menentukan ukuran yang
sifatnya vertikal
px 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>
<style type="text/css">
body
{
FONT-FAMILY: Geneva, Arial;
FONT-SIZE: 20px;
color: red;
BACKGROUND-COLOR: green; }
</style>
</HEAD>
<BODY>
Halaman efect CSS
</BODY>
</HTML>
2. Jenis-jenis selector
a. Selector bebas
<HTML>
<HEAD>
<TITLE> Selector </TITLE>
<style type="text/css">
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>
<style type="text/css">
.right { text-align : right }
</style>
</HEAD>
<BODY>
<h2 class="right">Class Heading 2 </h2>
<p class="right"> Class Paragraf</p>
</BODY>
</HTML>
c. Selector Id
<HTML>
<HEAD>
<TITLE> Selector </TITLE
>
<style type="text/css">
#BODY_115 {
FONT-SIZE: 20px;
TEXT-DECORATION: underline;
COLOR: blue;
FONT-FAMILY:Comic Sans MS;
}
</style> }
</STYLE>
</HEAD>
<BODY>
IV. MEMFORMAT HALAMAN WEB
1. Format dengan margin
<HTML>
<HEAD>
<TITLE>Pengaturan Margin</TITLE>
<STYLE ="text/css">
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 di samping pengaturan batas halaman.
<HTML>
<HEAD>
<TITLE>Pengaturan Margin</TITLE>
<STYLE ="text/css">
BODY {
padding-top : 10%;
padding-right : 20%;
padding-bottom : 40%;
padding-left: 20%;
}
</BODY>
</HTML>
Text ini berada di tengah halaman karna di lakukan pengaturan halaman
sumbu x
dengan menggunakan padding atas 10%,
sumbu y
kanan 20%,bawah 40%,dan kiri 20%.
V. MEMBUAT BACKGROUND
1. Background warna
<HTML>
<HEAD>
<TITLE>Menggunakan Background
Warna</TITLE>
<STYLE type="text/css">
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>
<STYLE ="text/css">
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 yg dituju
Background Repeat Diulang
Repeat Repeat-x Diulang
Repeat Repeat-y Diulang
No Repeat - Tampil 1 gambar
Background Position: top left Atas kiri hal
top center Atas tngh hal
top right Atas kanan hal
center left Tgh kiri hal
center center Pusat hal
center right Tngh kanan hal
bottom left Bwh kiri hal
bottom center Bwh tgh hal
bottom right Bwh kanan hal
Contoh 1 :
<HTML
>
<HEAD
<TITLE>Menggunakan Background
Gambar</TITLE>
<STYLE ="text/css">
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>
<STYLE ="text/css">
BODY
{
background-image:url ("motor.jpg")
background-repeat: no-repeat;
background-position: center center;
}
VI. FORMAT TEXT PADA WEB
Contoh 1 :
<HTML>
HEAD>
<
<TITLE>Format Text </TITLE>
<STYLE ="text/css">
p {color : green; letter-spacing: 0.5cm}
h4 {letter-spacing: -2px}
NONE</a></p>
</HEAD>
</STYLE>
<BODY>
<p>Pengaturan Spasi Pada Paragraph
</p>
<h4> Header 4</h4>
</BODY>
</HTML>
Contoh 2 :
<HTML>
<HEAD>
<TITLE>Format Text </TITLE>
<STYLE ="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</STYLE>
</HEAD>
<BODY>
<h1>Header 1,Ditengah</h1>
<h2>Header 2 , Di kiri</h2>
<h3>Header 3 ,Di kanan</h3>
</BODY>
</HTML>
Contoh 3 :
<HTML>
<HEAD>
<TITLE>Format Text </TITLE>
<STYLE ="text/css">
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
<p> <a href="http://lecturer.eepis-UNSADA.edu/~zenhadi">Penggunaan Dalam Link,Nilai
</BODY>
</HTML>
Contoh 4 :
<HTML>
<HEAD>
<TITLE>Format Text </TITLE>
<STYLE ="text/css">
p.besar {text-transform: uppercase}
p.kecil {text-transform: lowercase}
</STYLE>
</HEAD>
<BODY>
Normal
<p class="besar">
pengubahan kedalam hurup Besar
class="oblique">Menggunakan Style
</p>
<p class="kecil">
pengubahan kedalam huruf kecil
</p>
</BODY>
</HTML>
VII. PENGATURAN FONT
Contoh 1 :
<HTML>
<HEAD>
<TITLE>Pengaturan Font</TITLE>
<STYLE ="text/css">
p.italic
{
font-size :200 % ;
font-style: italic;
}
p.normal{
font-family : verdana ;
font-style: normal;
}
p.oblique {font-style: oblique}
</STYLE>
</HEAD>
</HTML>
Contoh 2 :
<HTML>
<HEAD>
<TITLE>Pengaturan Font</TITLE>
<STYLE ="text/css">
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>
<p class="normal">This is a paragraph</p>
<p class="thick">This is a paragraph</p>
<p class="thicker">This is a paragraph</p>
</BODY>
</HTML>
VIII. PENGATURAN TABEL
1. Pengaturan padding
<HTML>
<HEAD>
<TITLE>Pengaturan Padding Table</TITLE>
<style type="text/css">
td.kiri{
padding-top: 2cm;
padding-right: 2cm;
padding-bottom: 2cm;
padding-left: 2cm ;
background-color : #F0F8FF;
}
</style>
</HEAD>
<BODY>
<TABLE BORDER="1">
<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
/* CSS Document */
File table_specbody.css
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="96">Ram</th>
<th width="137" >System Operasi</th>
</tr>
<tr>
<td>Clnt-1</td>
<td >IP 4 1,8 Ghz</td>
<td >10 GB</td>
<td >Redhat Linux</td>
</tr>
<tr>
<td >Clnt-2</td>
<td >IP 2 Ghz C</td>
<td >6 GB</td>
<td >Mandrake Linux</td>
</tr>
<tr>
<td >Clnt-2</td>
<td >XP 2000+ </td>
<td >20 GB</td>
<td>Windows</td>
</tr>
</table>
</BODY>
</HTML>
IX.PENGATURAN HYPERLINK & TOMBOL YG 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>
<STYLE type="text/css">
/*Konversi pengaturan Link pada contoh sebelumya menggunakan css */
A:link {color : green;}
A:hover { color : pink;}
</STYLE>
</HEAD>
<BODY>
<a href="http://lecturer.eepis-UNSADA.edu/~zenhadi"
target="_self">Contoh Hyperlink menggunakan
CSS</a>
</BODY>
</HTML>
2. Pembuatan tombol dengan tabel
<HTML>
<HEAD>
<TITLE>Pengaturan Pada Link Background</TITLE>
<STYLE ="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
#22476C;
A:hover {
font-weight:none;
color: red;
background-color:blue;}
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>
<div class="leftlinks">
<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 Organisasi</a>
<a href="dpo.htm">DPO Organisasi</a>
<a href="kegiatan.htm">Kegiatan Rutin</a>
<a href="berita.htm">Berita UKM</a>
</div>
Tidak ada komentar:
Posting Komentar