CSS Pertemuan 12 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.

CSSPertemuan 12

Matakuliah : L0182 / Web & Animation Design

Tahun : 2008

Bina Nusantara

Learning Outcomes

Pada akhir pertemuan ini, diharapkan mahasiswa akan

mampu :• Membuat Web sederhana dengan menggunakan CSS

Bina Nusantara

Outline Materi

• 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

CSS

• 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.

– 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

CSS (cont..)

– 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

Bina Nusantara

Creating an Internal Style Sheet

• 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

Creating an Internal Style Sheet (cont..)

Bina Nusantara

Creating an External Style Sheet

• 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

Creating an External Style Sheet (cont..)

• The .css file

• The .html file

Bina Nusantara

The Class Selector

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

Bina Nusantara

The Id Selector

• 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

Defining Styles for Links

• 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

Formatting Text with Styles

Property Description

font-family: familyname 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: sizept, e.g., 12pt To set the font size

line-height: sizept, e.g., 12pt To set the line height

color: #rrggbb To set the text color

background: #rrggbb To set the text background

text-align: left/right/center/justify To align text

text-decoration: underline/overline/line-through/blink/none

To underline/overline/line-through/blink text

Bina Nusantara

Layout with StylesProperty Description

height: size, e.g., 200 Setting the element’s height

width: size, e.g., 200 Setting the element’s width

border-top/bottom/left/right: thin/medium/thick or sizepx

Setting the border

padding-top/bottom/left/right: size, e.g., 10

Adding padding around the element

margin-top/bottom/left/right: size, e.g., 10

Setting the margins around an element

Vertical-align: baseline/middle/sub/super/text-top/text-bottom/top/bottom

Aligning elements vertically

Bina Nusantara

CSS Comments

• 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

The Advantages of Using Style Sheets

• 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

CSS Pertemuan 12 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.

Documents

Transcript of CSS Pertemuan 12 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.