1. Web Authoring: Using Cascading Style Sheets ITNW 6030

2. Introductions: What is your name? What is your experience with web design? What is your experience with CSS? Is there anything specific you would like to make sure we cover? Class Structure Housekeeping

3. Course Description: Control fonts, background colors, hyperlinks, margins and other page elements; lay out a Web page using CSS. Learn to create CSS navigational menus for Web pages. Prerequisites: Introduction to World Wide Web Authoring and XHTML and Intermediate World Wide Web Authoring and XHTML.

4. Objectives: Every student will be able to: Embed Style Sheets into an HTML page. Use an external Style Sheet. Identify and modify attributes and elements. Control the appearance of hypertext links. Control background and foreground colors and body attributes. Demonstrate how to set page margins using CSS. Demonstrate how to control the attributes of lists and tables. Create interactive menu systems. Use CSS for page layout.

5. Course Outline: Introduction to CSS Introduction Adding CSS Browser Considerations Lists of Attributes Modifying the Attributes of Elements Embedding Styles Getting Started Hypertext Links Setting Foreground and Background Colors Adding Background Images Working With Fonts Block Elements

6. Course Outline: Going The Extra Mile Absolute and Relative Positioning Working With Lists Bulleted Lists Numbered Lists Working With Tables Spacing Padding Borders Implementation Creating Menus Introduction to Page Layout Methods of Using CSS for Page Layout Basic Design Examples Putting Together Layout and Menu Systems

7. Introduction to CSS: Why use CSS? Separation of content from presentation XHTML for the content & CSS for the presentation and styling

8. Introduction to CSS: Why use CSS? Different Media - CSS can be styled specifically for different media, including browsers, printers, hand held devices, and projectors.

9. Introduction to CSS: Why use CSS? More control over typography - CSS allows authors to control the presentation of content with properties such as Capitalize, UPPERCASE, lowercase, text-decoration, text-indent etc. CSS can also be used to add margins, borders, padding, background color, and background images to any HTML element.

10. Introduction to CSS: Why use CSS? Increased Accessibility - CSS when combined with well structured HTML documents can aid in allowing devices such as screen readers to provide a more accessible page. When all presentational markup is removed, the only thing a screen reader encounters is structural content. CSS can also be used to increase the clickable area of links as well as control line and text line widths for users with motor skill or cognitive difficulties.

11. Introduction to CSS: Why use CSS? Smaller file sizes - CSS allows authors to remove all presentation from HTML documents, including layout tables, spacer images, decorative images, text presentation and a lot more. This dramatically decreases the file size of HTML documents.

12. Introduction to CSS: Why use CSS? Easy to maintain - The power of CSS is that a single CSS file can be used on a multiple number of HTML documents at the same time. This allows for the ability to make a site wide design change by only changing one CSS file rather than going into multiple HTML documents.

13. Introduction to CSS: What is CSS? Cascading Style Sheets (CSS) is a language that works with HTML documents to define the way content is presented. The presentation is specified with styles that are placed directly into HTML elements, the head of the HTML document, or seperate style sheets. Style Sheets contain a number of CSS rules. Each rule selects elements in an HTML document. These rules then define how the elements will be styled. Any number of HTML files can be linked to a single CSS file.

14. Introduction to CSS Three types of style sheets that influence the presentation of HTML documents: Browser Style Sheets - Browsers apply style sheets to all web documents. Although they may be different depending on the browser the most common characteristics of these styles sheets are black text, blue links and purple visited links. These are referred to as default browser settings. User Style Sheets - A user is anyone who visits your website. Most modern browsers allow each user to set their own style sheets within their browser. These sheets override the browsers default setting for only that user. Author Style Sheets - These style sheets are set by the person who develops the website. As soon as you apply any kind of basic style sheet to a page, you have added an author style sheet.

15. Introduction to CSS Cascading means that styles fall (or cascade) from one style sheet to another. The cascade is used to determine which style sheets will take precedence and be applied to the document. As the image displays the web page will most likely take precedence of and first follow the rules set by the author style sheet followed by the user style sheet and then the browser style sheet.

16. Introduction to CSS World Wide Web Consortium (W3C) CSS is a recommendation of the World Wide Web Consortium (W3C). The W3C is an industry consortium of web stakeholders including universities; companies such as Microsoft, Netscape, and Macromedia; and experts in web related fields. One of the W3C's roles is to produce recommendations for a range of aspects of the Web. CSS1 became a recomendation in late 1996, CSS2 became a recommendation in May 1998, and CSS2.1 became a recommendation in January 2003.

