CSS Cascading Style Sheets

AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC

CSS

Cascading Style Sheets


CSS

Define style, look and presentation of the website content

The way the content is presented on the page is

determined in presentation rules in a style sheet

layout

background

fonts

margins


CSS

HTML

is used to create logical structure of the content

CSS is used to style the structured content


Styles

Externalreside in a separate style sheet file (.css)

Internallocated inside individual page within <style> tags inside the document’s <head>

Inlinelocated within HTML tags themselves and only apply to the content of that tag


Style rules Cascade

There are rules to determine which style takes precedence while multiple styles can cover a single element of the page.

When style rules conflict, the laws of the cascade determine how the conflict is settled.

The order of the cascade

1. External

2. Internal

3. Inline


Style rules Cascade

The closer a rule to the element getting styled, the more power the rule has in the battle of conflicting style rules.

The order of the cascade

1. External

2. Internal

3. Inline


Creating CSS

A style rule begins with a selector.

Selector can be a

tagclassid


Creating a style rule for a tag

Redefining the style for a tag gives considerable control, as HTML has a tag for nearly any type of text you need to format.

<body>


DW CSS categories

Type

Background

Block

Box

Border

List

Positioning

Extensions


Creating a Custom class

Style rule for something that does not have tag as a label.

Custom name for a style when you create a class.

.myclassDo not create classes for something that has a logical tag, like heading <h1, h2, h3, etc>

You can simply redefine one of the heading tags.

HTML is used to create logical structure of the contentCSS used to style the structured content



Class is reusable

Many different elements on a page can be assigned to the same class

Class has a name

A period (.) precedes a class selector

Named elements can be targeted with CSS rules



Class style rule must be applied to the document


Creating advanced selectors (IDs, pseudo-class selectors)

An ID can only be used once per page

IDs are unique

Used in addition to CSS rules

A hash or pound sign (#) precedes an id selector.

#subnav


Creating advanced selectors (IDs, pseudo-class selectors)

ID is another method for assigning names

ID style rule must be applied to the document


Pseudo-class selectors

Names so because pseudo-states don’t actually exist in the document

The user must do something to trigger the pseudo-class,such as

Visit a link

Hover over a link

Browse over a visited link


Pseudo-class selectors L-V-H-A order

LoVeHAte

A: linkA: visitedA: hoverA: active


Verification of styles

Previewing in a variety of browsers and browser versions

Sometimes the style rules conflict and you get enexpected results


CSS for layout

Box model

DIV

division


CSS for layout

Box model

MarginBorderPaddingContent

CSS set rulesFor each element


CSS for layout

Position and float

Static

Relative

Inherit

Absolute

Fixed


CSS for layout

Position and float

Static

Relative

Inherit

Absolute

Fixed


CSS for layout

Float

Left

Right

None

Inherit


CSS for layout

Elements in HTML can nest.

Inside the body tag might be a div (division) named content with a div named newitem nested inside.

Each of these nested elements exist in a parent-child relationship that allows CSS properties to be inherited.

The child elements are descendants of the parent and inherit properties from them.

CSS Cascading Style Sheets

Documents