LIS650 lecture 2 Major CSS by nef90815


									LIS650 lecture 2
   Major CSS
  Thomas Krichel

•   how to give style sheet data
•   style locator information
•   some important properties
•   Nielsen on style sheets and contents design
•   some more properties
                 Style sheets
• Style sheets are the officially sanctioned way to
  add style to your document
• We will cover Cascading Style Sheets CSS.
• This is the default style sheet language.
• We are discussing version 2.1. This is not yet a
  W3C recommendation, but it is in last call.
      What is a style sheet about
• It is about two or three things
   – Where to find what to style?
   – How style it?
      • Which property to set?
      • Which value to give to the property?
• In the second part I will use the following syntax
   – Write property names as {property-name: }
   – Write property values as ‗value‘
        Why are they ―cascading‖
• You can have many style data in different
  places. Style data comes in the form of rules: ―at
  this place, do that‖.
• Where there are many rules, there is potential
  for conflict. We do not learn the exact rules here
  but note
   – Some rules are read after others other. Later rules
     override earlier rules.
   – Some rules concern more specific locations than
     others. The specific rules override general rules.
• A style sheets is a set of one or more rules.
                  inline style
• You can add a style attribute to any tag that
  admits the core attributes as in
  <tag style="style">
  where style is a style sheet.
• Example:
  <h1 style="color: blue">I am so blue</h1>
• Such a declaration only takes effect for the tag
• I do not recommend this.
              Document level style
• You can add a style tag as part of the header
• <style> takes the core attributes.
• It takes a "type" attribute, "text/css" is the default
• It takes the "media" attribute for the intended
  media, with values
   –   ‗screen‘ (default)       – ‗tty‘
   –   ‗projection‘             – ‗handheld‘
   –   ‗print‘                  – ‗braille‘
   –   ‗embossed‘               – ‗aural‘
   –   ‗all‘
  linking to an external style sheet
• This is the best way! Use the same style sheet
  file for all the pages in your site, by adding to
  every pages something like
• <link rel="stylesheet" type="text/css"
• where URI is a URI where the style sheet is to
  be downloaded from. On wotan, this can just be
  the file name.
• The <link> tag must appear in the <head>, it can
  not appear in the <body>, sorry!
             In our situation…
• <link rel="stylesheet" type="text/css"
• Then create a file main.css with a simple test
  rule such as:
  h1 {color: blue}
• main.css is just an example filename, any file
  name will do.
• Upload and try it out!
              basic style syntax
