Mulok 1 HTML_CSS: Cascading Style Sheets

Mulok 1 HTML_CSS: 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 penggu
background: white;
font-family : arial;
}
Mulok 1 HTML_CSS: Cascading Style Sheets
Indra Susanto – SMKN 2 Kota Probolinggo 2
 Internal Style Sheet
Bentuk umum :
<style type=“text/css”>
…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>
<H1>stt stikma mlg</H1>
<P> STT STIKMA adalah kampus teknik yang concern ke bidang komputer
</BODY>
</HTML>
<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>
<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>
Mulok 1 HTML_CSS: Cascading Style Sheets
Indra Susanto – SMKN 2 Kota Probolinggo 3
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>
Mulok 1 HTML_CSS: Cascading Style Sheets
Indra Susanto – SMKN 2 Kota Probolinggo 4
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>
</HEAD>
<BODY id="BODY_115">
Menggunakan ID Selector
</BODY>
</HTML>
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, disamping 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%;
}
Mulok 1 HTML_CSS: Cascading Style Sheets
Indra Susanto – SMKN 2 Kota Probolinggo 5
</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>
<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 yang dituju
background-repeat
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>
<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;
}
Mulok 1 HTML_CSS: Cascading Style Sheets
Indra Susanto – SMKN 2 Kota Probolinggo 6
</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>
<STYLE ="text/css">
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>
<STYLE ="text/css">
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>
<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 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>
<STYLE ="text/css">
p.besar {text-transform: uppercase}
Mulok 1 HTML_CSS: Cascading Style Sheets
Indra Susanto – SMKN 2 Kota Probolinggo 7
p.kecil {text-transform: lowercase}
</STYLE>
</HEAD>
<BODY>
<p class="besar">
pengubahan kedalam hurup Besar
</p>
<p class="kecil">
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>
<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>
<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>
<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>
Mulok 1 HTML_CSS: Cascading Style Sheets
Indra Susanto – SMKN 2 Kota Probolinggo 8
VIII. PENGATURAN TABEL
Yang perlu diperhatikan adalah pengaturan border, padding dan margin suatu 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.
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="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>
Mulok 1 HTML_CSS: Cascading Style Sheets
Indra Susanto – SMKN 2 Kota Probolinggo 9
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>
<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-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>
<STYLE ="text/css">
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>
<TABLE border="1">
<TR>
<TD width="144">
<a href="#">Arahkan Mouse ke sini</a>
</TD>
</TR>
<TR>
<TD width="144">
<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;
Mulok 1 HTML_CSS: Cascading Style Sheets
Indra Susanto – SMKN 2 Kota Probolinggo 10
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
Org</a>
<a href="dpo.htm">DPO Organisasi</a>
<a href="kegiatan.htm">Kegiatan Rutin</a>
<a href="berita.htm">Berita UKM</a>
</div>
</BODY>
</HTML>
Fungsi tag <div> : hampir sama dengan tag paragraf <p>, berguna untuk mengelompokkan sejumlah baris teks yang memiliki karakteristik yang sama.
TUGAS :
Buatlah web pribadi anda, lengkapi dengan pembuatan tombol link menggunakan css. FASILITAS MENU :
1. HOME : Informasi sekilas tentang diri anda.
2. PENDIDIKAN : Pendidikan yang telah anda tempuh, termasuk pelatihan dan training yang pernah diikuti.
3. JADWAL KULIAH : Gunakan pemakaian tabel dengan css seperti diatas.
4. AKTIVITAS : Pengalaman organisasi yang pernah anda ikuti selama kuliah atau di luar.
5. Tambahkan informasi lain, untuk menambah nilai anda.
Mulok 1 HTML_CSS: Cascading Style Sheets
Indra Susanto – SMKN 2 Kota Probolinggo 11
CONTOH
Efek1.CSS
.leftlinks {
border:1px solid #22476C;
padding:5px;
margin:5px;
text-align:middle;
background-color:#336699;
width:150px;
}
.leftlinks a {
display:block;
margin:5px 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;
color:#EDEDED;
text-decoration:none;
}
.leftlinks a:link {color:#EDEDED;}
.leftlinks a:visited {color:#EDEDED;}
.leftlinks a:hover {
display:block;
margin:5px 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:#FF3366;
color:#EED929;
text-decoration:none;
}
Mulok 1 HTML_CSS: Cascading Style Sheets
Indra Susanto – SMKN 2 Kota Probolinggo 12
Horisontal.CSS
ul { margin: 20;
padding:5;
list-style: none;
}
li { display:inline; }
li a{
float:left;
color:#ff8d1b;
text-decoration:none;
border-right:1px solid #ff7f00;
border-bottom:1px solid #fff;
border-top:1px solid #fff;
padding:2px 10px 2px 10px;
font-family:Georgia, garamond, serif;
}
li a:hover{
float:left;
color:#db6d00;
text-decoration:none;
border-bottom:1px solid #ff7f00;
border-top:1px solid #ff7f00;
background:#ffdfbf;
}
Mulok 1 HTML_CSS: Cascading Style Sheets
Indra Susanto – SMKN 2 Kota Probolinggo 13
Vertikal.CSS
ul { margin: 5px;
width: 160px;
padding: 25px 25px 25px 25px;
list-style:none;
}
li a{ display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border:1px 1px 1px 1px solid #ff7f00;
background:#ffdfbf;
}