5 pemrograman internet css

Cascading Style Sheet Cara Efisien bikin Desain

Toni Tegar Sahidi [email protected]

STT Stikma Internasional, Malang

CSS OVERVIEW #1 Apa sih CSS tu? #2 Ngapain pakai CSS? #3 Konsep Dasar CSS..? #4 Selector

#1 Apa sih CSS?

1/6

CSS memberitahu browser

bagaimana me-render sebuah

elemen HTML!

CSS Styles ditambahkan ke

HTML 4.0 untuk menyelesaikan

masalah.

Tanpa CSS

<h2>sebuah judul</h2>

(tanpa CSS) misal ingin diberi warna biru

<font color="blue"> <h2>sebuah judul</h2>

</font>

Dengan CSS

misal didefinisikan kode CSS berikut

h2 { color:blue; }

<h2>sebuah judul</h2>

#2 Ngapain pakai

CSS?

1/6

untuk memisahkan Konten dengan Style / Cara

Menampilkan (Presentation)

memudahkan me-manage tampilan website

Kenapa?

HTML sebenarnya tidak pernah dimaksudkan untuk

mengandung tag formatting untuk dokumen

HTML sebenarnya bertujuan untuk mendefinisikan konten

dari dokumen

<h1>This is a heading</h1> <p>This is a paragraph.</p>

Ketika tag <font> diperkenalkan di HTML 3.2

MIMPI BURUK WEB DEVELOPER!!

Pendefinisian font dan warna yang banyak harus ditambahkan

di SETIAP halaman website.

website kecil tak masalah... Website BESAAAAR?

Itulah kenapa W3C mengenalkan CSS

pada HTML 4.0*

Sekarang sudah HTML 5!

Sejak itu, semua formatting dapat dilepaskan dari dokumen

HTML dan diletakkan di file yang berbeda*.

*di file yang sama pun bisa saja, tapi not recommended

http://www.w3schools.com/css/demo_default.htm

#3 SINTAKS CSS

2/5

h2 { color:blue; margin : 1em; }

selector

Select / memilih elemen dalam

dokumen HTML yang akan

diaplikasikan style (di

desain/diformat)

h2 { color:blue; margin : 1em; }

h2 adalah selector

declaration

Memberi tahu browser bagaimana

menampilkan elemen

h2 { color:blue; declaration

margin : 1em; }

h2 { color:blue;

margin : 1em; declaration

}

property & value

Property adalah style attribute

(sifat elemen) yang ingin Anda

ganti. Setiap property memiliki nilai

(value).

h2 { color : blue; margin : 1em; }

*color dan margin adalah property

h2 { color : blue; margin : 1em; }

*blue dan 1em adalah value

#3 TIGA TIPE CSS

2/5

#BROWSER Style Sheet #USER Style Sheet #AUTHOR Style Sheet

#1 BROWSER Style Sheet

Tampilan default yang diberikan

oleh Web Browser kepada kita.

#2 USER Style Sheet

Beberapa browser memungkinkan

kita untuk men-setting sendiri

tampilan default kita.

#3 AUTHOR Style Sheet

Style Sheet yang didefinisikan oleh

web developer untuk pengunjung

situs.

Author Style Sheet dibuat oleh kita (Web Developer)

#3 AUTHOR

STYLE SHEET

2/5

Ada 3 Metode untuk Mengaplikasikan Author Style Sheet

#1 Inline Style #2 Header Style

#3 External File Style

<h2 style=“color:red;”> Sebuah Judul</h2>

diletakkan di HTML elemennya

<html> <head> <title>CSS Session</title> <style type="text/css"> h2 { color:blue; } </style> </head> <body> <h2>sebuah judul</h2> </body> </html>

<head> <title>CSS Session</title> <link href=“MyStyle.css" rel="stylesheet" type="text/css" /> </head>

#4 Selector

1/6

memilih Elemen mana yang akan di-terapkan style CSS

ADA 3 #element #class #id

element

<body> <h2>Kucing Kami... </h2> </body>

body{ background:#ff7865; }

untuk men-select semua yang sekelas/sejenis

<h2>Kucing Kami... </h2> <img src="kucing.jpg" alt="kucing kami" title="miauuw" /> </br> <img class="comment" src="kucing.jpg" alt="kucing kami" title="miauuw" />

img.comment{ width:100px; }

self Learning CSS dengan id

next session

MeLayout website dengan CSS

JavaScript

PHP?

5 pemrograman internet css

Education