Wk 7 Ses 12 Slides 1-20 Introduction to CSS

H0073

Introduction to CSS * Property of STI

of 20

HTML Today

Excess bandwidth...

Tables (and nested tables and spacer gifs)

control layout.

Extended <FONT> tags control textual

formatting in each and every table cell.

Wastes the user’s time

Costs too much

If a site reduces its markup weight by 35%,

it reduces its bandwidth costs by the same

amount.

H0073


of 20

What CSS Offers?

CSS allows you to:

achieve a new level of fine-grain control

over Web design

easily apply the same consistent look and

feel to any number of pages

control the layout of your pages down to the

pixel

specify exactly how fonts should be

rendered

create simple rollover effects that don't

require any programming

H0073


of 20

What is CSS?

Cascading Style Sheets (CSS) - a simple

mechanism for adding style (e.g. fonts, colors,

spacing) to Web documents.

Standard presentation languages: CSS – Style

sheets:

separate presentation from structure and

behavior

for (variously capable) browsers

for printers – no more printer friendly page

for alternative receiving devices

is backward compatible

is orthogonal to other features

builds on the philosophy of the Web

alleviates a widely felt weakness of prior

Web technology

H0073


of 20

CSS & Accessibility

How Style Sheets Benefit Accessibility

primarily by separating document structure from

presentation

allows precise control over spacing, alignment

and positioning

style sheets can help reduce image misuse

provides precise control over font size, color,

and style

allows users to override author styles

provides support for automatically generated

numbers, markers, and other content

supports aural style sheets

provides more precise control over the display

of alternative content than HTML alone

H0073


of 20

What does CSS require?

It conforms to the CSS specification if it:

attempts to fetch all referenced style sheets

and parse them according to this

specification

sorts the declarations according to the

cascading order

implements the CSS functionality within the

constraints of the presentation medium

H0073


of 20

What are Style Sheets?

Style Sheet

also known as Cascading Style Sheets or

CSS

can be defined in an external file attached in the

HTML document.

Style sheets describe how documents are

presented on screens, in print, or perhaps how

they are pronounced.

H0073


of 20

What can you specify with CSS?

Character format

Font, size, weight, colour, case, underlines

Paragraph format

Letter/word spacing, line height, alignment,

justification, margins and indentation

Page Element Positioning

Absolute and relative positioning/layering of

all document objects

Background colours/images for everything,

automatic rollovers and filters in IE4+ and more

besides…

H0073


of 20

How Cascading Style sheets Work

<EM><FONT FACE=“Arial”

COLOR="green"><H3>This is a green,

italic, Arial H3

header.</H3></FONT></EM>

CSS lets you specify this style for all <H3> tags

in a single step by defining a selector:

H3 { font-family: Arial; font-

style: italic; color: green }

The selector (in this case, the <H3> element) is

followed by the style definition, which outlines

the style for that selector.

<H3>This is a green, italic, Arial

H3 header.</H3>

H0073


of 20

Style Sheet Components

CSS are a series of RULES composed of

SELECTOR

PROPERTY

VALUE

Give each selector a style definition

H3 { font-family: Arial }

selector

property

value

H0073


of 20

Writing the rULeS…

selector {property: value;}

{property: value;} = DECLARATION

selector {property: value;} = RULE

H3 { font-family: Arial }

selector

property

value

DECLARATION

RULE

H0073


of 20

Selectors and Properties

SELECTOR is a string that identifies what

elements the corresponding rule is applied to.

H1, H2, H3 {property: value;}

OR

H1 {property: value;}



CSS rule will be ignored if you get the selector

property relationship wrong.

Property is an identifier.

Proper selector property association:

H1, H2, H3 {property: value;}

H0073


of 20

Common Properties

Property Description

background sets the background color for the

text

color sets the color for the text

font-

familysets the font type for the text

font-size

sets the size for the font and can

be measured in points or a

percentage of another tag, or xx-

small to xx-large

font-stylenormal or italic – normal is the

default

font-

weightextra-light to extra-bold

text-align left, right, center, or justify

text-

indent

indent from margins and is

measured as a fixed size or

percentage

text-

decoration

none, underline, overline,

strikethrough

H0073


of 20

Values

Units of Measure

Space separated list of words or numbers -

#000066 for the colour Oxford Blue.

Length Units <length>

Font size: points, pixels, inches, or centimeter

or percentage

Color Units: <color> can be color name or

RGB values

H1, H2, H3 {color: black;}

H0073


of 20

Length Units

Integer or a decimal fraction , can be preceded

by + or –.

Can be absolute or relative:

Relative length units

em: the size of the font

px: pixel is a relative-length

measurement

ex: the “x-height” of the font, usually set

to the height of a lowercase x

Percentages

E.g. margin-left: 10%

Absolute-length measurements

in: inches

cm: centimeters

mm: millimeters

pt: points (1 pt = 1/72 in)

pc: picas (1 pc = 12 pt)

H0073


of 20

Relative Units

It specifies a length relative to another length

property.

Relative unites below are supported:

H1 { margin: 0.5em }

/* ems, the height of the element's font */

H1 { margin: 1ex }

/* x-height, ~ the height of the letter 'x' */

P { font-size: 12px }

/* pixels, relative to canvas */

Child elements inherit the computed value, not

the relative value:

BODY

{

font-size: 12pt;

text-indent: 3em; /* i.e. 36pt

*/

}

H1 { font-size: 15pt }

H0073


of 20

Absolute Units

Absolute length units are only useful when the

physical properties of the output medium are

known.

Absolute units below are supported:

H1 { margin: 0.5in }

/* inches, 1in = 2.54cm */

H2 { line-height: 3cm }

/* centimeters */

H3 { word-spacing: 4mm }

/* millimeters */

H4 { font-size: 12pt }

/* points, 1pt = 1/72 in */

H4 { font-size: 1pc }

/* picas, 1pc = 12pt */

H0073


of 20

Absolute and Relative Style Example

<STYLE TYPE="text/css">

.note { font-size: 9pt }

<!- Absolute -->

</STYLE>

<BODY>

<P>Thanks for visiting my Web site.

I hope you enjoy it. </P>

<P CLASS="note">

Please Note: This site will be

moving soon. Please check

periodically for updates.

</P>

</BODY>

<STYLE TYPE="text/css">

.note2 { font-size: .75em } <!-

Relative -->

</STYLE>

H0073


of 20

Percentage Units

It is a number specified in <percentage>

immediately followed with “%” symbol.

P { line-height: 120% }

/* 120% of the element's 'font-size' */

H0073


of 20

Color Units

A color is a either a keyword or a numerical

RGB specification.

The RGB color model is being used in

numerical color specifications.

Examples below specify same color:

EM { color: #f00 }

/* #rgb */

EM { color: #ff0000 }

/*#rrggbb */

EM { color: rgb(255,0,0) }

/* integer range 0 - 255 */

EM { color: rgb(100%, 0%, 0%) }

/* float range 0.0% - 100.0% */

H0073


of 20

URL Value

A Uniform Resource Locator (URL) is identified

with a functional notation:

BODY {

background:url(http://www.bg.com/

pinkish.gif) }

Parentheses, commas, whitespace characters, single quotes (') and double quotes (")

appearing in a URL must be escaped with a backslash: '\(', '\)', '\,'.

Wk 7 Ses 12 Slides 1-20 Introduction to CSS

Documents

Transcript of Wk 7 Ses 12 Slides 1-20 Introduction to CSS