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

Cascading Style Sheets Multiple sheets can influence a single page Sheets can cascade effects to other sheets, each adding new features Complete specification can be downloaded at:

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 this approach allows use of the expanded parameters of a style not usually associated with an HTML tag

Global Style Definition To hide from older browsers that don’t support, enclose in a comment tag: <! - - style sheet rules here - - >

Style Rules Style is a collection of rules Rules have the syntax: selector { styles } Selector is the tag to be modified –example Styles are the properties that are being specified –example COLOR

Example Change all paragraphs to be blue and be italicized P { color: blue; font-style: italic } This is a demo of a style. All paragraphs will now have blue, italics It affects the entire document

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 UL, OL { font-style: italic; font-weight: bold}

ID Selector #MyParaA { font-style: italic; font- weight: bold} #MyParaB { color: red}

Context Selector UL LI { color: red} OL LI { color: blue } Line items in an unordered list will be red Line items in an ordered list will be blue

Class Selector.MyClass { font-style: italic; font-weight: bold}.MyRedClass { color: red}...

Combination Selector LI.MyRedClass { color: red} this will only affect the LI tags that use this class this won’t be part of the class Other type tags using the class won’t be affected

and Create an area on the HTML page that can cover multiple tags A is separated from adjacent areas by a line break A can be in the middle of text Both can be modified by styles

span { color: red} this is before the span this is inside the span other tags can be inside a span this is still inside the span this is after the span

div { color: red} this is before the div this is inside the div other tags can be inside a div this is still in the div this is after the span and will be separated by a line break

Parent Styles are Inherited by Children Children’s styles will override their parents

Styles In Separate Documents Allows multiple HTML pages to share Place inside 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 tags) P { color:red }

Linking Alternative method to reference external style sheet Microsoft Extension CSS can include styles from another url(stylesheet.css) additional styles

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