Matakuliah : L0182 / Web & Animation Design
Tahun : 2008

Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu :
• Membuat Web sederhana dengan menggunakan CSS
Bina Nusantara

• Definition
• Creating an Internal Style Sheet
• Creating an External Style Sheet
• The Class Selector
• The Id Selector
• Defining Styles for Links
• Formatting Text with Styles
• Layout with Styles
• CSS Comments
• The Advantages of Using Style Sheets
Bina Nusantara

• Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
• Syntax :
– The CSS syntax is made up of three parts : a selector, a property and a value.
Bina Nusantara
– The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value.

Bina Nusantara
– Example :
 Body element will be displayed in black text color
 If the value is multiple words, put quotes around the value
 If you wish to specify more than one property, you must separate each property with a semicolon.
 You can group selectors. All header elements will be displayed in green text color

• Internal style sheets are ideal for individual pages with lots of text. They let you set the styles at the top of your page that should be used throughout an HTML document
– At the top of your HTML document, between the < head > and
< /head > tags, type < style >
– Type the name of the tag and properties you wish to define
– Type < /style >
Bina Nusantara

Bina Nusantara


• External style sheets are ideal for giving all the pages on your Web site a common look. If you plan to apply the style sheet to more than one page, you’re better off using external style sheets.
– Create a new text document
– Type the name of the tag and properties you wish to define
– Save the style sheet as Text Only and give it the .css
extension.
• To use an external style sheet :
– In the head section of each and every HTML page in which you wish to use the style sheet, type <link rel=stylesheet type=“text/css” href=“url.css”>
Bina Nusantara

• The .css file
• The .html file
Bina Nusantara

• With the class selector you can define different styles for the same type of HTML element.
Bina Nusantara

• You can define styles for HTML elements with the id selector. The id selector is defined as a #.
• Instead of creating a whole class of HTML tags, you can also identify individual tags.
• Each id in an HTML document must be unique.
Bina Nusantara

• You can change the background and foreground color of your links.
• A:visited  to change the appearance of links that the visitor has already clicked
• A:active  to change the appearance of links when clicked
• A:hover  to change the appearance of links when pointed to
• Example :

Bina Nusantara

Property font-family: familyname
Description
To set the font family font-style: italic/oblique/normal To create italics/oblique/normal text font-weight: bold/normal To apply bold/normal formatting font-size: size pt, e.g., 12pt line-height: size pt, e.g., 12pt
To set the font size
To set the line height color: # rrggbb text-decoration: underline/overline/linethrough/blink/none
To set the text color background: # rrggbb To set the text background text-align: left/right/center/justify To align text
To underline/overline/linethrough/blink text
Bina Nusantara

Property height: size , e.g., 200 width: size , e.g., 200 bordertop/bottom/left/right : thin/medium/thick or size px
Description
Setting the element’s height
Setting the element’s width
Setting the border paddingtop/bottom/left/right : size , e.g., 10
Adding padding around the element margintop/bottom/left/right : size , e.g., 10
Setting the margins around an element
Vertical-align: baseline/middle/sub/super/texttop/text-bottom/top/bottom
Bina Nusantara
Aligning elements vertically

• Comments are used to explain your code, and may help you when you edit the source code at a later date.
• A comment will be ignored by browsers.
• A CSS comment begins with "/*", and ends with "*/"
Bina Nusantara

• Styles save time
• Styles are easy to change
• Computers are better at applying styles consistently than you are
• Styles let you control text in ways that are out of reach of
HTML tags
• Styles make it easy to create a common format for all your Web pages
Bina Nusantara