Type and styling links - CSS Notes Type 10-12

Document Sample
Type and styling links - CSS Notes Type 10-12 Powered By Docstoc
					VISA 2P95 Introduction to Web-based Interactive Media                  Jean Bridge, Instructor

CSS Notes – 10-12 - Typography and Links

Review from Last week
Basics of CSS styling

       selector                                           p
       {                                                  {
       property: value;                                   color: red:
       }                                                  }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
       <title>Insert Your Title Here</title>

       <style type="text/css">

              bod y
              bac kg ro un d- co lo r: # 33 000 0;
              col or :# ff ff 99 ;
              wid th : 55 0p x;
              fon t- fa mi ly : Ar ia l;

             fon t- fa mi ly : Ve rd an a;
             fon t- si ze : 14 px ;

       <p>Replace this content with your own.</p>


Typography = art of style and appearance of printed matter
Typography online – font-family, font-size, font-weight, text-transform, letter-spacing, line-
height, text-align.

Typeface = whole family of type - e.g. Times
Font = one instance of the typeface - e.g. Times Italix 12 pt.
CSS to Style – easy to apply and easy to change!

Key concepts for CSS styling of type
See famous_primates.html (minimally styled) and king-kong.html (styled)
Elements nested – e.g. <p> element nested in <body> element
e.g. famous_primates.html <body> element contains child elements:
       <h1> <h2> <h3> <h4>, <p> <blockquote> <ul> <ol> <a> <img>
       in fact
               <em> and <strong> are nested in <p>
               <cite> <abbr> <p> x 2 are nested in <blockquote> (which is nested in <body>)
               <li> is nested in <ul> and <ol> elements.
All elements above are descended form <body>
THEREFORE they inherit any rules applied to <body>
Look at inheritance.html to see how <body> contains all rules that flow to the
Why donʼt heads conform to 14px size?
Principle of specificity dictates that the browserʼs default style sheet is applied to heads on the
page already – it contains a more specific rule
because the browserʼs default for these heads is larger and it applies
when there are conflicting rules controlling the same element – the most specific rule wins.
More later on this.

Specifying type
You can specify a specialized font on your system but you canʼt be assured that it will display
on the end-userʼs computer.
If it is not on the end-userʼs computer the browser default will display.
There are a STANDARD SET OF CORE FONTS that you can be reasonably assured will
display –
   • Andale Mono
   • Arial
   • Arial Black
   • Comic Sans MS
   • Courier New
   • Georgia
   • Impact
   • Times New Roman
   • Trebuchet MS
   • Verdana
   • Webdings
Many people also specify fallback fonts.
      font-family: Bryant, Arial, sans-serif;
      If Bryant isnʼt present, then the browser look for Arial and if itʼs not present it looks for
      the generic font family = a san-serif font.
      NOTE: 5 generic font families
           Serif, San-Serif, Monospace, Cursive, Fantasy

Specifying Type Size
      font-size: 14px
Can specify by pixels, ems or keywords
      Keywords = xx-small to xx-large. Relative to browserʼs medium setting which = 16px
             Lacks precision
      Pixels = easiest method
             Will get consistent sizing – 10px is half the size of 20px
             Problem: IE 6 wonʼt let user resize text if in pixels.
      Ems = more complex – calculated based on font size of parent element

Writing Efficient Rules
Group selectors to keep style sheets lean – e.g.
             H1, h2, h3, h4
             font-family: Arial, san-serif;
             color: #9CC4E5;
             font-size: 36px;
             font-size: 24px;
             font-size: 18px;
             font-size: 14px;

      h1 – h4 headings are in Arial with colour #9CC4E5.
      Size is an addition rule specific to each heading.
      If want to change colour can do it in the group selector – one stop shopping.
Specifying Type Weight
      If you were making up headings, your browserʼs default style sheet would make all
      headings bold. Therefore, if you wanted them to be normal weight, it would have to
      specified –
             h1, h2, h3, h4
             font-weight: normal;
      You can express the font weight property ins keywords or numbers (100, 200, 300, 400)
      400 is equivalent to normal. 700 is equivalent to bold.

Text Transform
      uppercase, lowercase, capitalize
             text-tranform: uppercase;

Specifying Letter Spacing
      Kerning – space inserted between letters
             letter-spacing: 0.4em;
      Use ems to insure that the amount of spacing is in proportion to the size of the h4
      Not recommended for lowercase letter
      Can use negative numbers to tighten spacing

      Control space between words using word-spacing property
             word-spacing: 2em;

Styling Paragraphs
Setting line heights
      In print line height is called leading
      Line height for all elements is dictated by browser.
      Adding some often increases legibility
              line-height: 1.6;
      Note: we didnʼt add unit of measure so that the line height in descendent paragraphs
      will be relative.
Adding Paragraph Indents
      Paragraph is a block-level element and forces a line break so paragraphs are easily
      Soon weʼll be setting the vertical space between paragraphs with margins and it will be
      harder to see paragraph breaks.
      Therefore indents are handy
             text-indent: 2em;

Specifying Alignment of Text
      Left, Right, Centre, Justify
      Browsers default is left alignment
             text-align: right;
      Justify is problematic – short paragraphs can have gaps and rivers of space between

CSS can control whether to display an underline or not.
Default is underlined
An underline is expected. If not present – make sure links stand out from the body of text
Styling links enables the link to react to userʼs interaction
Styled links provide visual feedback to users
It targets a number of pseudo-classes. (more on classes later)
     • link: default state of all unvisited links is blue and underlined.
     • visited: default state of visited links is purple and underlined
     • hover: when mouse is hovering over the link
     • active: when user is activating or clicking the link
     • focus: used to identify a link when user is navigating with the keyboard not the mouse.

   Most basic styling is
     color: red;
Link style demo – famous_primates.html (see finished in king_kong.html)

Style the main link element

       color: #9CC4E5;
       text-decoration: none;                  Switches off underline- so it can
       line-height: 1.5;                       be more effectively styled

Now add pseudo-class for links

       a:link                                  The unvisited link has an
       {                                       underline heavier than default
       border-bottom: 1px solid

       a:visited                               The visited link has a dotted
       {                                       underline and a coloured
       border-bottom: 1px dotted               background

       a:hover                                 The mouse over will reveal a
       {                                       different colour of type and
       color: #26201C;                         background colour but no
       background-color: #EoDFDA;              underline
       border-bottom: none;

       a:active                                The active link as a different
       {                                       colour of underline
       color: #26201C;
       background-color: #9CC4E5;
       border-bottom: none;

       a:focus                                 The focus is styled the same as
       {                                       the hover.
       color: #26201C;
       background-color: #EoDFDA;
       border-bottom: none;

Link pseudo classes much be written in a particular order (as above)
Mnemonic device: LoVe Hate.
In Class work: Style gordo.html to enhance the typography
   1. Change font-family (remove declaration from <p> set it in body. Use fallback
   2. Use grouped selectors. Reflect on inheritance and specificity. Donʼt duplicate
   3. Style the <h4> (References) and use text ransform and letter-spacing.
   4. Style paragraphs. Pay attention to line-height, text-indent and text-aligh.
   5. Style the links. Look at example:
      Improve usability. Use pseudo-classes and experiment with different styles to
      get the best user feedback.

Shared By: