1. Class 4 – Style Sheets

2. What is CSS? CSS is short for Cascading Style Sheets and gives both Web site developers and users more control over how pages are displayed.

3. When did they appear? In 1996, the W3C first recommended the idea of Cascading Style Sheets (CSS) to format HTML documents..

4. Cascading Style Sheets (CSS) In this lesson, you will learn how to create style sheets and apply them to your HTML pages.

5. What are they? They are a set of rules that determine how the styles are applied to the HTML tags in your documents.

6. What are the W3C Recommendations? The CSS recommendation describes the following three types of style sheets:  Embedded  Inline  Linked Let’s look at each one:

7. Embedded Embedded: The style properties are included (within the tags inside the tag) at the top of the HTML document. A style assigned to a particular tag applies to all those tags in this type of document. All the styles are defined at the top of the HTML document within the tags because they contain information about the entire document.

8. Embedded Style Example p {font-family: georgia, serif; font-size: x-small;} hr {color: #ff9900; height: 1px } a:hover {color: #ff0000; text-decoration: none}

9. Inline Styles Inline: The style properties are included throughout the HTML page. Each HTML tag receives its own style attributes as they occur in the page.

10. What did that mean? That means that if you want the same style to appear on all the tags in your document, you would have to type those styles in all the tags. Look at the following example. You are still using the same style properties, as in the previous examples, but now you can see how the two tables would be created using inline styles.

11. Inline Styles con’t Using inline styles, the tag becomes the style attribute. Multiple style properties are still separated by semicolons, but the entire group of properties for each tag is grouped within each HTML tag. This type of style sheet is fine for documents in which you need to apply styles to only one or two elements, but you wouldn't want to do all that work when you have a lot of styles to add.

12. In-Line Style Sheet Example This is text in a paragraph that follows the change of style designated by an in-line style change. This style change applies only to this paragraph and requires a closing tag! This is the same text in a paragraph without a change of style designated by an in-line style change. This style change uses default font sizes and all default settings.

13. External/Linked External style sheets hold all the style properties in a separate file. You then link the file into each HTML document where you want those style properties to appear. Where the stylesheet.css is your css document that holds all the rules for any page that has this link. With this method, you create a separate file called mystyles.css (for cascading style sheet) that contains all your style properties.

14. Changes Because you can apply style sheets to as many HTML documents as you like, making changes takes a matter of minutes rather than days

15. Defining the Rules Style sheet rules are made up of  selectors (the HTML tags that receive the style) and  declarations (the style sheet properties and their values). In the following example, the selector is the body tag and the declaration is made up of the style property (background) and its value (black). This example sets the background color for the entire document to black. body {background:black}

16. Anatomy of a Statement

17. Style Syntax As we mentioned earlier, for a long time there was no such thing as a "web standard". As a result browsers have been very forgiving of HTML that is not written according to the syntax of any one grammar. CSS on the other hand has always been a very specific standard.

18. Style Syntax This means that if you don't get the grammar right, browsers will not be lenient on you. Either your style sheet will not work at all, or it will work in unexpected ways. In the example above you saw what the parts of a style sheet are, and an example of how they are put together. Referring to the example above, here are some simple rules to follow to get your style sheet right every time.

19. Style Syntax 1. Every statement must have a selector and a declaration. The declaration comes immediately after the selector and is contained by a pair of curly braces.

20. Style Syntax 2. The declaration is one or more properties separated by semicolons.

21. Style Syntax 3. Each property has a property name followed by a colon and then the value for that property. There are many different types of value, but any given property can only take certain values as set down in the specification.

22. Style Syntax 4. Sometimes a property can take a number of values, as in the font-family example above. The values in the list should be separated by a comma and a space.

23. Style Syntax 5. Sometimes a value will have a unit as well as the actual value, as in the font-size example above. You must not put a space between the value and its unit.

24. Style Syntax 6. As with HTML, white space can be used to make your style sheet easier to read and write. You should use spaces as in the example above.

25. Style Sheet Dependence Style sheets, when used properly, can be an effective tool for providing a unique and attractive presentation, while still allowing a page to be accessible to all users. However, as soon as a page's message becomes dependent on the style sheet, the page has become a failure on the Web.

26. Style Sheet Dependence Style sheets were designed to allow the author to influence the presentation, but not to control it. Style sheets can be overridden by users who may choose--or require--their own style sheet. For these reasons, authors who depend on a certain style will find their pages inaccessible to a significant portion of users.

27. Style Sheet Dependence con’t Poor uses of style sheets are demonstrated in many so-called CSS galleries. One common hack that has appeared in various places is that of the "drop shadow." This is created by using negative margins, and involves a large amount of dependence on the style sheet. When the style sheet is removed, either at the user's discretion or by using a browser that does not support CSS, the page is often unusable.

28. As an example, take a look at the next slide - SpaceGUN Magazine, a fictional magazine featured in Microsoft's CSS Gallery. SpaceGUN MagazineMicrosoft's CSS Gallery Using Microsoft Internet Explorer with style sheets enabled, the presentation is certainly unique and eye-catching:

29. SpaceGun Magazine

30. Style Sheet Dependence con’t But as soon as style sheets are disabled, the result is very different, even using the same browser:

31. Style Sheet Dependence con’t

32. Quite clearly, the page is unusable on the Web due to its drop shadows and other negative margin tricks that leave many readers with a jumbled mess. The example also shows that dependence on style sheets is a recipe for failure. A Web document is not effective if it is not accessible.

33. Style Sheet Dependence con’t Style sheet designers should take care to always ensure that their Web pages are in no way dependent on the style sheet. Some authors have tried to use the WingDings font to produce glyphs without the hassle and added download time of actual images.

34. Style Sheet Dependence con’t While the motive of reducing download time is admirable, such authoring is dependent on the user having the WingDings font and on the style sheet being enabled--conditions that can never be assured on the World Wide Web.

35. More on Rules If you want to apply the same rules to several HTML tags, you could group those rules together, as in the following example: body, td, h1 { background:black; color:white }

36. Too confusing? This part can be confusing but just remember Remember ANY HTML tag can serve as a selector and have stylesheets declarations attached to it. But what if you want something more complex than that? What if you wanted body text to be green for the first paragraph, purple for the second paragraph, and gray for the third?

37. Classes That's where classes come in. You could create three different classes of p, each one with a different stylesheet declaration. The rules (either embedded in the HTML document or in an external stylesheets file) would look like this: p.first { color: green } p.second { color: purple } p.third { color: gray }

38. Classes con’t And your HTML code would look like this: The first paragraph, with a class name of "first." The second paragraph, with a class name of "second." The third paragraph, with a class name of "third."

39. What to use? In designing your Web site, use a linked/external style sheet to describe your most frequently used styles (the ones that will be formatted in the same fashion for all of the pages in your Web site), such as the heading tags and link tags. Use embedded style sheets to describe the formatting of tags that will remain the same within a single document, or set of documents, such as special table settings or page margins. Use the inline style sheets to describe the formatting of tags that vary, such as for a special callout or sidebar….But you really shouldn’t use the inline at all!

40. It can get confusing very quickly The order in which styles are read by the browser matters. If you had a case of two style properties affecting the exact same selector, the last property to be read would be the one that would apply. In this example, all paragraphs would be yellow: p { color: blue; } p { color: yellow; } In the above example p is the selector, color is the property, blue is the value and Everything inside the { the declaration }

41. Deprecated What does it mean…..exactly? With the advent of CSS, the W3C now discourages the use of many tags from earlier versions of HTML. The tags that they discourage are “deprecated” Just don’t use them because when they finally do go away, the browsers won’t be able to see read your code

42. Deprecated Tags & Attributes (examples) Tags (not to use):  <font…  Attributes: size, color, face  Where x= 1 (smallest) to 7(largest)  Where x = word or color number  Where x=Any installed font; e.g., Arial

43. More tags not to use … Attributes:  background (with tag  align (with tag)

44. More Examples Here are some more examples using the Inline Style Sheet

45. Declarations (What can be changed) color:color name or hex code font-family:familyname  e.g., Arial, Times New Roman, or ….  other choices: serif, sans-serif, cursive, fantasy, monospace.

46. Declarations font-size: ‘size’  where ‘size’ can be  a number to multiply by font-size  a percentage of font-size  an absolute value in pixels, points  Can be words like xx-small

47. Declarations font-style:italic | oblique | normal font-weight:bold | bolder | lighter or any number 100 to 900 (400 = usual bold)

48. Declarations background-color:transparent background-color: a color you choose background-image: URL to an image  Add as attribute to tag  Use an image url(xxx.xxx) Add attribute ‘repeat’ to tile repeat-x to tile image horizontally only Repeat-y to tile image vertically only

49. Declarations Aligning Text  text-align:left | right | center | justify

50. Replaces Deprecated Tags …

51. Resources On my website, www.agrapicapproach.com there are many links, under the Class 4 heading, for material that you will find helpful.www.agrapicapproach.com In this class I only gave you the basics but style sheets have so much more functionality and you can learn so much more! Check out Eric Meyer at http://meyerweb.com/ orhttp://meyerweb.com/ Zen Garden at http://www.csszengarden.com/http://www.csszengarden.com/