Cascading Style Sheets. Defines the presentation of one or more web pages Similar to a template Can control the appearance of an entire web site giving

Cascading Style Sheets


• Defines the presentation of one or more web pages

• Similar to a template

• Can control the appearance of an entire web site giving a consistent look

• Allow mass changes to entire site by changing the style


• Multiple sheets can influence a single page

• Sheets can cascade effects to other sheets, each adding new features

• Complete specification can be downloaded at:WWW.W3.ORG

Types of Styles

• Inline Styles– Styles are added directly to the HTML tag

• Global Styles– Style is applied to the entire HTML document

• External Style Sheet– Styles are kept in a separate document with

the .CSS extension– Multiple pages can share the style sheet

Inline Styles

• A style can be specified directly on an HTML tag without referring to a separate style sheet

<P style="color: red"> this approach allows use of the expanded parameters of a style not usually associated with an

HTML tag </P>

Global Style Definition

• To hide from older browsers that don’t support, enclose in a comment tag:<style type=“text/css”><! - -

style sheet rules here

- - ></style>

Style Rules

• Style is a collection of rules• Rules have the syntax:

selector { styles }

• Selector is the tag to be modified– example <P>

• Styles are the properties that are being specified – example COLOR

Example Change all paragraphs to be blue and be italicized

<HTML><style type=“text/css”>P { color: blue; font-style: italic }</style>

This is a demo of a style.<P> All paragraphs will now have blue,

italics</P><P> It affects the entire document </P></HTML>

Selectors

• Type Selectors– Identify the entire class of HTML tags to be

modified

• Id Selectors– Identify a name that can be used to specify

selectively which HTML tags are modified

Selectors

• Context Selectors– Identifies HTML tags to be modified within the

context of other HTML tags

• Class Selectors– Creates a class that various HTML tags can

belong to based on the CLASS parameter

Type Selector

• Example: Change Ordered and Unordered List Items to use italics and bold

<style type=“text/css”>UL, OL { font-style: italic; font-weight:

bold}</style>

ID Selector

<style type=“text/css”>#MyParaA { font-style: italic; font-weight:

bold}#MyParaB { color: red}</style><P id= “MyParaA” > </P><P id= “MyParaB” > </P>

Context Selector

<style type=“text/css”>UL LI { color: red}OL LI { color: blue }</style>

• Line items in an unordered list will be red

• Line items in an ordered list will be blue

Class Selector

<style type=“text/css”>.MyClass { font-style: italic; font-weight:

bold}.MyRedClass { color: red}</style><P CLASS= MyRedClass > </P><P CLASS= MyClass > </P><TABLE CLASS=MyRedClass><TD CLASS=MyClass> </TD> ...

Combination Selector

<style type=“text/css”>LI.MyRedClass { color: red}</style><OL ><LI CLASS= MyRedClass > this will only

affect the LI tags that use this class<LI> this won’t be part of the class</OL>• Other type tags using the class won’t be affected

<div> and <span>

• Create an area on the HTML page that can cover multiple tags

• A <div> is separated from adjacent areas by a line break

• A <span> can be in the middle of text

• Both can be modified by styles

<SPAN>

<style type=“text/css”>span { color: red}</style>this is before the span <span> this is

inside the span <P> other tags can be inside a span</P>

this is still inside the span</span> this is after the span

<DIV>

<style type=“text/css”>div { color: red}</style>this is before the div <div> this is inside

the div <P> other tags can be inside a div</P>

this is still in the div</div> this is after the span and will be

separated by a line break

Parent Styles are Inherited by Children

<BODY>

<P><TABLE>

<TR>

<TD>

<OL>

<LI>

•Children’s styles will override their parents

Styles In Separate Documents

• Allows multiple HTML pages to share

<LINK REL=“STYLESHEET” HREF=styleSheetURL>

• Place inside <HEAD> </HEAD> tags

• URL should refer to a file with an extension of .CSS

Styles In Separate Documents

• CSS document contains only the definitions of the style rules ( i.e. no <STYLE> tags)

P { color:red }

Linking with @import

• Alternative method to reference external style sheet

• Microsoft Extension• CSS can include styles from another CSS

<STYLE>

@import url(stylesheet.css)

additional styles

</STYLE>

Style Precedence

• Inline Style Overrides Global Style

• Global Style Overrides External Style Sheet

• Style Sheets that Reference Other Style Sheets Override the Referenced Sheets

• Anything Not Specified Defaults to the Browser Settings

Absolute Positioning

• Styles can be used to positioning an element on a page in an exact position, instead of the normal “flow” of HTML

• POSITION: absolute• TOP: top of element• LEFT: left edge of element• Z-INDEX: Layer effect -- higher indexes

appear in front lower indexes

Absolute Positioning

style="POSITION: absolute; LEFT: 127px; TOP: 253px; Z-INDEX: 100”

• This style would place the element’s upper left corner 252pixels from the top, and 127 pixels from the left edge of the window.

• It would appear on top of any other element in the same location with an index < 100