Cascading Style Sheets

Introduction

Cascading Style Sheets are used to specify particular styles for a character, a word, a group of words, a page or a whole web site. Although you can change almost any behavior using these styles, including some behaviors that were not possible in HTML, CSS don't constitute an independent or complete language, the styles are used to control the display of items or sections on a web page.

There are three main techniques used to implement styles: inline, embedded, or linking. These techniques are not exclusive; in other words, you can use just one, two, or all of them on the same page and on as many pages necessary.

The inline use of styles consists of implementing a style right where the involved character, word, or group of words, is involved. To use a style in this case, you include as if it were an attribute of the current tag, using the style word.

While the inline style only controls a specify section, you can create a whole section of styles to use on the page. This section is included in the head section of the page, using some of the HTML tags and specifying the desired characteristics. This technique, like the next one also allows creating new styles, called classes, that include specific instructions not necessarily associated with HTML tags. Eventually, you use these classes inside of HTML tags. That is the embedded implementation.

Another technique that is particular useful consists of creating a particular file that contains all necessary styles, then linking to that fine from any page that needs to use these styles.


Font Family Examples

Serif  Times New Roman, Courier New, Garamond, Georgia,
Sans Serif  Arial, Verdana, Tahoma, Helvetica, Comic Sans MS,
 

 

Practical Learning: Introducing CSS

  1. Start your text editor

  2. In your text editor, type the following:
     

    <html>
    <head>
    <title>Grier Summer Camp</title>
    </head>
    <body>

    <p>Located in the heart of Rockville, Maryland, the Grier Summer Camp is an attractive tourist setting aimed at entertaining and supporting youth activities during academic year's summer vacation.</p>

    <p>We feature a state of the art, regularly renovated mansions with world class sport facilities.</p>

    <p>Please consult our catalogue and see why the Washington Tribune called us "the most attractive summer camp of the area."</p>

    <span>Our camps include:</span>

    <ul>
      <li>Seven Locks</li>
      <li>Havel Barrow</li>
      <li>Coolfront Island</li>
      <li>Dry Spring</li>
    </ul>

    <center>
    <table>
      <tr>
        <td>Contact Us</td>
        <td>Pictures</td>
        <td>Catalog Request</td>
      </tr>
    </table>
    </center>

    </body>
    </html>

  3. Click File -> Exit

  4. your text editor asks whether you want to save the file. Click Yes

  5. In the Save As dialog box, click the arrow of the Save In combo box and select Desktop (we select Desktop so that whenever you want, you be able to locate the files we are going to create and delete them).

  6. Click the Create New Folder button

  7. Type styles and press Enter.

  8. Double-click the new folder styles to display it in the Save In combo box.

  9. Click the arrow of the Save As Type combo box and select All Files (*)

  10. Delete the content of the File Name text box and type home.htm

  11. Click Save.

  12. Assuming that no other application is running (or at least you have access to the desktop), on the Desktop, double-click the styles icon.

  13. In the Styles window, double-click home. The browser, with the home file, opens. If necessary, maximize the browser window.

  14. To view the source code, right-click inside of the browser and click View Source.
    That calls your text editor and reveals the code of the HTML file.

  15. To implement an inline style, change the first <p> as follows:  

  16. <p style="color: red">

  17. To save the file, on the main menu of your text editor, click File -> Save.

  18. Right-click inside of the browser and click Refresh.

  19. Although the last style was associated with a <p> tag, you can assign a different style to another similar tag on the same page.
    To see an example, make the following change to the second<p> tag:

    <p style="font-weight: bold">

  20. You can combine different styles associated with a particular tag.
    To see some examples, make the following changes:
     

    <p style="font-family: Westminster, Verdana, Sans Serif; font-weight: regular">We feature a state of the art, regularly renovated mansions with world class sport facilities.</p>

    <p style="font-family: Georgia, 'Times New Roman', Serif; color:#ff00ff; font-size: 12pt">Please consult our catalogue and see why the Washington Tribune called us "the most attractive summer camp of the area."</p>

  21. Save the file and refresh the browser.

    MSIE Browser Result

  22. To create style section that would impact the whole page, create the styles in the head section as follows:
     

    <style type"text/css">
    p {
      font-family: Verdana, Tahoma, Sans Serif;
      font-size: 10pt;
      color: blue}
    td { font-family: Georgia, Garamond, Serif;
    font-size: 12pt;
    color: #ff8080 }
    li { color: #ff9900 }
    </style>

    </head>
    <body>

  23. Save the file and preview it in the browser.
    Notice that the sections that already have defined styles keep them. The styles that are not defined inline are influenced by the global styles in the head section.

  24. In your text editor, remove the inline styles of the 2nd and 3rd <p> tags.

  25. Save the file and preview it in the browser.

  26. Something that is not available in HTML is the ability to change the link's color when the mouse is positioned on them. Besides the link colors that can be specified in HTML, CSS provide more options to control the appearance of links.
    As an example, add the following to the styles of the head section:
     

    a:link {
      font-family: Verdana, Helvetica, Arial;
      font-size: 10pt;
      color:green;
      font-weight: bold;
      text-decoration: none }
    a:alink {
      color: fuchsia;
      text-decoration: none }
    a:visited {
      color: brown;
      text-decoration: none }
    a:hover {
      color: red;
      font-weight: bold;
      text-decoration: underline }
    </style>

    </head>

  27. Also make the following changes to the last table on the page:
      

  28. <center>
    <table>
      <tr>
        <td><a href="mailto:webmaster@gscinc.com">Contact Us</td>
        <td><a href="pictures.htm">Pictures</a></td>
        <td><a href="catrequest.htm">Catalog Request</a></td>
      </tr>
    </table>
    </center>

  29. Save the file and preview it in the browser

  30. Position your mouse on the last words on the same page. Notice that a link changes when the mouse is above it and displays differently than the other links.

  31. To use one of the links, click Pictures

  32. After you have received a broken link, on the browser, click the Back button.

  33. Notice that the Pictures link now displays different than the other links because it has been accessed, even though it is broken. Also notice that since the a:visited style doesn't specify a font, the visited link uses the global font.

  34. Position the mouse on Pictures again and notice that it changes.

  35. You can also create classes that affect the same tag but depending on where you want the change to appear.
    To see an example, first change the li style in the head section as follows:
     

  36. li.fuchsia {
      font-weight: bold;
      color: #ff00ff }
    li.olive {
      font-weight: regular;
      color: #808000 }
    li.red {
      font-family: Comic Sans MS, Comic Sans Serif, Sans Serif;
      font-weight: italic;
      color: #ff0000 }

     
  37. Second, change the list section in the file as follows:
      

    <ul>
      <li class=fuchsia>Seven Locks</li>
      <li>Havel Barrow</li>
      <li class=olive>Coolfront Island</li>
      <li class=red>Dry Spring</li>
    </ul> 

  38.  
  39. Save the file and preview it in the browser.

  40. You can also create a class that is not attached to a particular tag and specify the styles you want. Once you have created the class, you can use with the tag that can take advantage of that class.
    To create such a class, start its name with a period.
    To see an example, in the head section, make the following change:

    .fancy { color: gray; font-size: 7.5pt }</style>

  41. In the file, change the 2nd <p> tag as follows:
     

    <p class="fancy">

  42. Change the <span> tag as follows:

  43. <span class="fancy">Our camps include:</span>

  44. You can create a separate file devoted to the styles and link any you want to it.
    To start, on the main menu of your text editor, click File -> New (if you receive a message asking whether you want to save the save, click No (it doesn't even matter because we will come back to it soon)

  45. In the empty file, type the following:
    an close everything.
     

    p {
      font-family: Verdana, Tahoma, Sans Serif;
      font-size: 10pt;
      color: blue}
    td {
      font-family: Times New Roman, Georgia, Garamond;
      font-size: 12pt;
      color: #ff8080 }
    li {
      font-family: Comic Sans MS, Comic Sans Serif, Sans Serif;
      font-weight: italic; color: #ff0000 }
    li.fuchsia {
      font-weight: bold;
      color: #ff00ff }
    a:link {
      font-family: Verdana, Helvetica, Arial;
      font-size: 10pt;
      color: orange;
      font-weight: bold;
      text-decoration: none }
    a:alink {
      font-family: Verdana, Helvetica, Arial;
      font-size: 10pt;
      color: #66CCFF;
      font-weight: bold;
      text-decoration: none }
    a:visited {
      font-family: Verdana, Helvetica, Arial;
      font-size: 10pt;
      color: fuchsia;
      font-weight: bold;
      text-decoration: none }
    a:hover {
      font-family: Verdana, Helvetica, Arial;
      font-size: 10pt;
      color: red;
      font-weight: bold;
      text-decoration: underline } 

  46. Save the file as gcs.css in the Styles folder we have been using in this lesson.

  47. Open the source code of the home page we have used so far.

  48. Make a few changes to it so that when you finish, it look like this (this changes are necessary to illustrate our point):
     

    <html>
    <head>
    <title>Grier Summer Camp</title>

    <link rel=StyleSheet type="text/css" href="gsc.css">

    <style>
    li.fuchsia {
      font-weight: bold;
      color: #ff00ff }
    </style>

    </head>
    <body>

    <p style="color: red">Located in the heart of Rockville, Maryland, the Grier Summer Camp is an attractive tourist setting aimed at entertaining and supporting youth activities during academic year's summer vacation.</p>

    <p>We feature a state of the art, regularly renovated mansions with world class sport facilities.</p>

    <p>Please consult our catalogue and see why the Washington Tribune called us "the most attractive summer camp of the area."</p>

    <span>Our camps include:</span>

    <ul>
      <li class=fuchsia>Seven Locks</li>
      <li>Havel Barrow</li>
      <li>Coolfront Island</li>
      <li>Dry Spring</li>
    </ul>

    <center>
    <table>
      <tr>
        <td><a href="mailto:webmaster@gscinc.com">Contact Us</td>
        <td><a href="pictures.htm">Pictures</a></td>
        <td><a href="catrequest.htm">Catalog Request</a></td>
      </tr>
    </table>
    </center>

    </body>
    </html>

  49. Save the file and preview it in the browser

 
 

Previous Copyright 2000-2007 FunctionX, Inc. Next