CSS comes after HTML

1. CSS comes after HTML By David J. Young

2. Agenda • Web pages created with CSS • CSS 101 • CSS Concepts • CSS Shortcuts • CSS based page design • Tools • Demo

3. CSS Example 1

4. CSS Example 2

5. CSS Example 3

6. CSS Example 4

7. CSS Example 6

8. CSS Example 7

9. CSS Example 7

10. CSS Example 8

11. CSS Example 9

12. CSS Samples • Q: What is different about all of the samples? • A: Each presentation (look & feel) is completely different • Q: What is the same in all the samples? • A: The content. That is, the (X)HTML is identical.

13. Example 10

14. HTML for all Examples

15. What is CSS? • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • Styles are normally stored in Style Sheets • Styles were added to HTML 4.0 to solve a problem • External Style Sheets can save you a lot of work • External Style Sheets are stored in CSS files • Multiple style definitions will cascade into one

16. <div class="title"> This is my headline </div> <br /> <br /> <div class="sub-header"> this is a sub header </div> <br /> <div class="content"> this is a paragraph of content, it contains some <b>bold</b> text and some <span class="blue">colored</span> text. this is a second paragraph </div> <h1>This is my headline</h1> <h2>this is a sub header</h2> <p> this is a paragraph of content, it contains some <strong>bold </strong> text and some <span class="highlight"> colored</span> text. </p> <p> this is a second paragraph </p> Why CSS? • Separates content from presentation • Semantic HTML for authoring web pages Semantic HTML Non-Semantic HTML

17. CSS Concepts Before you can understand CSS, you need to first understand a few key concepts: • Variations • Media Types • Importance • Inheritance • Origin • Rules • Ruleset • Properties • Selectors • Specificity

18. Variations • CSS 1 The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996. Among its capabilities are support for: Font properties such as typeface and emphasis Color of text, backgrounds, and other elements Text attributes such as spacing between words, letters, and lines of text Alignment of text, images, tables and other elements Margin, border, padding, and positioning for most elements Unique identification and generic classification of groups of attributes • CSS 2 CSS level 2 was developed by the W3C and published as a Recommendation in May 1998. A superset of CSS1, CSS2 includes a number of new capabilities like absolute, relative, and fixed positioning of elements, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows. • CSS 2.1 CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2, removes poorly-supported features and adds already-implemented browser extensions to the specification. While it was a Candidate Recommendation for several months, on June 15, 2005 it was reverted to a working draft for further review. It was returned to Candidate Recommendation status on 19 July 2007. • CSS 3 CSS level 3 is currently under development. The W3C maintains a CSS3 progress report. CSS3 is modularized and will consist of several separate Recommendations. The W3C CSS3 Roadmap provides a summary and introduction.

19. Browser Support for CSS • http://www.quirksmode.org

20. Media Types All Used for all media type devices Aural Used for speech and sound synthesizers Braille Used for braille tactile feedback devices Embossed Used for paged braille Printers Handheld Used for small or handheld devices Print Used for printers Projection Used for projected presentations, like slides Screen Used for computer screens TTY Used for media using a fixed-pitch character grid, like teletypes and terminals TV Used for television-type devices

21. Importance • There a two levels of importance • Normal • Important (made using !important declaration) • Both Authors and Readers can make !important declarations • In CSS1, author !important declarations overruled reader declarations • In CSS2, reader !important declarations overrule author declarations

22. Inheritance • Virtually all selectors which are nested within other selectors will inherit the property values assigned to the outer selector unless otherwise modified. For example, a color defined for the BODY will also be applied to text in a paragraph. • There are some cases where the inner selector does not inherit the surrounding selector's values, but these should stand out logically. For example, the margin-top property is not inherited; intuitively, a paragraph would not have the same top margin as the document body.

23. Origin Origin is where styles originate • User Agent Style Sheets Browser Defaults C:\Program Files\Mozilla Firefox\res\html.css • User Style Sheets Ignore cheap-effect tags blink { text-decoration: none !important } marquee { -moz-binding: none !important } Visually impaired html { font-size: 24pt !important } • Author Style Sheets • External style sheet • Internal style sheet (inside the <head> tag) • Inline style (inside an HTML element)

24. Rules A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in braces. Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;).

