CSS

I. KONSEP CSS
Apa itu CSS :

  1. Feature untuk membuat dynamic HTML.
  2. Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template)
  3.  Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan italic danberwarna biru)
  4.  Support ke semua browser.

Aturan penulisan :

  1. Nilai untuk property tidak boleh dalam tanda petik. contoh : color : green;
  2. Nama property bersifat case sensitive. color : green, property : color,value : green

Cara penggunaan CSS :

1. 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 KAPUTAMA BINJAI</H1>
<P> Salah Satu STMIK di Binjai</p></BODY>
</HTML>

2. 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 Heading 2 </h2>
<p> 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>

 

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

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;
}
</STYLE>
</HEAD>
<BODY>
Background di Pusat Halaman
</BODY>
</HTML>

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: