Pemograman Berbasis Web Cascading Style Sheets

∞Pengertian
∞Keuntungan CCS
∞Kekurangan CSS

Pengertian
• Cascading Style Sheets(CSS) adalah
suatu teknologi yang digunakan untuk
memperindah halaman website (situs),
dengan CSS kita dapat dengan mudah
mengubah keseluruhan warna dan
tampilan yang ada disitus kita sekaligus
memformat ulang situs kita.
• CSS ini telah distandarkan oleh World
Wide Web Consortium (W3C) untuk
digunakan diweb browser.

KeuntunganCCS
∞ Dapat di-update dengan cepat dan mudah,
karena kita cukup mendefinisikan sebuah
style-sheet global yang berisi aturan-aturan
CSS tersebut untuk diterapakan pada seluruh
dokumen-dokumen HTML pada halaman situs
kita.
∞ User yang berbedadapat mempunyai style-
sheet yang berbeda pula.
∞ Ukuran dan kompleksitas document code
dapat diperkecil.

KekuranganCSS
∞pembuatannya lumayan lama dalam arti
pemberian selektor div, id, class,dll.
∞sangat menyita waktu adalah fakta bahwa tidak
semua browser mengartikan sintaks - sintaks CSS
sama.
∞Tampilan pada browser berbeda-beda.
∞Kadang juga terdapat browser yang tidak support
CSS (browser lama).
∞Harus tahu cara menggunakannya.
∞dibutuhkan waktu lebih lama dalam membuatnya.
∞Belum lagi ada bug/error dalam CSS.

∞ Secara Umum ada tiga bagian yaitu
∞ Selector (elemen yang akan didefinisikan)
∞ Properti (atribut yang akan diubah)
∞ Nilai
BentukUmum:
Selector{property: value}

Aturan property dan nilai dipisahkan dengan titik dua (colon), contoh :
Body {color: black}
Jika nilai berupa beberapa kata, gunakan tanda petik ganda, contoh :
P {font-family: “sans serif}
Jika lebih dari satu property pisahkan dengan titik-koma (semi colon)
contoh :
P {text-align: center; color: red}
Atau
P
{
text-align:center;
color: black;
font-family: arial
}

Jika selector dikelompokkan,
Contoh :
H1, H2, H3, H4, H5, H6
{
color: green;
}

Jika menggunakan attribute class (dalam definisi CSS).
Contoh :
P. Kanan{text-align:right}
P. Kiri{text-align:left}
Selanjutnya menulis sintak dalam dokumen html menggunakan
definisi diatas yaitu :
<p class=kanan>This paragraph will be right
aligned</P>
<p class=kiri> This paragraph will be left
aligned</p>

Jika menggunakan ID atribut
#Kanan {text-align: right}
Berikut ini sintak yang ditulis dalam dokumen html
menggunakan definisi atribut di atas.
Contoh :
<p id=kanan>This paragraph will be right
aligned</P>
<H3 id=kanan> This paragraph will be
right aligned too</P>

• File disimpan dalam sebuah file yang
berekstension .css, dan dalam pendefinisian
eksternal tidak diperlukan tag html.
Contoh :
body {background-color: yellow}
h1 {font-size: 36pt}
h2{color: blue}
p{margin-left: 50px}
(simpan file tersebut dengan nama ex1.css)

• Kemudian ketik file HTMLnya

<html>
<head>
<link rel =”stylesheet” type =”text/css” href=”ex1.css”>
</head>
<body>
<h1> This Header is 36 pt <h1>
<h2> This Header is Blue</h2>
<p> This paragraph has a left margin of 50 pixels</p>
</body>
</html>

Style sheet intermal biasanya
dilakukan karena web page
tertentu bersifat sangat unik
sehingga membutuhkan definisi
terpisah dibandingkan web page
lainnya.

Contoh :

<html>
<head>
<style type=“text/css”>
Body {background-image: url (“../picture/backgrnd.gif”)}
HR {color:sienna}
P { font-size:11pt; margin-left:15px}
</style>
</head>
<body>
<p> This paragraph has left margin of 15 pixel and font size
11 pt</p>
</body>
</html>

Suatu style inline hanya bisa digunakan pada lokasi yang
sangat spesifik, sebenarnya penggunaan ini tidak dianjurkan
karena dokumen menjadi lebih besar karena style
didefinisikan satu persatu. Contoh :
<!—coba_cssinline.html-->
<html>
<head>
</head>
<body>
<p style=“color: sienna; margin-left: 20px”>
This paragraph has inline style</p>
</body>
</html>

Jika digunakan lebih dari definisi dari style sheet maka
nilai yang tidak didefinisikan akan diinherit
(diturunkan) dari style yang lebih general.
Contoh :
H3
{
color: red;
text-align: left;
font-size: 8pt
}

<!—coba_cssmulti.html-->
<html>
<head>
<link rel =“stylesheet” type=“text/css” href=“ex3.css”>
<style type+”text/css”>
H3
{
text-align: right;
font-size: 20pt
}
</style>
</head>
</body>
<h3> This Header Inherit Font Color From ex3.css</h3>
</body>
</html>

CARA PERTAMA :
mengetikkan langsung dalam tag html sebagai atribut .
<body>
<b style = “color : blue”> teks tebal dan biru </b>
</body>

CARA KEDUA :
Menggunakan tag style di dalam tag head.
<head>
<style type=“text/css”>
……… style definitions ………
</style>
</head>

Style definitions : adalah defenisi style yang ingin dibuat.
Format penulisannya adalah :
Selector adalah tag yang digunakan web browser.
Property
value adalah efek dari style yang diinginkan untuk selector.
Selector { property1 : value1 ;
property2 : value2;….
propertyN : valueN ; }

 CARA KETIGA :
Menyimpan informasi style ke dalam sebuah file dengan ekstensi/type file
css
Memanggil file css dalam html dengan tag link yang diletakkan dalam tag
head.
<head>
<link rel=“stylesheet” type=“text/css” href=“namafile.css”/>
</head>

Contoh :
•<style type=“text/css” >
• hr { color : red ; height : 5px ; width : 50%; }
•</style>
•Keterangan :
•Tag adalah style
•Atribut adalah type=“text/css”
•Selector adalah hr
•Property adalah color, height, width
•Value adalah red, 5px, 50%

∞ID selector didefenisikan sendiri
∞ID selector diawali tanda # ( octothorpe)
∞CLASS diawali dengan tanda titik ( . )

Pemograman Berbasis Web Cascading Style Sheets

Pemograman Berbasis Web Cascading Style Sheets

More Related Content

What's hot

Similar to Pemograman Berbasis Web Cascading Style Sheets

More from Isna Dwi Setianingsih

Pemograman Berbasis Web Cascading Style Sheets