Docstoc

CSS Notes – 10-5

Document Sample
CSS Notes – 10-5 Powered By Docstoc
					VISA 2P95 Introduction to Web-based Interactive Media              Jean Bridge, Instructor


CSS Notes – 10-05

Default styles
What weʼve been using up to now is browserʼs default (automatic) styles:
black text, Times font, blue links and purple for visited links.
We can override these defaults
What weʼve made thus far look like a website circa 1993

HTML makes it possible for you to include (non semantic) visual elements in the tags.
Even in the mid 90ʼs could specify the font, colour, etc of each tag.
This created extra markup and show downloads
CSS changes the paradigm. It came into use in 1996.
Only in last few years has browser support been reliable enough for us to depend on CSS for
layout and design. It creates lean pages. It is easy to maintain and easy to read and use
It improves accessibility

Tag Soup
See a marked up version of a King Kong page using old fashioned <font> tags to style text
and <table> tags to control layout:
   <table border=”1” wideth=”488” cellspacing=”3” cellpadding=”3”>
   <tr><td width=”120”><font face=”Arial, Helvetica, Geneva” size=”5”
   color=”gray”> <b>The Legend</b></font></td></tr>

   <tr><td><font face=”Arial, Helvetica, Geneva” size=”3”
   color=”black”>King Kong is the name of a </font><i><font face=”Arial,
   Helvetica, Geneva” size=”3” color=”black”>fictional giant ape
   </font></i><font face=”Arial, Helvetica, Geneva” size=”3”
   color=”black”>from the legendary <b><font face=”Arial, Helvetica,
   Geneva” size=”3” color=”black”>Skull Island</font></b><font
   face=”Arial, Helvetica, Geneva” size=”3” color=”black”>, who has
   appeared in several works since 1933. Most of these bear his name,
   and include the groundbreaking 1933 film, the film remakes of 1976 and
   2005, and numerous sequels.</font>
   <br>&nbsp;<br>

   <font face=”Arial, Helvetica, Geneva” size=”3” color=”black”>In the
   original film, the character’s name is Kong – a name given to him by
   the inhabitants of Skull Island, where Kong lived along with a number
   of dinosaurs which miraculously escaped extinction. ‘King’ is an
   appellation added by an American film crew led by Carl Denham, who
   captures Kong and takes him to New York City to be exhibited as the
   ‘Eighth Wonder of the World.</fond></td></tr>

   <tr><td><img src=”king_kong.jpg” alt=”king Kong” width=”500”
   height=”375” hspace=”1” vspace=”1” border=”1” align=”left”></td></tr>
   </table>
This marked up every <p> with presentational information
Whenever it needs to be updated or corrected, each instance of something like the font style or
colour need to be changed individually.

Take the same page - remove the presentation font and table tags and it looks like this:

   <h2>The Legend</h2>

   <p>King Kong King Kong is the name of a <em>fictional giant ape
   </em>from the legendary <strong> Skull Island</strong>, who has
   appeared in several works since 1933. Most of these bear his
   name, and include the groundbreaking 1933 film, the film remakes
   of 1976 and 2005, and numerous sequels.</p>

   <p>In the original film, the character’s name is Kong – a name
   given to him by the inhabitants of Skull Island, where Kong
   lived along with a number of dinosaurs which miraculously
   escaped extinction. ‘King’ is an appellation added by an
   American film crew led by Carl Denham, who captures Kong and
   takes him to New York City to be exhibited as the ‘Eighth Wonder
   of the World.</p>

   <img src=”king_kong.jpg” alt=”king Kong” width=”500”
   height=”375” class=portrait” />

The use of the font tags and other presentational markup is inefficient and hard to edit and
update. The first example is 1,396 characters and the second is only 799 characters.

CSS fixes this!
Allows you to select a specific element you want to style (e.g. <p> and target all <p> with one
style rule.
You simply add a layer of style.


WHAT IS CSS?
It is another language with its own basic principles

Before CSS, in HTML, style was written into each element – e.g.
   <font color=”teal”>King Kong is the name of a fictional giant ape from
   the legendary skull Island. . . </font>

To style every paragraph we needed to include additional markup in the <font> tag every single time.

With CSS you remove the <font> tags and wrap the paragraph in <p> tags that are targeted by a
CSS rule. For example:
   <p>King Kong is the name of a fictional giant ape from the legendary
   skull Island. . . </p>
The CSS rule would look like this:
     p
     {
     color: teal;
     }

If you want to change your mind and choose red paragraphs…simply change the rule to
       p
       {
       color: red:
       }

Each Rule has a Declaration and a selector - a property and a value.
      selector
      {
      property : valu e;
      }




      p targets <p>
      Whats between { and } contains the style
      color: red; is the declaration
      property and value are separated by a : (colon)
      declaration ends with a ; (semi-colon)
       p { colo r: red ; }
              or
       p {
             colo r: red ;
             }
              or
       p
       {
       color: r ed;
       }
       Each of these are correct. The third is preferred and easier to read.

       What if you have several declarations for the <p>?

                            p
                            {
       declaration 1        font-fam ily: Arial;
       declaration 2        font-siz e: 12px;
       declaration 3        font-wei ght: bold;
       declaration 4        color: red;
       declaration 5        background-col or: ye llow;
                            }

Adding CSS to a web page
a) Embed style sheet into the HTML for the page
b) Link to an external style sheet

