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

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.

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.

5
Three ways to employ CSS - 1

• Inline stylelth1 stylecolor red font-style
  italicgt
• new h1lt/h1gt
• - 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 didnt explicitly define in
  CSS will be left to the browsers internal style
  rules.

6
Three ways to employ CSS - 1

• Inline style
• Change the style for the first lth1gt tag
• lth1gtAstronomylt/h1gt
• To
• lth1 stylecolorgold font-familysans-serifgtAs
  tronomylt/h1gt
• Question Will this change affect other ltH1gt tags
  in this document?

7
Three ways to employ CSS - 2

• Document-level style sheet (Embedded style)
• ltstyle typetext/cssgt
• h1 color blue font-style italic
• lt/stylegt
• - 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 ltstylegtlt/stylegt 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
Three ways to employ CSS - 2

• Document-level style sheet (Embedded style)
• Add the following code after the lttitlegt tag
• ltstylegt
• h1 colorgold font-familysans-serif
• lt/stylegt
• Question Will this change affect all the ltH1gt
  tags in this document?

9
Three ways to employ CSS - 3

• External style sheet --- Linked external style
  sheet
• ltlink hrefURL relrelation_type typeCSS_typegt
• - Add a ltlinkgt 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, relstylesheet.
• - CSS_type indicates the language used in the
  linked document, for a link to a cascading style
  sheet, typetext/css.
• - Use attribute title in ltlinkgt to make it
  available for later reference by the browser.
• (Well talk about whats in a .css file later.)

10
Three ways to employ CSS - 3

• Linked external style sheet
• 1. Save the following code in a mws.txt file
• h1 colorgold font-familysans-serif
• 2. Delete the style declaration between the
  ltstylegt tags.
• 3. Insert the following line above the ltstylegt
  tag
• ltlink hrefmws.txt relstylesheet
  typetext/cssgt
• Note there is no ltstylegt and lt/stylegt in the
  mws.txt file.
• Question Will this change affect all the ltH1gt
  tags in this document?

11
Three ways to employ CSS - 3

• External style sheet --- Imported external style
  sheet
• ltstylegt
• _at_import url(FileName.css)
• style declarations
• lt/stylegt
• - Add a special command (aka at-rule) in the
  ltstylegt tag within the head of a document.
• - _at_import expects a URL parameter that locates
  the external CSS file.
• - _at_import must appear before any conventional
  style rules
• - You can _at_import a CSS file that contains other
  _at_imports.

12
Three ways to employ CSS - 3

• Imported external style sheet
• 1. Save the following code in a mws.txt file
• h1 colorgold font-familysans-serif
• 2. Delete the style declaration between the
  ltstylegt tags.
• 3. Insert the following line between the ltstylegt
  tags
• _at_import url(mws.txt)
• Note there is no ltstylegt and lt/stylegt in the
  mws.txt file.
• Question Will this change affect all the ltH1gt
  tags in this document?

13
Three ways to employ CSS - 3

• Linked vs. imported external style sheet
• In theory
• - With multiple ltlinkgt tags, the browser should
  prompt and let the user choose one of the linked
  sheets.
• - Multiple _at_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
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.

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 Bs parent
  element, B is As descendant or child element.
• Principle of inheritance styles defined for
  parent element are transferred to that elements
  descendants.
• A style defined differently in a child element
  can override the one defined in the parent
  element.

• lthtmlgt
• _ltheadgt
• _lttitlegt
• _ltbodygt
• _lth1gt
• _lth2gt
• _ltpgt
• _ltbgt
• _ltigt

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 colorgreen
• h1, h2, h3 colorgold
• p colorblack
• b colorblue

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 H1h1, colorcoLoRColor.

18
Style syntax (for embedded and external CSS)

• Grouping selectors
• h1, h2, p, b colorgold
• font-familysans-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
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
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
Style classes

• Regular classes
• 1. You add the class attribute to the tag
• ltp classabstractgt This is the abstract
  paragraph.
• lt/pgt
• ltp classequationgt abc-5
• lt/pgt
• ltp classcenteredgt This paragraph should be
  centered.
• lt/pgt

22
Style classes

• Regular classes
• 2. Then define these classes in your style
  sheet
• ltstylegt p.abstract font-styleitalic
  margin- left0.5cm margin-right0.5cm
• p.equation font-familysymbol p.centered,
  h2 text-aligncenter colorred
  font-familycourier new
• lt/stylegt

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.

24
Style classes

• Generic classes
• In style sheet .italic font-styleitalic
• In HTML
• ltp classitalicgt and lth3 classitalicgt- Define
  a class without associating it with a particular
  tag.
• - Apply this generic class to a variety of tags.

25
Style classes

• ID classes
• In style sheet yellow coloryellow
• h1blue colorblue
• In HTML
• lth1 idbluegt and ltp idyellowgt- 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
Style classes

• Pseudo classes (hyperlinks)
• alink colorblue
• aactive colorred font-weightbold
• avisited colorpurple
• - Allows you to define the display for certain
  tag states.
• - Attached to the tag name with a colon, instead
  of a period.
• alink links that are not selected and have not
  been visited.
• aactive links that are currently selected by
  the user and are being processed by the browser.
• avisited links that have been visited by the
  user.

27
Style classes

• Pseudo classes (Interaction)
• ahover text-decoration underline
• focus font-weightbold
• ahover 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?
• ahover colorred text-transform uppercase
  font-weightbold

28
Style classes

• Mixing classes
• a.plainlink, a.plainactive, a.plainvisited
  colorblue
• a.coollink text-styleitalic
• a.coolactive text-weightbold font-size150
• a.coolvisited text-stylenormal
• - A link with no style class attribute ltagt will
  follow the browser display convention.
• - A lta classplaingt tag will follow the plain
  version always blue, no matter the state of the
  link.
• - A lta classcoolgt tag will follow the cool
  version of ltagt.
• Be careful when you adjust the font size, the
  browser will have to re-render the content of the
  doccument.