Anda di halaman 1dari 9

CASCADING STYLE SHEETS

Mengenal dan menggunakan CSS

Suhermanto, S.Kom Web Programming 1


Apa itu CSS ?
 Mekanisme mengatur halaman website secara
keseluruhan, pengaturan pada bagian:
 Huruf

 Warna

 Tata letak
Ada apa dengan CSS ?
 Maintenance Layout web lebih mudah
 Cukup dari Style sheet-nya
 Tanpa mengubah satu per satu halaman website

 Diterapkan pada SEO


 Dengan istilah Clear code is easier for search engines
to index.
 Hemat bandwith
 Load page website lebih cepat
Bentuk penulisan CSS

•<html><head><title>cs
• <p style="color: Body{padding:20px;color:#ffc s</title><style
sienna; margin-left: c00; type=“text/css”>
20px"> Paragraf ke- } .style1{color:
1</p> P{color=cccccc;padding=20px; sienna; margin-left:
} 20px} <body><p
class=“style1”>this
• <span style="color: paragraph</p></body>
sienna; margin-left: </html>
20px"> Paragraph ke-
2</span>
html

Inline Style External Internal


Sheet Style Sheet Style Sheet
CSS Rule

Selector{Property:Value}
 Selector, meliputi salah satu bentuk dibawah:
 ID
 Class

 Declaration
 Berisi Property & Value

Contoh:

.Style1{background:#FFFFFF}
Class dan ID dalam CSS
 Untuk memudahkan, berikut adalah penjelasan secara umum tentang penggunaan
class dan ID dalam CSS dan XHTML.
 ID juga dapat digunakan untuk menamai tag sebagai identifikasi pada javascript.
 ID bersifat unik pada setiap halaman, tidak boleh lebih dari satu tag memiliki id
yang sama pada satu halaman yang sama.
 Class dapat digunakan berulang kali, satu tag dapat memiliki class lebih dari satu
seperti misal:
<h1 class="judul besar kanan">Contoh Halaman Website</h1>
dimana judul, besar dan kanan memiliki style yang saling melengkapi.
 ID biasanya bersifat global yang dibedakan menjadi blok-blok tertentu misalkan,
header, content, sidebar dan footer. Class biasanya digunakan untuk membedakan
style tertentu yang dibedakan antara misalnya warna, jenis huruf atau besar huruf.
 Class dapat digunakan untuk mempertegas style dari ID yang bersifat global
dengan menggunakannya bersama-sama pada satu tag seperti misal:
<h1 id="pagetitle" class="judul">Contoh Halaman Website</h1>
Contoh 1(inline style sheet)

Code Browser
 <body> <p style=" background: #CCCCCC;
font-size:36px"><span style="background:
#000000; color:#FFFFFF“>
&nbsp;5&nbsp;</span> Menggunakan
CSS</p> <p style="color: #CC9900;
padding:10px; border:dotted 2px
#99CC00;">Cascading Stylesheet</a> (CSS)
adalah mekanisme sederhana untuk mengubah
Jenis Huruf, Warna, Ukuran dan lain-lain pada
halaman website. Dengan menggunakan CSS,
pengaturan tampilan halaman web dapat
diorganisasikan dalam satu file sehingga
memudahkan untuk mengubah atau
memperbaiki tampilan halaman website
tersebut tanpa harus mengubah satu per satu
setiap halaman yang berkaitan dalam sebuah
website.</p></body>
Contoh 2(internal style sheet)

Code Browser
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {font-size: 36px; background: #CCCCCC}
.style2 {background: #000000; color:#FFFFFF}
.style3 {color: #CC9900; padding:10px; border:dotted 2px #99CC00;}
-->
</style>
</head>
<body>
<p class="style1"><span class="style2">&nbsp;5&nbsp;</span>
Menggunakan CSS</p>
<p class="style3">Cascading Stylesheet</a> (CSS) adalah
mekanisme sederhana untuk mengubah Jenis Huruf, Warna,
Ukuran dan lain-lain pada halaman website. Dengan
menggunakan CSS, pengaturan tampilan halaman web dapat
diorganisasikan dalam satu file sehingga memudahkan untuk
mengubah atau memperbaiki tampilan halaman website tersebut
tanpa harus mengubah satu per satu setiap halaman yang
berkaitan dalam sebuah website.</p>
</body>