25. Properties The Box Model - padding, margin, outline and borders padding, padding-top, padding-right, padding-bottom, padding-left border, border-top, border-right, border-bottom, border-left border-style, border-top-style, border-right-style, border-bottom-style, border-left-style border-color, border-top-color, border-right-color, border-bottom-color, border-left-color border-width, border-top-width, border-right-width, border-bottom-width, border-left-width outline outline-style outline-color outline-width margin, margin-top, margin-right, margin-bottom, margin-left Positioning and Display position top right bottom left clip overflow z-index float clear display Visibility Lists list-style list-style-type list-style-image list-style-position The Box Model – dimensions width height min-width max-width min-height max-height Text and Fonts font font-family font-size font-weight font-style font-variant line-height letter-spacing word-spacing text-align text-decoration text-indent text-transform vertical-align white-space Colours and Backgrounds color background-color background background-image background-repeat background-position background-attachment Tables table-layout border-collapse border-spacing empty-cells caption-side Generated Content content counter-increment counter-reset quotes Paged Media page-break-before page-break-after page-break-inside orphans Widows Misc. cursor direction unicode-bidi

26. Selectors Selectors are used to declare which elements a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, or only those elements which match a certain attribute; elements may be matched depending on how they are placed relative to each other in the markup code, or on how they are nested within the document object model (DOM).

27. Selectors • Element Selectors element { } • Class Selectors .classname { } • ID Selectors #idname { } • Descendant Selectors ul li { } • Child Selectors ul > li { } • Adjacent Sibling h1 + p { } • Attribute Selectors img[src|="vacation"] { } • Daisy Chaining #id element.class { } • Group Selectors h1,h2,h3 { } • Universal Selectors * { } • Psuedo-Classes a:hover { } • Psuedo-Elements p:first-letter { }

28. HTML relates to CSS • Element Selectors <p> styled by p{color: red; } • Class Selectors <p class=“code"> styled by p.code{color: cyan; font-family: courier } or .code{color: #F0F; font-family: courier } • ID Selectors <p id="sig"> styled by p#sig{color: cyan; } or #sig{color: #F0F; }

29. ID vs Class • A unique ID can only be used only “once” on a HTML page • IDs are usually associated with “layout” regions or areas • A class can be used any number of times

30. Selector Specificity A selector's specificity is calculated as follows: • count 1 if the declaration is from a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.) • count the number of ID attributes in the selector (= b) • count the number of other attributes and pseudo-classes in the selector (= c) • count the number of element names and pseudo-elements in the selector (= d) The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD. Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity. Some examples: * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

31. Practical Specificity • HTML Elements <p>, <div>, <h1> • CSS Classes .center, .hilight • CSS ID #content, #navbar • Inline Styles style="text-align: center"

32. Cascade Order • Find all declarations that apply to the element and property for the target media type. • Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence: • user agent declarations • user normal declarations • author normal declarations • author important declarations • user important declarations • Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively. • Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

33. What color is P element text? Example <HEAD> <STYLE type="text/css"> p.std { color: magenta; } #x97z { color: red; } p { color: green; } body { color: yellow; background-color: #000;} </STYLE> </HEAD> <BODY> <P ID="x97z" class="std" style="color: cyan">Text</P> <P>Other Paragraph</P> </BODY> body { color: yellow; } /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ p { color: green; /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ p.std { color: magenta; /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ #x97z { color: red; /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style="color: cyan" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */ In the above example, Text is cyan, and Other Paragraph is green.

34. Inserting Style Sheets • External Style Sheet Link <link rel="stylesheet" type="text/css" href="navbar.css" /> Import <style type="text/css" media="screen">@import url("/css/my.css"); </style> <style type="text/css">@import url("import.css") tv,print; </style> • Internal Style Sheet <style type="text/css"> body {margin:0;width:100%;height:100%} body,td,input,textarea,select{font-family:arial,sans-serif} input,textarea,select{font-size:100%} #loading{position:absolute;width:100%;height:100%; background-color:#fff} .cmsg{margin:1em} .msg{font-weight:bold} </style • Inline Styles <p style="color:sienna;margin-left:20px">This is a paragraph.</p>

35. HTML Webpage <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> CSS comes after HTML </title> <meta name="description" content=“CSS For programmers." /> <meta name="keywords" content=“CSS, HTML, Tutorial" /> <style type="text/css" media="screen"> @import url("http://some.domain.com/css/base.css"); @import url("http://some.domain.com/css/Blog.css"); </style> <link rel="stylesheet" type="text/css" href="http://some.domain.com/css/print.css" media="print" /> <style type="text/css“> body {margin: 0; padding: 0; background-color: } </style> /head> <body id="EyeBrow"> <div id="content" style="text-align:left;"> … </div> </body> External Style Sheets Internal Style Sheet Inline Style

36. External CSS Files menu <link> @import HTML1 layout <link> @import navbar @import <link> @import HTML2

