1. Introduction to Web Authoring Bill Hart-Davidson hartdav2@msu.edu AIM: billhd30 Session 11 www.msu.edu/~hartdav2/wa.html

2. Today in Class… Fun with CSS!

3. A brief profile of CSS Cascading style sheets is a specification created by the W3C which allows web developers to create style documents to control textual features and the positioning of objects on the page. CSS lets you separate content from presentation.

4. What is CSS? Multiple styles can be defined and used in individual HTML documents and across multiple HTML documents (fonts, spacing/placement, colors) Browser follows an order of interpretation (aka, a cascade) of the style definitions 3 W3C CSS standards (CSS1 and CSS2 are current; CSS3 in development)

5. Browser: Rendered View Page.html page.css In most cases, you will have two documents controlling how a page looks on the screen. One html file and one css file.

6. Styles in HTML In html, style attributes that describe how text or other elements should display can be incorporated into tags, thus: Hi! Problems arise when you need to change styles frequently!

7. Some problems with integrated style/content? each instance of a style must be hand coded, meaning that any document with lots of style changes becomes labor intensive mantaining a consistent look and feel across pages is tough on a large site making style changes to multiple pages is difficult and very time consuming

8. Styles in CSS In CSS, style attributes can be defined once – either in the head of a document or in a separate style sheet document – and referenced whenever needed. So if this represents my standard body text style: Hi! I can simply define the tag to display all text as sans-serif, in the point size I want…

9. Styles in CSS, 2 I can simply define the tag to display all text as sans-serif, in the point size I want… P { font-family: Helvetica, Sans-Serif; font size: 9pt; }

10. The Logic of Styles in CSS CSS allows you to attach display information to most HTML elements. A CSS rule is the basic unit of a style sheet. A rule first names an HTML element (like a body text paragraph ) and then describes how that element should display. Thus, a rule contains a selector and a declaration.

11. Types of style sheets CSS defines 3 essential style sheets Inline Embedded Linked

12. Inline style Inline uses the style= attribute Here’s a paragraph with 28pt font size. Controls style on an element basis

13. Embedded style 1 Embedded uses tags Controls style on a page basis Use to protect browsers that don’t recognize tags

14. Embedded style 2 <!-- h2 { font-type: Arial,sans serif; font-size: 40pt; font-weight: bold } -->

15. Linked style Linked style uses same syntax as embedded style but is in a separate.css file that you link to from the HTML file requesting the style Controls style more globally, spanning documents or an entire Web site

16. Linked style 2 HTML file using the linked style uses tag within tag to link to it

17. Linked style 3 Here’s the style definition in the linked_style.css file h1 { font-family: Arial,sans-serif; font- size: 48pt; font-weight: bold }

18. Style hierarchy Style sheets work together in a cascading manner Inline trumps embedded and linked Embedded trumps linked So use linked for global, generic types of things and keep to a minimum Use other 2 types for fine tuning

19. CSS Syntax CSS rules have the following structure: selector {property1 : value; property2 : value} P {font-family : sans-serif; font size : 9} With this rule applied, everything enclosed by a tag will display in sans-serif, 9pt. Did he say enclosed ?

20. CSS will make your old HTML look uhhhhgly! CSS references objects – in most cases, chunks of text or images enclosed by tags – so you must define as an object any text that you want to reference in a style sheet. This means: You have to close those tags

21. CSS will make your old HTML look uhhhhgly, 2 It also means… You define object Classes, ID’s and learn their properties and value ranges You learn to use wildcard tags like and to define sub-sections of text within the body of a document You have to get good at designing documents…thinking ahead what will help both content developers and readers

22. CSS Classes…naming objects In CSS, a class refers to a particular category of a more general tag. Let’ say you wanted odd and even table cells to be different colors for easier scanning… TD {font-face : sans-serif; font-size : 12pt}.even {bgcolor : #FFFFFF}.odd {bgcolor : #CCCCCC}

23. CSS Classes…cont. In your HTML code for the table, you simply reference the class to invoke the style: display this text with a white background and this text with a grey background TD {font-face : sans-serif; font-size : 12pt}.even {background-color : #FFFFFF}.odd {background-color : #CCCCCC}

24. Getting more specific…ID’s You can set ID’s for specific kinds of objects too by giving them a unique ID name and set of display rules. Let’s say, for example, we want a table row that serves as a column header… it could be different than our odd or even classes of rows and even different from our default row look.

25. An ID rule Here, I have added a new ID to our TR rules Now, I can specify a row as a header: Red, sans-serif, 12pt type on a white background, por favor TR {font-face : sans-serif; font-size : 12pt}.even {background-color : #FFFFFF}.odd {background-color : #CCCCCC} #header {color : red}

26. & are your friends & are your friends and tags allow you define exceptions to the general rules of your body text…and they are helpful tools for document designers and web developers is usually used to designate styles for block elements that should stand apart from the body text…like callout quotes. Everything inside a tag takes on the attributes…and you can specify classes and ids for too!

27. More on More on The tag is usually used to change the display attributes of a short run of text or objects within a block-level element (such as a paragraph or table cell). I might use, for example, to define a look for code examples (like the one below) that is different than the body text… TR {font-face : sans-serif; font size : 12pt}

28. Seeing a document as a collection of objects… All of these tags, attributes, rules, selectors, declarations…what do they mean? They are all tools you use well ONLY if you can see a document as a collection of objects…so, let’s practice.