Multimedia and the World Wide Web

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

2. What will we learn today? • Introduction to Cascading Style Sheet (CSS) • Three styles • Style precedence • Style syntax • Style classes 2

3. 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. 3

4. 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. 4

5. Three ways to employ CSS - 1 • Inline style<h1 style=“color: red; font-style: italic”> new h1</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. 5

6. Three ways to employ CSS - 1 • Inline style Change the style for the first <h1> tag <h1>Astronomy</h1> To: <h1 style=“color:gold; font-family:sans-serif”>Astronomy</h1> Question: Will this change affect other <H1> tags in this document? 6

7. Three ways to employ CSS - 2 • Document-level style sheet (Embedded style) <style type=“text/css”> h1 {color: blue; font-style: italic} </style> - 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 <style></style> 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. 7

8. Three ways to employ CSS - 2 • Document-level style sheet (Embedded style) Add the following code after the <title> tag <style> h1 {color:gold; font-family:sans-serif} </style> Question: Will this change affect all the <H1> tags in this document? 8

9. Three ways to employ CSS - 3 • External style sheet --- Linked external style sheet <link href=URL rel=relation_type type=CSS_type> - Add a <link> 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 <link> to make it available for later reference by the browser. (We’ll talk about what’s in a *.css file later.) 9

10. 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 <style> tags. 3. Insert the following line above the <style> tag <link href=“mws.txt” rel=“stylesheet” type=“text/css”> *Note: there is no <style> and </style> in the mws.txt file. Question: Will this change affect all the <H1> tags in this document? 10

11. Three ways to employ CSS - 3 • External style sheet --- Imported external style sheet <style> @import url(FileName.css); style declarations </style> - Add a special command (aka “at-rule”) in the <style> 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 @imports. 11

12. 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 <style> tags. 3. Insert the following line between the <style> tags @import url(mws.txt); *Note: there is no <style> and </style> in the mws.txt file. Question: Will this change affect all the <H1> tags in this document? 12

13. Three ways to employ CSS - 3 • Linked vs. imported external style sheet In theory - With multiple <link> 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. 13

14. Style precedence (Cascading rules) • 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. • 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. • Sort by order The property specified latest takes precedence. 14

15. 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. <html> |_<head> | |_<title> |_<body> |_<h1> |_<h2> |_<p> |_<b> |_<i> 15

16. 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} 16

17. 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. 17

18. 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. 18

19. 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”. 19

20. 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} 20

21. Style classes • Regular classes 1. You add the class attribute to the tag: <p class=abstract>This is the abstract paragraph. </p> <p class=equation>a=b+c-5 </p> <p class=centered>This paragraph should be centered. </p> 21

22. Style classes • Regular classes 2. Then define these classes in your style sheet: <style> 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} </style> 22

23. 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. 23

24. Style classes • Generic classes In style sheet: .italic {font-style:italic} In HTML: <p class=italic> and <h3 class=italic>- Define a class without associating it with a particular tag. - Apply this generic class to a variety of tags. 24

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

26. 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. 26

27. 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} 27

28. 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 <a> will follow the browser display convention. - A <a class=plain> tag will follow the “plain” version: always blue, no matter the state of the link. - A <a class=cool> tag will follow the “cool” version of <a>. *Be careful when you adjust the font size, the browser will have to re-render the content of the doccument. 28