37. /* basic elements */ html { margin: 0; padding: 0; } body { font: 75% georgia, sans-serif; line-height: 1.88889; color: #555753; background: #fff url(blossoms.jpg) no-repeat bottom right; margin: 0; padding: 0; } h3 { font: italic normal 1.4em georgia, sans-serif; letter-spacing: 1px; margin-bottom: 0; color: #7D775C; } a:link { font-weight: bold; text-decoration: none; color: #B7A5DF; } /* specific divs */ #container { background: url(zen-bg.jpg) no-repeat top left; padding: 0 175px 0 110px; margin: 0; position: relative; } #intro { min-width: 470px; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { background: transparent url(h1.gif) no-repeat top left; margin-top: 10px; width: 219px; height: 87px; float: left; } #pageHeader h1 span { display:none } .accesskey { text-decoration: underline; } CSS Sample

38. Shorthands #full { border-width: 1px; border-style: dotted; border-color: #ff0000; } or #shorthand {border: 1px dotted #f00;}

39. CSS Shorthand • Border » *-width *-style *-color • Margin » *-top *-right *-bottom *-left • Padding » *-top *-right *-bottom *-left • Font » *-style *-variant *-weight *-size *-height *-family • List-Style » *-type *-position *-image • Background » *-color *-image *-repeat *-attachment *-position

40. Shorthand Declarations margin-top: 25px; margin-right: 0; margin-bottom: 5px; margin-left: 0; margin: 25px 0 5px 0; margin: 10px; margin: 10px 10px 10px 10px; margin: 10px auto; margin: 10px auto 10px auto; margin: 10px auto 15px; margin: 10px auto 15px auto; 25px 0 0 5px

41. Colors color_nameA color name (e.g. red) rgb(x,x,x) An RGB value (e.g. rgb(255,0,0)) rgb(x%, x%, x%) An RGB percentage value (e.g. rgb(100%,0%,0%)) #rrggbb A HEX number (e.g. #ff0000) The W3C HTML and CSS standards have listed only 16 valid color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow However, see http://w3schools.com/css/css_colornames.asp for a list of 140 color names supported by all major browsers.

42. Absolute in inch cm centimeter mm millimeter pt point (1 pt is the same as 1/72 inch) pc pica (1 pc is the same as 12 points) Relative em 1em is equal to the current “M” size. 2em means 2 times the size of the current “M” . E.g., if an element is displayed with a “M” of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the “M” that the reader uses ex one ex is the x-height of a “x” (x-height is usually about half the “M”-size) px pixels (a dot on the computer screen) % percentage Length Units

43. Deprecated <basefont> <center> <font> <strike> <s> <u> Discouraged <b> <i> <big> <small> <tt> HTML Tags

44. Comments • CSS uses “C” Style comment Syntax /* Comment here */p {margin: 1em; /* Comment here */padding: 2em;/* color: white; */background-color: blue;}/*multi-linecomment here*/ • Comments cannot be nested

45. Centering • <center> is deprecated • Suggested to use CSS instead • {text-align: center; } only centers text • Centering HTML elements with CSS is easy, but not initially obvious • Set margin-left and margin-right to “auto” • Define an element width div {margin: 0 auto 0 auto; width:800px; }

46. Display of HTML elements • Block Takes up the full width available, with a new line before and after (display:block;) • Inline Takes up only as much width as it needs, and does not force new lines (display:inline;) • Not displayed Some tags, like <meta /> and <style> are not visible (display:none;)

47. display vs visibility • selector {display: none;} & selector {visibility: hidden;} accomplish the same thing: The element is removed from view. • But fundamentally they work completely different. Display:none removes the element from the normal document flow. The effect is surrounding elements will be adjusted as they reflow in the document. • visibility:hidden hides the element, but it remains in the document flow. This may leave what appears to be an unexplainable “blank hole” your document.

48. Block vs Inline <div> <h1> <p> <table> <acronym>CSS</acronym> stands for Cascading Style Sheet. A CSS style sheet <strong>can</strong> be used to create powerful web pages. Click <a href=http://www.sample.com/url.html> here </a> for a sample of a CSS based web page.

49. Block <div> Your general-purpose box <h1> ... <h6> All headings <p> Paragraph <ul>, <ol>, <dl> Lists (unordered, ordered and definition) <li>, <dt>, <dd> List items, definition list terms, and definition list definitions <table> Tables <blockquote> Like an indented paragraph, meant for quoting passages of text <pre> Indicates a block of preformatted code <form> An input form Inline <span> Your all-purpose inline element <a> Anchor, used for links (and also to mark specific targets on a page for direct linking) <strong> Used to make your content strong, displayed as bold in most browsers, replaces the narrower <b> (bold) tag <em> Adds emphasis, but less strong than <strong>. Usually displayed as italic text, and replaces the old <i> (italic) tag <img /> Image <br> The line-break is an odd case, as it's an inline element that forces a new line. However, as the text carries on on the next line, it's not a block-level element. <input> Form input fields like and <abbr> Indicates an abbr. (hover to see how it works) <acronym> Working much like the abbreviation, but used for things like this TLA. HTML Elements

50. CSS based layout #layout #header #nav #content #sidebar #footer