Cascade Style Sheet (CSS)

(1)

Cascade Style Sheet

(CSS)

Pemrograman Internet Part 3

11/09/2012

• Apa itu CSS ? Style sheet ? Cascade ? • Kegunaan CSS ?

• Kenapa tidak menggunakan font <tag> ?

11/09/2012

Intro Font <tag>

• <font></font> is used to control text. • The <font> tag specifies the font face, font

size, and font color of text. • Attributes:

– Color: 16 English colors,16 million RGB colors – Size: 1 is largest, 7 is smallest, +/- is relative – Face: What everyone else calls a font

Font <tag>

• <font size=1 color=red>Gives this</font> • <font size=7 color=blue>Gives this</font> • Text <font size=“+3”>more</font> back again • <font face=“Courier”>--** IF **-- that font is

on the end user’s computer!</font>

• Personally, I have found the +/- and face to be useless. Size and color are all you need. If you want to get fancy, learn CSS.

(2)

How about font <tag> ?

• If you've read many other Web pages, you may have read that the <font> tag has been deprecated.

• The <font> element is deprecated in HTML

4.01. (http://www.w3schools.com)

11/09/2012

• This means that the tag is no longer a part of the HTML specification.

• While browsers will still support it, most likely for a long time, it's a good idea to switch to the alternative.

11/09/2012

• The proper, modern way to set the size of the text displayed in a Web page is to use Cascading Style Sheets.

• This is strongly recommended over the use of <font> tags in HTML, because CSS is more flexible, easier to maintain and saves bandwidth.

• (http://www.w3.org/)

CSS

• CSS adalah standar pembuatan dan pemakaian style (font, warna, jarak baris, dll) untuk dokumen

terstruktur

• CSS memisahkan presentation sebuah dokumen dari

content dokumen itu sendiri

• CSS memudahkan pembuatan dan pemeliharaan dokumen web

• Setiap User Agent mempunyai default style sheet Pendefinisian rule CSS pada sebuah dokumen akan menimpa rule pada default style sheet

• Spesifikasi CSS1, http://www.w3.org/TR/REC-CSS1 • Spesifikasi CSS2, http://www.w3.org/TR/REC-CSS2

(3)

• Multiple style sheets can be applied for the same HTML document

• Style sheet one

– h1 { color: #ff0000 }

• Style sheet two

– h1 { font-size: 14px }

• You end up with

– h1 { color: #ff0000; font-size: 14px; }

• This is called Cascading

Cascading

Types of Style Sheets

• Included into a web page in 3 ways

– External style sheet (best) – Internal style sheet (not as good)

– Inline style (basically breaking the purpose of CSS)

• Style sheets will cascade, or overwrite similar styles to create one master set of styles

– Inline overwrites internal, which overwrites external, which overwrites browser default

11/09/2012

Adding CSS

• There are several ways to include styles

– External style sheet (saved as a .css file) – Internal style sheet (inside the <head> tag) – Inline style (inside an HTML element)

Inline Style Sheet

• In the HTML Tag

• Can use multiple styles in a single tag

• <p style="color: blue; margin-left: 20px"> This is a paragraph </p>

• No real advantage to using this. It is like using the attributes of a tag.

• Use if want to change a tag from what is being set by a previous style

(4)

Internal Style Sheet

• In the Head Tag

– <head>

• Used to provide style for a particular page • Will override external style if you want one page to

look different from the rest of the site

11/09/2012

Font – Using Internal Style

• To change fonts use the style tag in the head of your webpage <html> <head><title>Style</title> <style type=“text/css”> body {font-family:Arial} </style> </head> 11/09/2012

Colours – Using Internal Style

<style type=“text/css”> body {font-family:Arial} body {color:black} body {background-color:yellow} h1 {color:red} h2 {color:blue} h3 {color:green} </style>

Activity: Write style to make:

• H1 yellow and Arial

• All other text silver and "Comic Sans MS " • Background navy colour

(5)

Answer

<style type=“text/css”>

body {font-family:"Comic Sans MS"} body {color:silver} body {background-color:navy} h1 {color:yellow} h1 {font-family:Arial} </style> 11/09/2012

External Style Sheet

• The web pages link to an external style sheet by using the <link> tag

• <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

• If all the pages link to mystyle.css then a change to this file updates the whole site

• Can write the style sheet in any text editor, for example notepad

• Must save with the .css extension

11/09/2012

CSS File

• Does not contain html tags • Is a text file

• Must be saved as .css • Example

body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px}

Examples: Inline, Internal, External

External

body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px}

Internal

Inline

(6)

Syntax

Selector biasanya adalah HTML element yang ingin dibuat

style nya.

Declaration merupakan isi dari property dan nilai dari CSS.

Pemberian nilai dari property digunakan tkita titik dua ( : ), akhir dari property digunakan tkita semicolon ( ; ).

11/09/2012

CSS Syntax

• Secara umum dibagi menjadi 3 bagian yaitu :

1. Selector (elemen yang akan didefinisikan) 2. Properti (atribut yang akan diubah) 3. Nilai/Value

Selector { property: value }

• Example

• H1 { font-size: 14pt; font-style: italic;color: green; }

11/09/2012

Inheritance

• When you nest one element inside another, the nested element will inherit the properties assigned to the containing element.

• In the given example, Table Tag is nested in the Body Tag

• The font declared in the body will be inherited by all text in the table no matter the containing element, unless you declare another font for the table.

<BODY> {font-family: Verdana, serif;} <TABLE> </TABLE> </BODY>

CSS – Order of Precedence

• If more than one style is used the following

order of importance is applied:

– Browser default – External style sheet

– Internal style sheet (inside the <head> tag) – Inline style (inside an HTML element)

(7)

CSS Syntax

• The syntax is made up of the following components

– selector {property: value} – body {color: black}

• Property and value separated by : • Property and value must be in { }

• p {font-family: "sans serif"} – in this case the value is multiple words, must use “ ”

11/09/2012

Combining Selectors

• You can combine elements within one selector in the following fashion.

h1, h2, h3, h4, h5, h6 {

color: #009900;

font-family: Georgia, sans-serif;

}

11/09/2012

CSS Comment

Komentar digunakan untuk menjelaskan kode kita, dan dapat membantu kita ketika kita mengedit source code di kemudian hari. Komentar diabaikan oleh browser. Sebuah komentar CSS diawali dengan "/*", dan diakhiri dengan "*/", seperti ini :

/*This is a comment*/ p

{

text-align:center; /*This is another comment*/ color:black;

font-family:arial; }

CSS ID dan Class

CSS Id

Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik. Id

pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan "#“. Aturan style bawah ini akan diterapkan pada elemen dengan id = "para1":

#para1 {

text-align:center; color:red; }

Deklarasi dalam dokumen HTML : <p id="para1"> This is paragraf with style </p>

(8)

CSS ID dan Class

CSS Class

Selector Class digunakan untuk menentukan style untuk sekelompok elemen. Berbeda

dengan selector id, selector class yang paling sering digunakan pada beberapa elemen. Hal ini memungkinkan kita untuk menetapkan style tertentu untuk setiap elemen HTML dengan kelas yang sama.

Selector Class menggunakan atribut class HTML, dan didefinisikan dengan "." Pada contoh di bawah ini, semua elemen HTML dengan class = "center"akan dibuat rata tengah :

.center {text-align:center;}

kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang dipengaruhi oleh kelas.

Pada contoh di bawah, elemen p semua dengan class = "center"akan di buat rata tengah :

p.center {text-align:center;}

<p class=“center”>Paragraf ini berada di tengah</p>

JANGAN memulai nama kelas dengan angka! Ini hanya didukung di Internet Explorer.

11/09/2012 30

Elemen-elemen CSS

• Font • Text • Color • Link

Font

Digunakan untuk mengatur tingkah-laku huruf (font). Elemen ini mempunyai beberapa properti. Satu properti dapat mempunyai beberapa nilai.

Text

Element text akan membuat tampilan teks menjadi lebih menarik

(9)

33

Color

Elemen color yang digunakan untuk mengatur warna teks dan background halaman web

34

Link

Digunakan sebagai penghubung sehingga dapat digunakan untuk berpindah dari satu bagian ke bagian lain, dari satu halaman ke halaman lain bahkan dari satu situs ke situs lainnya. CSS menyediakan elemen link yang dapat digunakan untuk mengatur perilaku link.

• A:link  untuk link normal yang belum dikunjungi, belum diklik.

• A:visited  untuk link yang telah dikunjungi. • A:active  untuk link aktif. Link aktif adalah

link yang halaman tujuannya sedang ditampilkan oleh web browser. • A:hover  untuk link yang hover. Saat mouse

digerakkan atau mouse over di atas suatu link, kondisi ini disebut link hover.

Summary

• CSS (Cascading Style Sheet) digunakan untuk memformat atau membuat layout halaman web menjadi lebih menarik dan mudah dikelola.

• Ada 3 mekanisme untuk mengaplikasikan CSS, yaitu: – External style sheet (saved as a .css file) – Internal style sheet (inside the <head> tag) – Inline style (inside an HTML element)

Class example

• <HTML> • <HEAD>

• <STYLE TYPE="text/css"> • .tanya {color: red} • .jawab {color: blue} • </STYLE> • </HEAD> • <BODY> • <P CLASS="tanya">

• P: Mengapa jika kita anggap suatu pekerjaan itu mudah • maka pekerjaan itu akan beneran menjadi lebih mudah? • <P CLASS="jawab">

• J: Karena itu merupakan <FONT CLASS="tanya">sugesti</FONT> • terhadap diri kita sendiri

• </BODY> • </HTML>

(10)

Homework

• Create a html page that uses an inline style – save this in inline.html

• Create a html page that uses an internal style – save as internal.html

• Create a css file using notepad create styles for background color, paragraphs, headings, links etc – save as test.css

• Create 2 web pages – make them use the external style sheet – test.css

• Kumpul hari ini sblm jam 12 siang bsok (12 September 2012)

• Ke email : [email protected]

• Subject : nama_nim_kelas_tgsCSS • Nama file : nim_CSS (zip/rar)