Web Authoring: Using Cascading Style Sheets

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 StructureHousekeeping

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 CSSIntroductionAdding CSSBrowser ConsiderationsLists of AttributesModifying the Attributes of ElementsEmbedding StylesGetting StartedHypertext LinksSetting Foreground and Background ColorsAdding Background ImagesWorking With FontsBlock Elements

6. Course Outline:Going The Extra Mile Absolute and Relative PositioningWorking With ListsBulleted ListsNumbered ListsWorking With TablesSpacingPaddingBordersImplementationCreating MenusIntroduction to Page LayoutMethods of Using CSS for Page LayoutBasic Design ExamplesPutting Together Layout and Menu Systems

7. Introduction to CSS: Why use CSS?Separation of content from presentationXHTML 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 CSSThree 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 CSSCascading 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 CSSWorld 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 ConsiderationsCascading 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 CSSCreating a Rule SetA 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 CSSCreating a Rule SetThe 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, h2Next, 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 CSSCreating a Rule SetDeclarations 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 CSSCreating a Rule SetYou 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<div> and <span> elementsThe <div> 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 <div>element is usually used to contain logical divisions of content, such as navigation and footer information. The <span> tag is similar to the <div> tag except that it is not a block level element.

23. Introduction to CSSUsing commentsComments 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 <a> that are placed in an <li> 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 ConsiderationsWhen 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 • ClassificationProperties • 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 UnitsA 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 CSSBoth 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 UnitsA 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 UnitsA 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: URLsA 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 CSSURLsExamples: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 StylesInline 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:<body><p style="font-family: arial, helvetica, sans-serif; margin: 1em;      padding: 1em; background-color: gray; width: 10em;"> Lorem ipsum dolor sit amet, consectetuer</p></body>

35. Introduction to CSS: Header StylesTheir 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':<style type="text/css"> /* CSS goes here */ </style>

36. Introduction to CSS: Embedded StylesThe 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:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> replace with your document's title </title> <style type="text/css"> body { color: black; background: white; } </style></head> <body> replace with your document's content </body> </html>

37. Introduction to CSS: External StylesOne 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:<head><link rel="stylesheet" type="text/css" href="something.css"> </head>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: ReviewWhy 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: SpecificityIf 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: SpecificityThe 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: InheritenceAny 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 <html> element - sometimes referred to as the root element. And inside this will be the <body> element. And then the <body> 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 PropertiesCSS properties allow authors to specify the foreground color and background of an element:backgroundcolorbackground color

45. Getting Started: Setting the Background PropertyThe 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 PropertyThe 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 PropertiesThe 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 PropertiesThe 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 PropertiesThe 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 PropertiesWhen 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.