Understanding CSS: A Historical and Practical Overview

1. CSS: The Rules (literally!) (Chapters 7 – 9)

2. History of CSS • 1994ish – Concept for CSS originally proposed • 1996 – CSS 1 accepted with formatting support • 1997 – CSS 2 accepted with layout support • 2000 – Browser support (finally!) • 2004 – CSS 2.1 threw out unsupported features, tweaked spec for some • 2005 – CSS 2.1 pulled back to draft • 2007 – CSS 2.1 reinstated as accepted standard • 2011 – more edits to CSS 2.1 • NOW – CSS 3, modular standards, no browser support

3. Structure vs. Presentation • HTML is used to structure (mark up) your content • Should have all verbiage, reference to images, etc. • Provides structure for the content (also used by search engines) – think outline of a paper/essay • CSS is used for presentation • Formatting, Placement, Some interaction (hover) • Basically just a list of rules that apply to your HTML • Needs GOOD structure to be utilized • Rules are CASCADED through inheritance (parent, child) • Note: NO browser currently supports ALL of the CSS and there are discrepancies with some CSS rules.

4. A CSS Rule h1 { text-align: center; } • Selector BEGINS a rule; h1 • Tells what element(s) in HTML this rule applies to • Can be formatted several different ways (more later) • Rules that apply to the given selector are grouped inside one set of braces { }. • A rule starts with a property; text-align • Then a : • Each rule must have an associated value; center • Each rule is separated by a ;

5. CSS Comments /* This is a CSS comment */ • Comments begin with /* and end with */ • Must be first thing in a line or after a rule (follows ;) • Usually used when a CSS rule is used to accomplish something that isn’t intuitive OR a hack • Another common use is to signify why a rule is made (perhaps related to JavaScript) • And another may be to signify a property that may be inherited (more later) – CSS can get confusing...

6. CSS Values • Predefined – a list of valid values to choose from text-align: center, left, right, justify display: block, inline, none color: red, blue, green, (and another 13) • Measurements – determined in 1 of 2 ways and must have quantity and unit • relative (pixels, em, etc.) font-size: 18px; • absolute (inches, points, etc.) font-size: 16pt;

7. CSS Values • Percentage – depends on inheritance (more later) – use with caution width: 50%; • URL – some properties need a URL, format as follows url(http://uncw.edu/assets/images/uncw.gif) url(assets/images/uncw.gif) url(../images/uncw.gif) • if using relative path, it is relative to the document that contains the CSS rule

8. CSS Values • Color – many different ways to express a color • There are 16 predefined colors red, green, blue, teal, maroon, olive, etc. • You can give a numerical value or percentage of red, green, and blue – rgb(red, green, blue) rgb(25%, 90%, 18%) rgb(95, 255, 0) • Use a hexadecimal representation (back cover) #009337 #666666

9. Common Formatting Properties font-family: Arial, Helvetica, sans-serif; font-style: italic; font-weight: bold; font-size: 18px; line-height: 20px; color: #333333; background-color: #FF0000; text-indent: 25px; text-align: center; text-transform: uppercase; font-variant: small-caps; text-decoration: underline;

10. Where to put CSS rules • CSS rules can occur in one of 3 places • In an external document (Style Sheet) • This is preferred way – completely separate from structure • Must be linked in head of HTML document • Style Sheet stored as .cssfile, just a list of CSS rules • In an internal style sheet • Should be declared in the head section of an HTML file • Rules must be preceeded by <style type="text/css"> • Must be followed by </style> • Inline styles • Written as a style attribute to a tag (note format) • Not ideal but sometimes the best place to make a rule

11. External Style Sheet • These rules come from a separate document that contains only CSS rules (can span several pages) • Link in head of HTML document on every page used <link rel="stylesheet" type="text/css" href="filename.css" /> • This is the PREFERRED/RECOMMENDED location • Will be overruled by styles by an internal style sheet within the HTML documentand inline styles defined in an element – YOU control where they are, so you must think

12. Internal Style Sheet • These rules come from a separate list of rules in the head of an HTML document (only applies to 1 page) <style type="text/css" /> h1 { text-align: center; color: red; } </style> • Will overrule a style from an external style sheet. • Will be overruled by inline styles defined in an element – again...YOU control where they are

13. Inline Styles • These are written as an attribute to individual tags • Rules for inline styles change a little here <h1 style="text-align: center; color: red;"> • Notice there is no selector and no braces { } • Will overrule a style from an external style sheet. • Will overrule a style from an internal style sheet. • To cause less confusion about WHERE a style comes from, inline styles shouldn’t be used too often.

14. How It Could Look <head> <title>My Web Page Title</title> <link rel="stylesheet" type="text/css" href="filename.css" /> <style type="text/css" /> h1 { text-align: center; } </style> </head> <body> <h1 style="color: red;">This is my heading.</h1> </body> </html> • my-styles.css h1 { font-size: 24px; }

15. Selectors • Predefined HTML tag selector h1 {text-align: center; color: red;} p {font-size: 14px;} • Context (WHERE it is in structure) • Could apply to ALL descendents p em {color: red; font-weight: bold;} • Could apply to ONLY children p > em {color: red; font-weight: bold;}

16. Selectors • Class of an element (determined by class attribute) • Must include .preceeding class name .intro {font-size: 18px;} • Could include a tag to restrict further p.intro {font-size: 18px;} • ID of an element (determined by ID attribute) • Must include #preceeding ID #header { background-color: silver; text-align: center; } • Could also include a tag such as div#header