Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 5: Cascading Style Sheets

History Used to separate data and presentation 1996 – CSS – CSS 2.0 Current – CSS About CSS 2.1 contains 115 presentation properties Slight variation between browsers

CSS Syntax Syntax: STYLE = SELECTOR { RULES } RULES = PROPERTY;PROPERTY;…;PROPERTY; PROPERTY = NAME:VALUE Example: p { color:red; background-color:black; }

CSS Syntax A style is a list of properties that can be applied to one or more HTML elements to change the way the element is presented or rendered A selector defines what HTML elements a style affects A rule is a list of properties separated by a semicolon A property is a value that can be altered to change the way an HTML element is presented

The HTML STYLE Attribute All HTML elements have the STYLE attribute, for which we can apply one or more CSS style rules to these elements (inline style)STYLE attribute To specify a single style rule: STYLE="CSS style rule;" To specify multiple style rules, separate your rules with a semicolon STYLE="CSS style rule 1;CSS style rule 2;“ The last semicolon is optional

The HTML STYLE Attribute Examples: This is red text. This is red text over a black background.

Color and Backgrounds color background-color background-image background-repeat background-position background-attachment

Internal Style Sheets Styles are defined in same document, but in the HEAD section using the STYLE elementSTYLE element Example: Example p { color:#0000FF; }

External Style Sheets An external stylesheet contains styles that are defined in another documentexternal stylesheet There are three types of external stylesheets Permanent Define HREF, REL and TYPE attributes REL="stylesheet" Persistent Define HREF, REL, TYPE and TITLE attributes REL="stylesheet" Alternate Define HREF, REL, TYPE and TITLE attributes REL="alternate stylesheet"

External Stylesheets External sheets are typically given the filename extension.CSS External sheets are typically placed in a stylesheet subdirectory

The DIV Element The DIV is an HTML element containerDIV Holds child elements Where flow content is expected Content is flow content Operates at the block level Can be used to apply styles to all DIV children

The SPAN Element A SPAN is an HTML element containerSPAN Holds child elements Where phrasing content is expected Content is phrasing content Operates at the inline level Can be used to apply styles to all SPAN children

DIV Versus SPAN DIV operates on flow (block) content. SPAN operates on phrasing (inline) content. Apply DIV and SPAN on a paragraph and you will see the difference. DIV must go outside P (DIV is flow content) SPAN must go inside P (SPAN is phrasing content).

Selectors A selector determines what HTML elements are affected by the list of style rules in a styleselector There are many types of selectors Type selectors Group selectors Universal selectors

Type Selectors A type selector specifies a specific HTML element as the selectortype selector Example: p { font-size:24px; }

Group Selectors A group selector specifies a comma-separated list of HTML elements as the selectorgroup selector Example: p, pre, code, a { font-size:24px; }

Universal Selectors A universal selector specifies all HTML elements as the selectoruniversal selector Example: * { font-size:24px; }

Descendant Selectors A descendant selector specifies a nested HTML element as the selectordescendant selector All parents and the child for whom the style is to be applied must be listed in order of appearance, in a space-separated list Examples: p { font-size:12px; } p b { font-size:24px; } p b b { font-size:36px; }

Child Selectors A child selector specifies a parent and direct child HTML element as the selectorchild selector The style is applied to the child element Examples: body > p { color:#FF0000; }

Adjacent Sibling Selectors An adjacent sibling selector specifies an HTML element and direct neighbor HTML element (they have the same parent) as the selectoradjacent sibling selector The style is applied to the neighboring element Examples: b + i { color:#FF0000; } This is bold. This is italic. Which one will be red? The italic one of course!

Class Selectors An optional HTML element, followed by a period, then followed by a class name, defines a class selector class selector The style is applied to any HTML element where you specify the attribute CLASS = classname Examples:.blueText { color:#000077; } p.greenText { color:#007700; } Yo! This is blue!

Fonts font-family font-size font-style font-variant font-weight font

Text text-align text-decoration text-indent text-transform letter-spacing word-spacing white-space