Ultimate goal is to use an external style sheet
But…for now we are going to use embedded styles so we can fine tune and test the effects of
the CSS as we develop our pages.
You may, as you develop your final website, want to use external style sheets.

It is possible to use inline styling in specific <p> tags as needed – not too dissimilar from
<font> tag
Like this:
       <p style=”color: red;”>King Kong is the name of a fictional
       giant ape from the legendary Skull Island…</p>

This is useful in edge case scenarios only.


Adding the embedded style sheet

Remember our template for a web page?
www.webstandardistas.com/02/template.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
       <title>Insert Your Title Here</title>

      <style type="text/css">

             body
             {
             background-color: #330000;
             color:#ffff99;
             }
       </style>
</head>
<body>
       <p>Replace this content with your own.</p>
</body>
</html>

<STYLE> ELEMENT IS IN THE <HEAD> ELEMENT
ALL STYLE RULES ARE WRITTEN BETWEEN AND OPENING <STYLE> AND CLOSING
</STYLE>


Notes on COLOR
      Famous_primates.html
      Weʼve used keywords to describe color – 16 exist
             aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purpole, red,
             silver, teal, white and yellow.
      To describe more colours – use Hexidecimal notation
      These are 6 digit machine-readable names always open with #
      e.g. red = #FFoooo
      Use the colour selector at: http://www.webstandardists.come/color
      Or use PhotoShop colour picker

Styling the <body>
This styles EVERYTHING that displays within the body element

   1. add colour to background

             <style t ype=”text/cs s”>

             body
             {
             backgrou nd-col or: #26201C;
             }

             </style>
      Results:
      With background colour added.
      Matches Famous Primates Brand image to background

      2. Add text colour so you can see the text against the dark ground
             <style t ype=”text/cs s”>

             body
             {
             color: # F3F1EC
             backgrou nd-col or: #26201C;
             }

      Results
      With text colour added.
      Useful to set a contrasting text colour to insure legibility

      3. Change line length
      Paragraphs occupy the full width of the browser window.
      Long line difficult to read (to find beginning after end of line).
      (Too short of a line is frustrating too)
      50 to 60 characters is considered ideal line length.
             <style t ype=”text/cs s”>

             body
             {
             color: # F3F1EC
             backgrou nd-col or: #26201C;
             width: 5 50px;
             }

Styling the headings: <h1> and <h2>
      Weʼre still in the style section of the document

      1. Add style to <h1>
             <style t ype=”text/cs s”>

             body
             {
             color: # F3F1EC
             backgrou nd-col or: #26201C;
             width: 5 50px;
             }

             h1
             {
             font-fam ily: A rial;
            font-siz e: 36p x;
            color: # 9CC4E5S
            }

      Weʼve chosen Arial font and the size is slightly larger than the browser default.
      Colour is a light blue.

      2. Now style <h2>

            h1
            {
            font-fam ily: A rial;
            font-siz e: 24p x;
            color: # 9CC4E5S;
            }

      See results
      Note on font-size. It is in pixels. Can use other measures (%, ems or keywords)
      More later.

   Inheritance
   Do not need to repeat font-family: Arial; for h1 and h2 because it is already in body.
   h1 and h2 are nested within the body.
   Therefore they inherit their style from body unless a new one is declared.

Styling the paragraphs <p>

   1. Style <p>
   May not want <p> to be same font as body (and heads)
   When you style <p> differently you override the body style.
   This is specificity

            p
            {
            font-fam ily: V erdana;
            font-siz e: 14p x;
            }

   Check results


   Commenting
     A different form of code than html <!--     -->
     CSS comments are
     Opening with /*
     Closing with */
        A useful way to keep track of changes or to add notes for reference.
        Or to temporarily disable a declaration or rule you are not using at the moment.
         Or use it to label sections of your CSS
         e.g.
         /*
         Typography
         ****************
         */

In Class
Add CSS to your existing two pages (index.html + another).
Add <style> tag
Style the <body>
       Include colour
Style h1, h2 and h3
Style the paragraphs
Add comment.
Validate


Homework
Create three linked and styled pages (in addition to index.html)
This must be online – in public_html folder on Badger account or on other remote web
host.

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:8
posted:2/24/2011
language:English
pages:8