1. Multimedia and the World Wide Web HCI 201 Lecture Notes #7A

2. HCI 201 Notes #7A2 What will we learn today? Introduction to Cascading Style Sheet (CSS) Three styles Style precedence Style syntax Style classes

3. HCI 201 Notes #7A3 Case Study 5 Chris Watson asked us to assist her in the design of the web site of her company, Maxwell Scientific. Because this web site will eventually contain a large number of pages, Chris wants our design to be easy to maintain and change. To avoid the situation where a simple modification means editing every single page in the web site, we will use cascading style sheet to accomplish this design task.

4. HCI 201 Notes #7A4 Introduction to CSS HTML focuses on content rather than page design and layout, for faster page loading. A little control over the page layout Use HTML tag extensions, convert text to images, use tables. A Style is a rule that defines the appearance of an element in the document. A Style Sheet is a collection of styles for a web page or site. A Cascading Style Sheet is a style sheet using cascading rules.

5. HCI 201 Notes #7A5 Three ways to employ CSS - 1 Inline style new h1 - Include a style attribute in the tag. - Define the properties and their values in style. - Browser will use these style values to render the content of this (instance of the) tag --- limited scope. - Easy to sprinkle throughout your document, but hard to maintain. - Use inline style only if you do not want the same effects globally. *Anything that you didn’t explicitly define in CSS will be left to the browser’s internal style rules.

6. HCI 201 Notes #7A6 Three ways to employ CSS - 1 Inline style Change the style for the first tag Astronomy To: Astronomy Question: Will this change affect other tags in this document?

7. HCI 201 Notes #7A7 Three ways to employ CSS - 2 Document-level style sheet (Embedded style) h1 {color: blue; font-style: italic} - Place a list of layout rules within the head of a document. - type is the type of style language. “text/css” is the default and also the most common CSS style language. “text/javascript” means JavaScript style sheet. - Definitions in affect (overwrite) all the defined tags within this document --- easy to change and maintain. - Inline style of a specific tag overwrites its definition in document- level styles.

8. HCI 201 Notes #7A8 Three ways to employ CSS - 2 Document-level style sheet (Embedded style) Add the following code after the tag h1 {color:gold; font-family:sans-serif} Question: Will this change affect all the tags in this document?

9. HCI 201 Notes #7A9 Three ways to employ CSS - 3 External style sheet --- Linked external style sheet - Add a tag within the head of a document. - URL is the URL of the linked document (*.txt or *.css file). - relation_type indicates the relationship between the linked document and the web page, for a link to a style sheet, rel=stylesheet. - CSS_type indicates the language used in the linked document, for a link to a cascading style sheet, type=text/css. - Use attribute title in to make it available for later reference by the browser. (We’ll talk about what’s in a *.css file later.)

10. HCI 201 Notes #7A10 Three ways to employ CSS - 3 Linked external style sheet 1. Save the following code in a “mws.txt” file h1 {color:gold; font-family:sans-serif} 2. Delete the style declaration between the tags. 3. Insert the following line above the tag *Note: there is no and in the mws.txt file. Question: Will this change affect all the tags in this document?

11. HCI 201 Notes #7A11 Three ways to employ CSS - 3 External style sheet --- Imported external style sheet @import url(FileName.css); style declarations - Add a special command (aka “at-rule”) in the tag within the head of a document. - @import expects a URL parameter that locates the external CSS file. - @import must appear before any conventional style rules - You can @import a CSS file that contains other @import s.

12. HCI 201 Notes #7A12 Three ways to employ CSS - 3 Imported external style sheet 1. Save the following code in a “mws.txt” file h1 {color:gold; font-family:sans-serif} 2. Delete the style declaration between the tags. 3. Insert the following line between the tags @import url(mws.txt); *Note: there is no and in the mws.txt file. Question: Will this change affect all the tags in this document?

13. HCI 201 Notes #7A13 Three ways to employ CSS - 3 Linked vs. imported external style sheet In theory - With multiple tags, the browser should prompt and let the user choose one of the linked sheets. - Multiple @import sheets will form a single set of style rules for your document, with cascading effects. In practice - Popular browsers treat multiple linked style sheets like imported ones by cascading their effects. - Imported styles override linked external styles.

14. HCI 201 Notes #7A14 Style precedence (Cascading rules) 1.Sort by origin A style defined closer to a tag has precedence over a more distance style. A inline style overrides a document-level style, which overrides an external style. 2.Sort by class Properties defined as a class of a tag (will be discussed later) has precedence over the one defined for the tag in general. 3.Sort by order The property specified latest takes precedence.