• selector {property1: value1; property2: value2
• selector is a selector (see following slides)
  property is the name of a property
  value is the value of a property
• note colon and semicolon use!
• all names and values are case-insensitive
• Examples
  – h1 { color: grey; text-align: center}
  – .blue {color: blue} /* yes, with a dot */
     comments in the style sheet
• You can add comments is the style sheet by
  enclosing the comment between /* and */.
• This comment syntax comes from the C
  programming language.
• This technique is especially useful if you want to
  remove code from your style sheet temporarily.
                basic selector
• the basic selector is a comma-separated list of
  elementary selectors.
• Often, the elementary selectors are HTML tags,
  h1, h2 {text-align: center}
  will center all <h1> and <h2> tag contents
• but the selectors can be more precise, we are
  only look at one alternative here, class selectors.
               class selectors
• This is the standard way to style up a class
  .class { property1: value1, property2: value2 …}
   will give all the properties and values to any tag
  in the class class.
• Recall HTML, when you have set the you can
  apply the class
  <tag class="class">
  will apply all the attributes of the class class to
  the tag tag. Note that you can place any tag into
  several classes, use blanks to separate the
  class names
             visual style sheets
• In this class we ignore aural style sheets and
  work only on visual ones.
• We have two important concepts.
  – The canvas is the support of the rendering. There
    may be several canvases on a document. On screen,
    each canvas is flat and of infinite dimensions.
  – The viewport is the part of the canvas that is currently
    visible. There is only one viewport per canvas.
• We will now examine some important property
  values is visual style sheet regarding
  – colors
  – distances
                values: colors
• they follow the RGB color model.
• expressed as three hex numbers 00 to FF.
• The following standard color names are defined
  –   Black = #000000      Green = #008000
  –   Silver = #C0C0C0     Lime = #00FF00
  –   Gray = #808080       Olive = #808000
  –   White = #FFFFFF      Yellow = #FFFF00
  –   Maroon = #800000     Navy = #000080
  –   Red    = #FF0000     Blue = #0000FF
  –   Purple = #800080     Teal = #008080
  –   Fuchsia= #FF00FF     Aqua = #00FFFF
• other names may be supported by browsers.
             important properties
• We will now look at the properties as defined by
  CSS. These are the things that you can set
  using CSS.
• We group properties into six groups
  –   colors, and background
  –   boxes and layout
  –   fonts
  –   text
  –   lists                (next class)
  –   tag classification   (next class)
•   relatively
    – em: the {font-size} of the relevant font
    – ex: the {x-height} of the relevant font
    – px: pixels, relative to the viewing device
• absolutely
    –   in: inches — 1 inch is equal to 2.54 centimeters.
    –   cm: centimeters
    –   mm: millimeters
    –   pt: points — 1 point is equal to 1/72th of an inch
    –   pc: picas — 1 pica is equal to 12 points
• percentage, depending on other values. That other value
  may be
    – some property for other element
    – same property of an ancestor element
    – the value used in a formating context.
   the default style sheet (extract)
• blockquote, body, dd, div, dl, dt, h1, h2, h3, h4,
  h5, h6, ol, p, ul, hr, pre { display: block }
• li { display: list-item }
• head { display: none }
• body { margin: 8px; line-height: 1.12 }
• h1 { font-size: 2em; margin: .67em 0 }
• h2 { font-size: 1.5em; margin: .75em 0 }
• h3 { font-size: 1.17em; margin: .83em 0 }
• h4, p, blockquote, ul, ol, dl, { margin: 1.12em 0 }
• h5 { font-size: .83em; margin: 1.5em 0 }
• h6 { font-size: .75em; margin: 1.67em 0 }
     the default style sheet (extract)
•   h1, h2, h3, h4, h5, h6, b, strong { font-weight: bolder }
•   blockquote { margin-left: 40px; margin-right: 40px }
•   i, cite, em, var, address { font-style: italic }
•   pre, tt, code, kbd, samp { font-family: monospace }
•   pre { white-space: pre }
•   big { font-size: 1.17em }
•   small, sub, sup { font-size: .83em }
•   sub { vertical-align: sub }
•   sup { vertical-align: super }
•   del { text-decoration: line-through }
•   hr { border: 1px inset }
•   ol, ul, dd { margin-left: 40px }
•   ol { list-style-type: decimal }
    color & background properties
• {color: } sets the foreground color of a tag.
• {background-color: } gives the color of the
• {background-image: url(URL) } places a picture
  found at a URL URL.
• {background-repeat: } can take the value ‗repeat‘
  (default), ‗repeat-x‘, ‗repeat-y‘, and ‗no-repeat‘.
• {background-attachment: } can take the value of
  ‗fixed‘ or ‗scroll‘ (default) to say if the image
  scrolls with the viewport
  color & background properties II
• {Background-position: } property places the
  background image. It can take values
  –   '0% 0%' to '100% 100%'
  –   'length length' to put length of offset from top left
  –   mixing both is allowed
  –   ‗top‘, ‗center‘,‗bottom‘ and ‗left‘, ‗right‘, ‗center‘ can be
      used too
                   Normal flow
• In general, very piece of HTML is placed into a
  conceptual entity called a box.
• In visual formatting, we can think about the box
  as a rectangle that fills the material that is being
   – For in-line elements, the boxes are set horizontally
     next to each other.
   – For block-level elements, the boxes are set vertically
     next to each other.
                   the box model
• The total width of the box that the box takes is
  the sum of
   –   the left and right margin
   –   the left and right border width
   –   the left and right padding
   –   the width of the box‗s contents
• A similar reasoning holds for the height of a box.
                 box properties I
• {border-color: } can hold up to four colors,
  separated by blanks
   – one value means: all borders have the same color
   – two values mean: first number for top and bottom,
     second for left and right
   – three values mean: first sets top, second left and
     right, third bottom
   – four values mean: first sets top, second sets right etc.
• {border-width: } can hold up to four widths, for
  example "thin think medium 2mm"
                 box border properties
• {border-style:} {border-top-style} {border-right-style:} {border-
  bottom-style:} {border-right-style:} take the following values
   –   none     No border. {border-width:} becomes zero
   –   hidden   Same as 'none', except in terms of border conflict resolution
   –   dotted   The border is a series of dots.
   –   dashed   The border is a series of short line segments.
   –   solid    The border is a single line segment.
   –   double   The border is two solid lines.
   –   groove   The border looks as though it were carved into the canvas.
   –   ridge    The border looks as though it were coming out of the canvas.
   –   inset    The border makes the box look like embedded in the canvas.
   –   outset   The border makes the box look like coming out of the canvas.
               box properties II
• {border-top-width: }, {border-bottom-width: },
  {border-left-width: } and {border-right-width: }
  also exist.
• same properties exists for {margin-top: },
  {margin-bottom: } etc and {padding-top: },
  {padding-bottom: } etc.
• {float: } can be one of 'left', 'right' or 'none' which
  is the default. If a float is set, the text near the
  tag floats on the left or right site of the tag
  contents. You can use this to create run-in
                  box properties III
• {width:} sets the total width of the box and {height:} sets
  the total height of the box, both take a dimension or the
  word 'auto' e.g. img {width: 100px; height auto}
• {clear: } tells the user agent whether to place the current
  element next to a floating element or on the next line
  below it.
   – value 'none' tells the user agent to put contents on either side of
     the floating element
   – value 'left' means that the left side has to stay clear
   – value 'right' means that the right side has to stay clear
   – value 'all' means that both sides have to stay clear
• 'static'    The box is a normal box, laid out according to the
  normal flow.
• 'relative' The box's position is calculated according to the
  normal flow. Then it is offset relative to its normal position.
  The position of the following box is not affected.
• 'absolute' The box's position (and possibly size) is specified
  with the {left:}, {right:}, {top:}, and {bottom:} properties that
  specify offsets with respect to the box's containing tag. There
  is no effect on sibling boxes.
• 'fixed'    The box's position is calculated according to the
  'absolute' model, but the reference is not the containing tag
       • For continuous media, the box is fixed with respect to the viewport
       • For paged media, the box is fixed with respect to the page
        properties with {position:}
• {top:}, {right:}, {bottom:}, {left:} set offsets if
  positioning is relative, absolute or fixed.
• They can take length values, percentages, and
• the effect of 'auto' depends on which other
  properties have been set to 'auto‗

• Now check the examples in .doc/examples on
  the course home page.
                 Nielson's book
•   page design            16—97
•   content design         98—160
•   site design           162—259
•   intranet design       260—293
•   accessibility         296—311
•   i18n                  312—344
•   future predictions    346—376
•   conclusions           378—396
             screen real estate
• on a screen that displays a web page, as much
  as possible should be the contents of the page.
• Ideally the contents should occupy more than
  50% of the screen. Most often it does not.
• Some white space is almost inevitable
• Cut navigation to below 20% of screen
• When examining a page for usability, remove
  features by trial and error. If the page is still
  usable without the feature, remove it. Simplicity
  wins over complexity.
            cross-platform design
• Unlike traditional GUI systems, the web offers very
  little to control the user.
  – They could come right into the middle of the site from a
    search engine.
  – They could use a variety of devices, e.g. web browser for
    car drivers
• Most pages only look good on an 17in monitor with
  at least 1024×768 pixels. It should not be that way.
• WYSIWYG is dead!
• Separate contents from presentation, use style
   resolution independent design
• Never use fixed width in pixels except perhaps
  for thin stripes and lines
• Make sure that design looks good with small and
  large fonts in the browser.
• Graphics must work at 100dpi and better.
• Text in graphics to be avoided.
• Provide a print version for long documents.
              be conservative
• Avoid non-standard HTML code.
• Take account of installation inertia. Figures for
  1998/1999 show 1% of browsers updated a
• Only use technology that is at least 1 year old, if
  not at 2 years old. Let other make the errors that
  come with trial.
   semantics versus presentation
• The original HTML tags were all based on
  semantics. For example <h2> is a second level
• Semantic encoding was lost with the
  "extensions" invented by the browser vendors.
• There will be a wide variety of browser in the
  future. It is already impossible to test pages on
  all user agents.
• Style sheets already make it possible to style the
  page according to the "media" used by the user
           watch response times
• Users loath waiting for downloads.
• Classic research by Mille in 1968 found:
   – delay below 0.1 second means instantaneous
     reaction to the user
   – 1 second is the limit for the user's train of thought not
     to be disrupted
   – 10 seconds is the limit to keep the user interested,
     otherwise they will start a parallel task
• low variability of responses is also important but
  the web is notoriously poor for this.
           factors affecting speed
• The user's perceived speed depends on the
  weakest of the following
  –   the throughput of the server
  –   the server's connection to the Internet
  –   the speed of the Internet
  –   the user's connection to the Internet
  –   the rendering speed of the computer
         making speedy pages
• keep page sizes small
• reduce use of graphics
• use multimedia only when it adds to the user's
• use the same image several times on the site
• make sure that the / appear at the end of the
  URL for directories. downloads faster
            know your limits
• 1 second implies maximum pages size of 2KB
  on a modem, 8 KB on ISDN, and 100 KB on a
  T1. 10 seconds implies maximum size of 34KB
  on a modem, 150KB on an ISDN and 2MB on
  T1, Nielson writes.
• I doubt these numbers.
• It would be good to find an update on these
      get some meaning out fast
• What matters most is the time until the user sees
  something that makes sense. The time for the
  full page to be available matters less. therefore
  – top of the page should be meaningful without images
    having been downloaded
  – use meaningful "alt" attribute for images
  – use "width" and "height" attribute so that the user
    agent can build the page quickly
  – cut down on table complexity. top table should be
    particularly easy.
                 text properties I
• {letter-spacing: } set the spacing between letters,
  takes a length value or the word 'normal'
• {word-spacing: } same as for letter-spacing
• {line-height: } sets the distance between several
  lines of a tag's contents,
   – in pt or pixel numbers
   – % age (referring to a percentage of current font size)
   – with a number (referring to a multiplicity of the size of
     the text)
   – 'normal'
               text properties II
• {text-align: } can take the values ‗left‘ ‗right‘
  ‗center‘ and ‗justify‘.
• {text-decoration: } can take the values
  ‗underline‘, ‗overline‘, ‗line-through‘ and ‗blink‘.
• {text-indent: }, {margin-left: } take length units but
  are best expressed in the relative "em" unit.
• {text-shadow: color horizontal-offset vertical-
  offset blur-radius }. Example
     span.glow { background: white; color: white; text-
     shadow: black 0px 0px 5px; }
              text properties III
• {float: } can be set to ‗left‘, ‗right‘ and ‗none‘.
• {width: } and {height: } can also be set.
• {vertical-align: } can take the values ‗baseline‘,
  ‗middle‘, ‗sub‘, ‗super‘, ‗text-top‘, ‗text-bottom‘,
  ‗top‘, ‗bottom‘, as well as percentages.
• {text-transform: } can take the value ‗uppercase‘,
  ‗lowercase‘, ‗capitalize‘ and ‗none‘.
                 font properties I
• {font-family:} accepts a comma-separated list of
  font names
• there are five generic names, one should be
  quoted last as a fall-back
   – ‗serif‘       – ‗sans-serif‘   – ‗cursive‘
   – ‗fantasy‘     – ‗monospace‘
• example
  *:lang(ja-jp) {font-family: "Heisei Mincho W9",
               font properties II
• {font-size: } accepts sizes as npt, n%, +npt,
  where n is a number, or some sizes like
   – ‗xx-small‘      – ‗x-small‘   – ‗small‘     – ‗medium‘
   – ‗large‘ – ‗x-large‘ – ‗xx-large‘ – ‗larger‘ – ‗smaller‘
  incremental font sizes may not be handled
  properly by the browser.
• {font-style: } can be either ‗italic‘, ‗oblique‘ or
               font properties III
• {font-variant: } can be either ‗normal‘ or ‗small
• {font-weight: } can be
   – a number between 100 for the thinnest and 900 for
     the boldest. 400 is the normal.
   – ‗normal‘       – ‗bold‘     – ‗bolder‘  – ‗lighter‘
• {font-stretch: } can be any of
   – ‗ultra-condensed – ‗extra-condensed‘ – ‗condensed‘
   – ‗semi-condensed        – ‗normal‘ – ‗semi-expanded‘
   – ‗expanded‘     – ‗extra-expanded‘ – ‗ultra-expanded‘
            other font properties
• There is a whole bunch of other properties
   – {unicode-range: }    – {stemv: }    – {stroke: }
   – {units-per-em: }     – {stemh: }    – {bbox: }
   – {definitions-src:}   – {ascent: }   – {dscent: }
   – {baseline: }         – {widths: }   – {mathline: }
   – {centerline: }       – {topine: }   – {panose1: }
• There also is a {font: } property that allows you
  to put several of the previous properties
• But all that is not worth learning. Keep fonts

     Thank you for your attention!

To top