1 / 28

Multimedia and the World Wide Web

Multimedia and the World Wide Web. HCI 201 Lecture Notes #7A. What will we learn today?. Introduction to Cascading Style Sheet (CSS) Three styles Style precedence Style syntax Style classes. Case Study 5.

Download Presentation

Multimedia and the World Wide Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related