web technologies- html

Ohud92

IT230_Modified_Chapter3_Week4.ppt

Home >Computer Science homework help >web technologies- html

Chapter 3
Style Sheets:
CSS

WEB TECHNOLOGIES

A COMPUTER SCIENCE PERSPECTIVE
JEFFREY C. JACKSON

Motivation

HTML markup can be used to represent
Semantics: h1 means that an element is a top-level heading
Presentation: h1 elements look a certain way
It’s advisable to separate semantics from presentation because:
It’s easier to present documents on multiple platforms (browser, cell phone, spoken, …)
It’s easier to generate documents with consistent look
Semantic and presentation changes can be made independently of one another (division of labor)
User control of presentation is facilitated

Style Sheet Languages

Cascading Style Sheets (CSS)
Applies to (X)HTML as well as XML documents in general
Focus of this chapter
Extensible Stylesheet Language (XSL)
Often used to transform one XML document to another form, but can also add style
XSL Transformations covered in later chapter

CSS Introduction

A styled HTML document

produced by the style sheet style1.css:

CSS Introduction

link element associates style sheet with doc.

CSS Introduction

type attribute specifies style language used

CSS Introduction

href attribute provides style sheet URL

CSS Introduction

title attribute provides style sheet name

CSS Introduction

Alternative, user selectable style sheets

can be specified

CSS Introduction

A styled HTML document

produced by the style sheet style2.css:

CSS Introduction

Single document can be displayed on multiple media platforms by tailoring style sheets:

This document will be printed differently than it is displayed.

CSS Syntax

Parts of a style rule (or statement)

CSS Syntax:
Selector Strings

Single element type:

Multiple element types:

All element types:

Specific elements by id:

CSS Syntax:
Selector Strings

Single element type:

Multiple element types:

All element types:

Specific elements by id:

type selector

CSS Syntax:
Selector Strings

Single element type:

Multiple element types:

All element types:

Specific elements by id:

universal selector

CSS Syntax:
Selector Strings

Single element type:

Multiple element types:

All element types:

Specific elements by id:

ID selector

CSS Syntax:
Selector Strings

Elements belonging to a style class:

Referencing a style class in HTML:

Elements of a certain type and class:

class selector

CSS Syntax:
Selector Strings

Elements belonging to a style class:

Referencing a style class in HTML:

Elements of a certain type and class:

this span belongs to three style classes

CSS Syntax:
Selector Strings

Elements belonging to a style class:

Referencing a style class in HTML:

Elements of a certain type and class:

this rule applies only to span’s belonging to class special

CSS Syntax:
Selector Strings

Source anchor elements:

Element types that are descendents:

pseudo-classes

CSS Syntax:
Selector Strings

Source anchor elements:

Element types that are descendants:

rule applies to li element that is

CSS Syntax:
Selector Strings

Source anchor elements:

Element types that are descendants:

rule applies to li element that is

part of the content of an ol element

CSS Syntax:
Selector Strings

Source anchor elements:

Element types that are descendants:

rule applies to li element that is

part of the content of an ol element

that is part of the content of a ul element

CSS Syntax

Style rules covered thus far follow ruleset syntax
At-rule is a second type of rule

Reads style rules from specified URL
Must appear at beginning of style sheet

URL relative to style sheet URL

Style Sheets and HTML

Style sheets referenced by link HTML element are called external style sheets
Style sheets can be embedded directly in HTML document using style element

Most HTML elements have style attribute (value is list of style declarations)

CSS Rule Cascade

What if more than one style declaration applies to a property of an element?

The CSS rule cascade determines which style rule’s declaration applies

CSS Rule Cascade

User can define a style sheet
Explicitly (easy in IE)
Implicitly (preferences)
User/important highest priority in CSS2 to accommodate users with special needs
Rules made important by adding “!important”:

CSS Rule Cascade

Specificity:

style attribute
rule with selector:
ID
class/pseudo-class
descendant/element type
universal
HTML attribute

CSS Font Properties

A font family is a collection of related fonts (typically differ in size, weight, etc.)

font-family property can accept a list of families, including generic font families

first choice font

CSS Font Properties

A font family is a collection of related fonts (typically differ in size, weight, etc.)

font-family property can accept a list of families, including generic font families

second choice font

CSS Font Properties

A font family is a collection of related fonts (typically differ in size, weight, etc.)

font-family property can accept a list of families, including generic font families

generic

CSS Font Properties

Many properties, such as font-size, have a value that is a CSS length
All CSS length values except 0 need units

CSS Font Properties

Computed value

of font-size
property

CSS Font Properties

Other ways to specify value for
font-size:
Percentage (of parent font-size)
Absolute size keyword: xx-small, x-small, small, medium (initial value), large,
x-large, xx-large
User agent specific; should differ by ~ 20%
Relative size keyword: smaller, larger
Relative to parent element’s font

CSS Font Properties

font shortcut property:

CSS Font Properties

font shortcut property:

CSS Font Properties

font shortcut property:

CSS Font Properties

font shortcut property:

CSS Font Properties

font shortcut property:

CSS Font Properties

font shortcut property:

Initial values used if no value specified in font

property list

CSS Font Properties

font shortcut property:

specifying line-height

any order

size and family required,

order-dependent

CSS Text Formatting

CSS Text Color

Font color specified by color property
Two primary ways of specifying colors:
Color name: black, gray, silver, white, red, lime, blue, yellow, aqua, fuchsia, maroon, green, navy, olive, teal, purple, full list at
http://www.w3.org/TR/SVG11/types.html#ColorKeywords
red/green/blue (RGB) values

CSS Text Color

CSS Box Model

Every rendered element occupies a box:

(or inner edge)

(or outer edge)

CSS Box Model

If multiple declarations apply to a property, the last declaration overrides earlier specifications

Left border is 30px wide,

inset style, and red

Backgrounds

background-color
Specifies background color for content, padding, and border areas
Margin area is always transparent
Not inherited; initial value transparent
background-image
Specifies (using url() function) image that will be tiled over an element

Backgrounds

Normal Flow Layout

In normal flow processing, each displayed element has a corresponding box
html element box is called initial containing block and corresponds to entire document
Boxes of child elements are contained in boxes of parent
Sibling block elements are laid out one on top of the other
Sibling inline elements are one after the other

Normal Flow Layout

Block

elements

only

Normal Flow Layout

html

body

div d1

div d2

div d3

div d4

Top edges of

block boxes are

in document order

Beyond Normal Flow

CSS allows for boxes to be positioned outside the normal flow:
Relative positioning

other span’s are not affected

Beyond Normal Flow

CSS allows for boxes to be positioned outside the normal flow:
Relative positioning

Red

Yellow

Green

style rules that move span’s

away from normal-flow right edge

Beyond Normal Flow

CSS allows for boxes to be positioned outside the normal flow:
Float positioning

style rule that “floats” left

Beyond Normal Flow

CSS allows for boxes to be positioned outside the normal flow:
Float positioning

span taken out of normal

flow and “floated” to the

left of its line box

Beyond Normal Flow

CSS allows for boxes to be positioned outside the normal flow:
Absolute positioning

style rule that moves span relative to

upper left corner of containing

p element’s box

Beyond Normal Flow

CSS allows for boxes to be positioned outside the normal flow:
Absolute positioning

span’s removed from

normal flow and

positioned relative

to another box

Beyond Normal Flow

Properties used to specify positioning:
position: static (initial value), relative, or absolute
Element is positioned if this property not static
Properties left, right, top, bottom apply to positioned elements
Primary values are auto (initial value) or CSS length
float: none, left, or right
Applies to elements with static and relative positioning only

Beyond Normal Flow

Relative positioning
Specifying positive value for right property of relatively positioned box moves it to left

Red

span

containing

text moves

left

Beyond Normal Flow

Relative positioning
Specifying negative value for left property also moves box to left

Red

same

effect as

before

Beyond Normal Flow

Float positioning
Specify value for float property

Beyond Normal Flow

Float positioning
Specify value for float property

Floated element becomes a CSS block

element (e.g., can set height and width)

Beyond Normal Flow

Absolute positioning
Specify location for corner of box relative to positioned containing block

margin area

padding area

containing

block

This second paragraph has a

note.

p elements are positioned (but don’t move!)

Beyond Normal Flow

Absolute positioning
Specify location for edges of box relative to positioned containing block

Beyond Normal Flow

Absolute positioning

10em

padding top

edge

padding left

edge

Beyond Normal Flow

Absolute positioning

8em

Beyond Normal Flow

Absolutely positioned box does not affect positioning of other boxes!

Second absolutely

positioned box

obscures first

CSS Position-Related Properties

z-index: drawing order for overlaid boxes (largest number drawn last)

CSS Position-Related Properties

display: value none means that element and its descendants are not rendered and do not affect normal flow
visibility: value hidden (initial value is visible) means that element and its descendants are not rendered but still do affect normal flow