17. Introduction to CSS: Browser Considerations Cascading Style Sheets were designed from the start to degrade gracefully. This means that if your CSS rules aren't recognized for some reason, your page is still usable and the content accessible. Because presentation is separated from content, the content should be able to stand on its own, albeit not as beautifully, after the presentation is removed. At least, that's the theory. In practice it's not nearly as easy as that. To be an effective CSS author, you need to know not only what works in any given browser—or in most or all of them—but also what happens when it doesn't work. Is it as simple as your style not being applied correctly and a bit of decoration being lost, or is it as serious as your entire layout being disrupted and content being lost?

18. Introduction to CSS Creating a Rule Set A rule, or rule set is a statement that tells browsers how to render particular elements on an HTML page. A rule set consists of a selector followed by a declaration block. Inside the declaration block, there can be one or more declarations. Each declaration contains a property and a value.

19. Introduction to CSS Creating a Rule Set The first step is choosing the selector. The selector "selects" which HTML element to affect on the page by referencing the rule set. Examples of Selectors: p, h1, h2 Next, the declaration box must be created. A declaration block is a container that consists of a property and one or more values separated by a colon and opened and closed by the use of curly brackets. Examples of Declaration Block: p {...} h1 {...} h2 {...}

20. Introduction to CSS Creating a Rule Set Declarations tell a browser how to draw any element on a page that is selected. The end of each declaration is indicated with a semi colon. You can use multiple declarations by placing a semicolon at the end of the declaration. p { color: maroon; } h1 { text-align: center; } h2 { font-style: italic; } The property is an aspect of the element that you are choosing to style. The value however is the exact style you want to set for the property. Values can include length, percentage, color, url, keyword, and shape.

21. Introduction to CSS Creating a Rule Set You may combine selectors when several selectors share the same declarations. Each selector must be separated by a comma but, this prevents the need to write the same rule more than once. For example: h1, h2 { text-align: center; color: navy; } h2 {font style: italic; }

22. Introduction to CSS and elements The element is a generic container that can be used to add structure to an HTML document. Although it is a block level element, it does not add any other presentation to the content. The element is usually used to contain logical divisions of content, such as navigation and footer information. The tag is similar to the tag except that it is not a block level element.

23. Introduction to CSS Using comments Comments allow you to leave notes to yourself and other people in your CSS, and are useful as a reminder of what the styles are being used for and why. CSS only supports block comments, and these can span multiple lines. The slash-asterisk indicates a comment start. Everything after it will be ignored by the CSS engine until an asterisk-slash is encountered. p { color: green; } /* This is a block comment */ div { position: relative; }

24. Introduction to CSS: Descendant Selectors Descendant Selectors are used to select elements that are descendants of another element.For example, if you were looking to change the styles for hypertext links that are placed in an tag in your navigation id you would write the CSS code like this: #navigation li a { color: blue } With the use of descendant selectors you will only change the color of your hypertext links when they are within the ordered list and navigation tags. This allows for a larger number of options when styling your page as well highlighting important text in your site.

25. Introduction to CSS: Browser Considerations When a browser encounters anything—from CSS rules to HTML, JavaScript to Flash multimedia—it has several choices as to what it can do. If the browser has been programmed to understand the thing it has encountered, it attempts to display it according to the specification. If it has no idea what it has come across, it can ignore it. Both these options can be considered "doing the right thing." Or the browser can do the wrong thing. It can get confused; it can display in some nonstandard way; it can even crash, although that's rare. Doing any of these wrong things, of course, is the least desirable and is at the root of our problem.

26. Introduction to CSS: List of Attributes Font Properties Font Family Font Style Font Variant Font Weight Font Size Font Color and Background Properties Color Background Color Background Image Background Repeat Background Attachment Background Position Background Text Properties Word Spacing Letter Spacing Text Decoration Vertical Alignment Text Transformation Text Alignment Text Indentation Line Height

27. Introduction to CSS: List of Attributes Box Properties Top Margin Right Margin Bottom Margin Left Margin Margin Top Padding Right Padding Bottom Padding Left Padding Padding Top Border Width Right Border Width Bottom Border Width Classification Properties Display Whitespace List Style Type List Style Image List Style Position List Style Left Border Width Border Width Border Color Border Style Top Border Right Border Bottom Border Left Border Border Width Height Float Clear