15. HCI 201 Notes #7A15 Style inheritance |_ | |_ |_ You can display the relationship among the elements in your document using a tree diagram. If element A contains element B, A is B’s parent element, B is A’s descendant or child element. Principle of inheritance: styles defined for parent element are transferred to that element’s descendants. A style defined differently in a child element can override the one defined in the parent element.

16. HCI 201 Notes #7A16 Style inheritance Inheritance and overriding What is the tree-structure of the tags in our page? What happens if we change the “mws.txt” as body {color:green} h1, h2, h3 {color:gold} p {color:black} b {color:blue}

17. HCI 201 Notes #7A17 Style syntax (for embedded and external CSS) Selectors and declarations selector {attribute1: value1; attribute2: value21 value22; …} - selector identifies an element in your document (h1, p, etc.). - attributes and values within the curly brackets indicate the styles applied to that element throughout your document. - For attribute that has multiple values, separate the values with a space. - Not case sensitive: H1=h1, color=coLoR=Color.

18. HCI 201 Notes #7A18 Style syntax (for embedded and external CSS) Grouping selectors h1, h2, p, b {color:gold; font-family:sans-serif} - Apply the same declaration to a group of elements by including all their names separated by commas. - Easier to type, understand, and modify. - Less time for transmission.

19. HCI 201 Notes #7A19 Style syntax (for embedded and external CSS) Contextual selectors ol li {list-style: upper-roman} ol ol li {list-style: upper-alpha} ol ol ol li {list-style: decimal} - Define the style of an element only when it is nested within other tags. h1 em, p strong, address {color: red} - Define the style of an element only under specific context. *In “selector section”, a comma means “or”, a space means “and”.

20. HCI 201 Notes #7A20 Style syntax (for embedded and external CSS) Contextual selectors Add the following lines into the “mws.txt” ul li {list-style: circle} blockquote {color: maroon; font-style: italic} address {color: blue}

21. HCI 201 Notes #7A21 Style classes Regular classes 1. You add the class attribute to the tag: This is the abstract paragraph. a=b+c-5 This paragraph should be centered.

22. HCI 201 Notes #7A22 Style classes Regular classes 2. Then define these classes in your style sheet: p.abstract {font-style:italic; margin- left:0.5cm; margin-right:0.5cm} p.equation {font-family:symbol} p.centered, h2 {text-align:center; color:red; font-family:courier new}

23. HCI 201 Notes #7A23 Style classes Regular classes - Defining a class is to append a period-separated class name as a suffix to the tag name as the selector. E.g., p.centered - A class name can be any sequence of letters, numbers, and hyphens, but must begin with a letter. - A class name is case sensitive: Abstract ≠ abStRaCT - Class may be included with other selectors, separated by commas. - Class cannot be nested: p.equation.centered is not allowed.

24. HCI 201 Notes #7A24 Style classes Generic classes In style sheet:.italic {font-style:italic} In HTML: and - Define a class without associating it with a particular tag. - Apply this generic class to a variety of tags.

25. HCI 201 Notes #7A25 Style classes ID classes In style sheet: #yellow {color:yellow} h1#blue {color:blue} In HTML: and - Define a style class that can be applied with the id attribute. - The value of the id attribute must be unique to exactly one tag within the document. - Try to stay with the conventional style classes and use the id attribute only for element identification purpose.

26. HCI 201 Notes #7A26 Style classes Pseudo classes (hyperlinks) a:link {color:blue} a:active {color:red; font-weight:bold} a:visited {color:purple} - Allows you to define the display for certain tag states. - Attached to the tag name with a colon, instead of a period. a:link : links that are not selected and have not been visited. a:active : links that are currently selected by the user and are being processed by the browser. a:visited : links that have been visited by the user.

27. HCI 201 Notes #7A27 Style classes Pseudo classes (Interaction) a:hover {text-decoration: underline} :focus {font-weight:bold} a:hover : when mouse moves over a hyperlink. :focus : when the element (not necessarily a hyperlink) is under focus: when the user tabs to it, clicks on it, etc. What happens to the hyperlinks if we add this line in the mws.txt? a:hover {color:red; text-transform: uppercase; font-weight:bold}

28. HCI 201 Notes #7A28 Style classes Mixing classes a.plain:link, a.plain:active, a.plain:visited {color:blue} a.cool:link {text-style:italic} a.cool:active {text-weight:bold; font-size:150%} a.cool:visited {text-style:normal} - A link with no style class attribute will follow the browser display convention. - A tag will follow the “plain” version: always blue, no matter the state of the link. - A tag will follow the “cool” version of. *Be careful when you adjust the font size, the browser will have to re-render the content of the doccument.