Cascading Style Sheets Robin Burke IT 130

Outline Style vs content CSS Syntax CSS properties Selectors Fonts Alignment Color Selectors

What is a style? An association between Not Some exceptions a set of display properties a logical unit of HTML content Not document content Some exceptions numbered lists, captions, etc. Not what but how

Result HTML defines structure Layout and display decisions encoded in the stylesheet stylesheets can be device-specific Designer can easily change page format without affecting HTML Loose coupling between content decisions and style decisions

Associating style with HTML Within HTML elements Within HTML "head" element Separate file

Syntax of CSS Series of style declarations Each declaration Example selector { property:value; } Example h1 { font-color: blue; } Multiple property/values pairs possible h1 { font-color: blue; font-weight: bold; } selector attribute value

Examples in-line style embedded style linked style style attribute in element style=" ...style declaration here... " embedded style <style> ... multiple style declarations here... </style> linked style <link href=" ...stylesheet url here... " rel="stylesheet" type="text/css"> separate file has style information

Style inheritance Styles are inherited by containment Meaning unless otherwise specified an element has the same style as its container more or less To change the whole document change the style for the body element

Examples

CSS Properties Many, many CSS properties Not all implemented in browsers We will talk about common ones fonts colors not positioning Reference material essential!

Fonts Fonts are very complex Multi-dimensional platform-specific copyrighted different standards Multi-dimensional size weight style ornament family

Font families Categories Specific fonts serif sans-serif monospace cursive Specific fonts Times Roman Arial Courier

font-family styles Best practice Examples PC font, Mac font, generic font; Examples font-family: Arial, Helvetica, sans-serif; font-family: Times Roman, serif;

Font sizes Options Examples Try to use built-in sizes if possible Relative Absolute Units in, px, em, pt, pc Examples font-size: larger font-size: 12 pt font-size: 50 px font-size: small Try to use built-in sizes if possible small (absolute) larger (relative) more flexible for device variety

Spacing Can control letter and line spacing letter-spacing word-spacing line-height

Alignment text-align vertical-align horizontal alignment like "align" attribute vertical-align like "valign" attribute but more possibilities

Other font style choices text-weight controls boldness text-decoration underlining, strike-through text-transform uppercase, lowercase font-variant small-caps font-style italic

Colors What can be colored? Options text background links color names "blue", "yellow" what if I have a different color

Specifying colors HTML 3.2 introduced the color attribute Colors are built from primary components red, green, blue To get a specific color say how much of each component you want 0-255 Example red=0, green=0, blue=255 (bright blue) red=0, green=0, blue=177 (darker blue) BUT how to turn into an attribute

Color encoding Simplest idea Better idea? Actual HTML implementation <p red="0" green="0" blue="107"> too wordy Better idea? <p color="00107"> ambiguous <p color="000000107"> possible, but not part of standard some values illegal 999999999 Actual HTML implementation <p color="#00006B"> huh?

Hexidecimal encoding A number system with 16 digits Examples In hex 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F Examples 6B = 6*16 + 11 = 107 B1 = 11*16 + 1 = 177 FF = 15*16 + 15 = 255 In hex 0-255 decimal = 00-FF <p color="#00006B">

Web color HTML 4.0 uses CSS predefined name hex triplet color attribute in some elements CSS or rgb expression rgb (0, 0, 107) color property

Links links can have state-dependent colors link – unvisited visited – visited active – while being clicked hover – while the cursor is there

Link colors Handled via "pseudo-classes" relative to the anchor a element a:link a:visited Example a:link { color: red; } a:visited { color: blue; }

Link color example a:link { color: red; } a:visited { color: blue; text-decoration: none; } a:active { font-weight: bolder; } a:hover { color: green; }

Background color In HTML, only certain elements can have colored backgrounds whole page table components In CSS, background of any element Example <p style="background-color: red;">

Background images Background images With CSS limited in HTML either large or tiled With CSS Total control over the background image

Example Background options

Selectors what element(s) a style is applied to any html element name element relationships a b b is a child of a pseudo-classes a:visited designer-defined classes

Types of selectors element names element containment pseudo-classes h1 { font-family: Courier, monospace; } element containment table tr th a { font-decoration: none; } pseudo-classes a:visited { color: blue; }

Lists can choose different kinds of bullets can control nesting behavior with selectors Example

Classes Selectors with user-defined behavior Inside HTML element usually in conjunction with HTML element Inside HTML element class attribute In CSS selector = element_name.class_name Also .class_name for same class in different elements Example yes/no list items

Classes While writing HTML While writing CSS Identify different areas of page requiring different treatment Come up with descriptive class names for each Insert class attribute in HTML elements While writing CSS create styles for each class associate with appropriate class selector

Id Also a selector Example but unique to a single element #sidebar { background-color: grey; }

Generic blocks How to identify a chunk of content Two options Example that is not an HTML element already Two options paragraph-like? Use "div" block format word-like? Use "span" in-line format Example

Homework #3 Create a stylesheet and have two pages use it Third page (with embedded stylesheet) links to the two pages Four files favorite1.html, favorite2.html, hwk3.css, hwk3.html