Multimedia and the World Wide Web HCI 201
Multimedia and the World Wide Web HCI 201 Lecture Notes #7 A # HCI 201 Notes #7 A
What will we learn today? n n n Introduction to Cascading Style Sheet (CSS) Three styles Style precedence Style syntax Style classes HCI 201 Notes #7 A 2
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. HCI 201 Notes #7 A 3
Introduction to CSS n n HTML focuses on content rather than page design and layout, for faster page loading. A little control over the page layout n n 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. n n 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. HCI 201 Notes #7 A 4
Three ways to employ CSS - 1 n Inline style <h 1 style=“color: red; font-style: italic”> new h 1</h 1> - 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. HCI 201 Notes #7 A 5
Three ways to employ CSS - 1 n Inline style Change the style for the first <h 1> tag <h 1>Astronomy</h 1> To: <h 1 style=“color: gold; font-family: sansserif”>Astronomy</h 1> Question: Will this change affect other <H 1> tags in this document? HCI 201 Notes #7 A 6
Three ways to employ CSS - 2 n Document-level style sheet (Embedded style) <style type=“text/css”> h 1 {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 Java. Script 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 documentlevel styles. HCI 201 Notes #7 A 7
Three ways to employ CSS - 2 n Document-level style sheet (Embedded style) Add the following code after the <title> tag <style> h 1 {color: gold; font-family: sans-serif} </style> Question: Will this change affect all the <H 1> tags in this document? HCI 201 Notes #7 A 8
Three ways to employ CSS - 3 n External style sheet --- Linked external style sheet <link href=URL rel=relation_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. ) HCI 201 Notes #7 A 9
Three ways to employ CSS - 3 n Linked external style sheet 1. Save the following code in a “mws. txt” file h 1 {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 <H 1> tags in this document? HCI 201 Notes #7 A 10
Three ways to employ CSS - 3 n External style sheet --- Imported external style sheet <style> @import url(File. Name. 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. HCI 201 Notes #7 A 11
Three ways to employ CSS - 3 n Imported external style sheet 1. Save the following code in a “mws. txt” file h 1 {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 <H 1> tags in this document? HCI 201 Notes #7 A 12
Three ways to employ CSS - 3 n 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. HCI 201 Notes #7 A 13
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. HCI 201 Notes #7 A 14
Style inheritance <html> |_<head> | |_<title> |_<body> |_<h 1> |_<h 2> |_<p> |_<b> |_<i> HCI 201 Notes #7 A • 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. 15
Style inheritance n 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} h 1, h 2, h 3 {color: gold} p {color: black} b {color: blue} HCI 201 Notes #7 A 16
Style syntax (for embedded and external CSS) n Selectors and declarations selector {attribute 1: value 1; attribute 2: value 21 value 22; …} - selector identifies an element in your document (h 1, 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: H 1=h 1, color=co. Lo. R=Color. HCI 201 Notes #7 A 17
Style syntax (for embedded and external CSS) n Grouping selectors h 1, h 2, 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. HCI 201 Notes #7 A 18
Style syntax (for embedded and external CSS) n 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. h 1 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”. HCI 201 Notes #7 A 19
Style syntax (for embedded and external CSS) n Contextual selectors Add the following lines into the “mws. txt” ul li {list-style: circle} blockquote {color: maroon; font-style: italic} address {color: blue} HCI 201 Notes #7 A 20
Style classes n 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> HCI 201 Notes #7 A 21
Style classes n Regular classes 2. Then define these classes in your style sheet: <style> p. abstract {font-style: italic; margin - left: 0. 5 cm; margin-right: 0. 5 cm} p. equation {font-family: symbol} p. centered, h 2 {text-align: center; color: red; font-family: courier new} </style> HCI 201 Notes #7 A 22
Style classes n 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≠ab. St. Ra. CT - Class may be included with other selectors, separated by commas. - Class cannot be nested: p. equation. centered is not allowed. HCI 201 Notes #7 A 23
Style classes n Generic classes In style sheet: . italic {font-style: italic} In HTML: <p class=italic> and <h 3 class=italic> - Define a class without associating it with a particular tag. - Apply this generic class to a variety of tags. HCI 201 Notes #7 A 24
Style classes n ID classes In style sheet: #yellow {color: yellow} h 1#blue {color: blue} In HTML: <h 1 id=blue> and <p id=yellow> - 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. HCI 201 Notes #7 A 25
Style classes n 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: 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. HCI 201 Notes #7 A 26
Style classes n 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} HCI 201 Notes #7 A 27
Style classes n 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. HCI 201 Notes #7 A 28
- Slides: 28