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

Multimedia and the World Wide Web

HCI 201 Lecture Notes #7A

HCI 201 Notes #7A 2

What will we learn today?

Introduction to Cascading Style Sheet (CSS) Three styles Style precedence Style syntax Style classes

HCI 201 Notes #7A 3

Case Study 5Chris 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 #7A 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.

HCI 201 Notes #7A 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.

HCI 201 Notes #7A 6


Inline styleChange 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?

HCI 201 Notes #7A 7


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.

HCI 201 Notes #7A 8


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?

HCI 201 Notes #7A 9


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

HCI 201 Notes #7A 10


Linked external style sheet1. Save the following code in a “mws.txt” file


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?



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.



Imported external style sheet1. Save the following code in a “mws.txt” file


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?



Linked vs. imported external style sheetIn 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.


Style precedence (Cascading rules)

1. Sort by originA 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 classProperties 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 orderThe property specified latest takes precedence.


Style inheritance

<html>

|_<head>

| |_<title>

|_<body>

|_<h1>

|_<h2>

|_<p>

|_<b>

|_<i>

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


Style inheritance

Inheritance and overridingWhat 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}


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.



Grouping selectorsh1, 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.



Contextual selectorsol 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”.



Contextual selectorsAdd the following lines into the “mws.txt”ul li {list-style: circle}blockquote {color: maroon; font-style: italic}address {color: blue}


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>


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>


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.


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.


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


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.


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}


Style classes

Mixing classesa.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.

Documents

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