28. Introduction to CSS: Modifying The Attributes of Elements Length Units A length value is formed by an optional + or -, followed by a number, followed by a two-letter abbreviation that indicates the unit. There are no spaces in a length value; e.g., 1.3 em is not a valid length value, but 1.3em is valid. A length of 0 does not require the two-letter unit identifier.

29. Introduction to CSS Both relative and absolute length units are supported in CSS1. Relative units give a length relative to another length property, and are preferred since they will better adjust to different media. The following relative units are available: em (ems, the height of the element's font) ex (x-height, the height of the letter "x") px (pixels, relative to the canvas resolution) Absolute length units are highly dependent on the output medium, and so are less useful than relative units. The following absolute units are available: in (inches; 1in=2.54cm) cm (centimeters; 1cm=10mm) mm (millimeters) pt (points; 1pt=1/72in) pc (picas; 1pc=12pt)

30. Introduction to CSS: Percentage Units A percentage value is formed by an optional + or -, followed by a number, followed by %. There are no spaces in a percentage value. Percentage values are relative to other values, as defined for each property. Most often the percentage value is relative to the element's font size.

31. Introduction to CSS: Color Units A color value is a keyword or a numerical RGB specification. The 16 keywords are taken from the Windows VGA palette: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. RGB colors are given in one of four ways: #rrggbb (e.g., #00cc00) #rgb (e.g., #0c0) rgb(x,x,x) where x is an integer between 0 and 255 inclusive (e.g., rgb(0,204,0)) rgb(y%,y%,y%) where y is a number between 0.0 and 100.0 inclusive (e.g., rgb(0%,80%,0%))

32. Introduction to CSS: URLs A URL value is given by url(foo), where foo is the URL. The URL may be optionally quoted with either single (') or double (") quotes and may contain whitespace before or after the (optionally quoted) URL. Parentheses, commas, spaces, single quotes, or double quotes in the URL must be escaped with a backslash. Partial URLs are interpreted relative to the style sheet source, not to the HTML source

33. Introduction to CSS URLs Examples: BODY { background: url(stripe.gif) } BODY { background: url(http://www.htmlhelp.com/stripe.gif) } BODY { background: url( stripe.gif ) } BODY { background: url("stripe.gif") } BODY { background: url(\"Ulalume\".png) } /* quotes in URL escaped */

34. Introduction to CSS: Embedding Styles Inline styles can be applied direclty to elements in the HTML code using the style attribute. However, inline styles should be avoided wherever possible because the styles added to the HTML markup. This defeats the main purpose of CSS, which is to apply the same styles to as many pages as possible across your website using external style sheets. An example of an inline style would be: Lorem ipsum dolor sit amet, consectetuer

35. Introduction to CSS: Header Styles Their are cases in which the Header style might be the preferred option, such as a CSS rule that is specific to one page within a website. To embed CSS directly into a web page, use the STYLE tag, and set the type to 'text/css': /* CSS goes here */

36. Introduction to CSS: Embedded Styles The style element is placed within the document head. Here is a template HTML file showing where the above style element fits. You can copy and paste this into your editor as a convenient way to experiment with CSS style sheets: replace with your document's title body { color: black; background: white; } replace with your document's content

37. Introduction to CSS: External Styles One of the most useful features of CSS is the ability to share the same styles across many pages, so that all pages can be changed by modifying a single file. To do that, you will need to keep the CSS in a separate file. This also allows you to keep the clutter out of your document, and helps avoid several other problems, so even if you only intend to use the CSS on one page, you may want to include it in an external file anyway. To use an external file, you would usually name the file something.css (choose an appropriate name), and then use the LINK tag to tell the page to use it. Inside the head of a document put this: Note that external CSS should only ever be included in the head of your document, unless you use inline style attributes on individual elements.

38. Introduction to CSS: Review Why is CSS useful? What is CSS? How do style sheets affect content online? What is the basic structure for creating a CSS rule? What are some examples of html tags that can be used as selectors? How does CSS get 'attached' to html pages?

39. Getting Started

40. Getting Started: Specificity If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out.

41. Getting Started: Specificity The actual specificity of a group of nested selectors takes some calculating. Basically, you give every id selector ("#whatever") a value of 100, every class selector (".whatever") a value of 10 and every HTML selector ("whatever") a value of 1. Then you add them all up and hey presto, you have the specificity value. p has a specificity of 1 (1 HTML selector) div p has a specificity of 2 (2 HTML selectors; 1+1).tree has a specificity of 10 (1 class selector) div p.tree has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10) #baobab has a specificity of 100 (1 id selector) body #content.alternative p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1) So if all of these examples were used, div p.tree (with a specificity of 12) would win out over div p (with a specificity of 2) and body #content.alternative p would win out over all of them, regardless of the order.

42. Getting Started: Inheritence Any HTML document comprises a number of elements - headings, paragraphs, lists, and so on. Every element is contained by another element, and may itself contain other elements. This is technically called the containment hierarchy of an HTML document. At the top of the containment hierarchy is the element - sometimes referred to as the root element. And inside this will be the element. And then the will contain a whole lot of other elements. All elements, other than the root element are contained by another element, called its parent element. Many elements will contain other elements, which are referred to as their children.

43. Getting Started: Inheritence

44. Getting Started: Setting Foreground & Background Properties CSS properties allow authors to specify the foreground color and background of an element: background color background color

45. Getting Started: Setting the Background Property The background property is a shorthand for the more specific background- related properties. Some examples of background declarations follow: BODY { background: white url(http://www.htmlhelp.com/foo.gif) } BLOCKQUOTE { background: #7fffd4 } P { background: url(../backgrounds/pawn.png) #f0f8ff fixed } TABLE { background: #0c0 url(leaves.jpg) no-repeat bottom right } A value not specified will receive its initial value. For example, in the first three rules above, the background-position property will be set to 0% 0%. To help avoid conflicts with user style sheets, background and color properties should always be specified together.

46. Getting Started: Setting the Background Color Property The background-color property sets the background color of an element. For example: BODY { background-color: white } H1 { background-color: #000080 } To help avoid conflicts with user style sheets, background-image should be specified whenever background-color is used. In most cases, background- image: none is suitable. Authors may also use the shorthand background property, which is currently better supported than the background-color property.

47. Getting Started: Setting Background Image Properties The background-repeat property determines how a specified background image is repeated. The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically. For example: BODY { background: white url(candybar.gif); background- repeat: repeat-x } In the above example, the image will only be tiled horizontally. Authors may also use the shorthand background property, which is currently better supported than the background-repeat property.

48. Getting Started: Setting Background Image Properties The background-attachment property determines if a specified background image will scroll with the content or be fixed with regard to the canvas. For example, the following specifies a fixed background image: BODY { background: white url(candybar.gif); background-attachment: fixed } Authors may also use the shorthand background property, which is currently better supported than the background-attachment property.

49. Getting Started: Setting Background Image Properties The background-position property gives the initial position of a specified background image. This property may only be applied to block-level elements and replaced elements. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The easiest way to assign a background position is with keywords: Horizontal keywords (left, center, right) Vertical keywords (top, center, bottom) Percentages and lengths may also be used to assign the position of the background image. Percentages are relative to the size of the element. Although lengths are allowed, they are not recommended due to their inherent weakness in dealing with differing display resolutions.

50. Getting Started: Setting Background Image Properties When using percentages or lengths, the horizontal position is specified first, followed by the vertical position. A value such as 20% 65% specifies that the point 20% across and 65% down the image be placed at the point 20% across and 65% down the element. A value such as 5px 10px specifies that the upper left corner of the image be placed 5 pixels to the right of and 10 pixels below the upper left corner of the element. If only the horizontal value is given, the vertical position will be 50%. Combinations of lengths and percentages are allowed, as are negative positions. For example, 10% -2cm is permitted. However, percentages and lengths cannot be combined with keywords.

51. Getting Started: Setting Background Image Properties The keywords are interpreted as follows: top left = left top = 0% 0% top = top center = center top = 50% 0% right top = top right = 100% 0% left = left center = center left = 0% 50% center = center center = 50% 50% right = right center = center right = 100% 50% bottom left = left bottom = 0% 100% bottom = bottom center = center bottom = 50% 100% bottom right = right bottom = 100% 100% If the background image is fixed with regard to the canvas, the image is placed relative to the canvas instead of the element.

52. Getting Started: Working with Text Font families may be assigned by a specific font name or a generic font family. Obviously, defining a specific font will not be as likely to match as a generic font family. Multiple family assignments can be made, and if a specific font assignment is made it should be followed by a generic family name in case the first choice is not present. A sample font-family declaration might look like this: P { font-family: "New Century Schoolbook", Times, serif }

53. Getting Started: Working with Text The font-style property defines that the font be displayed in one of three ways: normal, italic or oblique (slanted). A sample style sheet with font-style declarations might look like this: H1 { font-style: oblique } P { font-style: normal } The font-variant property determines if the font is to display in normal or small-caps. Small-caps are displayed when all the letters of the word are in capitals with uppercase characters slightly larger than lowercase. Later versions of CSS may support additional variants such as condensed, expanded, small-caps numerals or other custom variants. An example of a font-variant assignment would be: SPAN { font-variant: small-caps }

54. Getting Started: Working with Text The font-weight property is used to specify the weight of the font. The bolder and lighter values are relative to the inherited font weight, while the other values are absolute font weights. h1 { font-weight: bold } p { font-weight: normal } The font-size property is used to modify the size of the displayed font. Absolute lengths (using units like pt and in) should be used sparingly due to their weakness in adapting to different browsing environments. Fonts with absolute lengths can very easily be too small or too large for a user. Some example size assignments would be: h1 { font-size: large } p { font-size: 12pt } li { font-size: 90% } strong { font-size: larger }

55. Getting Started: Working with Text Syntax: font: Possible Values: [ || || ]? [ / ]? The font property may be used as a shorthand for the various font properties, as well as the line height. For example, P { font: italic bold 12pt/14pt Times, serif } specifies paragraphs with a bold and italic Times or serif font with a size of 12 points and a line height of 14 points.

56. Getting Started Pseudo-elements: CSS pseudo-elements are used to add special effects to some selectors. The syntax is as follows: The syntax of pseudo-elements: selector:pseudo-element {property: value}

57. Getting Started Pseudo-elements: The :first-letter Pseudo-element The "first-letter" pseudo-element is used to add special style to the first letter of the text in a selector: p:first-letter {color:#ff0000;font-size:xx-large} *The "first-letter" pseudo-element can only be used with block-level elements. *The following properties apply to the "first-letter" pseudo- element:

58. Getting Started Hypertext Links You can easily change this default presentation style of your links using CSS. Here’s a standard example: a { color: green; text-decoration: none; } a:hover { color: red; text-decoration: underline; } This "a" applies to every link that is displayed on your web page, that is, anything that is coded with the tag, without exception, regardless of whether they have class attributes or not.

59. Getting Started CSS provides three pseudo-classes for common cases: The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device). The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

60. Getting Started a:link { color: red } /* unvisited links */ a:visited { color: blue } /* visited links */ a:hover { color: yellow } /* user hovers */ a:active { color: lime } /* active links */ Note that the a:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

61. Getting Started An example of combining dynamic pseudo-classes: A:focus { background: yellow } A:focus:hover { background: white } The last selector matches A elements that are in pseudo-class :focus and in pseudo-class :hover.

62. Getting Started: Block elements tags and tags are naturally displayed block-style. A block-display element will span the full width of the space available to it, and so will start on a new line in the flow of HTML. The flow will continue on a new line after the block-display element. Common HTML elements that are naturally block-display include: Your general-purpose box... All headings Paragraph,, Lists (unordered, ordered and definition),, List items, definition list terms, and definition list definitions Tables Meant for quoting passages of text Indicates a block of preformatted code An input form

63. Getting Started What if we want to only change the appearance of certain paragraphs - not all paragraphs?

64. Getting Started Class Selectors Class selectors can be used to select any HTML elements that have been given a class attribute. Such as and a. For example to select all instances of the intro class, the.intro selector is used below in the style sheet as:.intro { font-weight: bold; }

65. Getting Started Class Selectors The class selectors used to make all text in a paragraph bold orange is: in HTML paragraph content in CSS.code { font-family: Arial, Helvetica, sans-serif; font-size: 0.9em; color: #FF561F; font-weight: bold; } * Do NOT start a class name with a number! It will not work in Mozilla/Firefox

66. Getting Started ID Selectors ID selectors are similar to class selectors. They can be used to select any HTML element that has an ID attribute. However, each ID can be used only once within a document, whereas classes can be used as often as needed. For example, when using selectors for unique sections of a web page aka HTML code such as container, navigation or footer you would use these three IDs:

67. Getting Started ID Selectors When adding these to your CSS code. They would be represented like this: #content { } #navigation { } #footer { } ** Do NOT start an ID name with a number! It will not work in Mozilla/Firefox

68. Getting Started: Should you use ID or Class? While class can be used as many times as needed within a document, ID's can be applied only once within a document; so if you use the same selector more than once, class would be your obvious choice. However, IDs carry more weight than classes. If a class selector and ID selector apply the same property to one element, the ID selector's value would be chosen. For example, h2#into { color: red; } will override h2.intro { color: blue }.

69. Getting Started: Review What is specificity? What does inheritance mean? What is an example of a pseudo-class? What is the difference between a class and an id? How do you change the appearance of text links?