An Introduction to Cascading Style Sheets

Document Sample
An Introduction to Cascading Style Sheets Powered By Docstoc
					Tom Osman                     Cascading Style Sheets             17 February 2010



An Introduction to Cascading Style Sheets

Session Aims:
By the end of this session you should be able to:

    Describe the main reasons for using a CSS
    Identify four types of Cascading Style
    Construct a working CSS using correct syntax
    Develop a minimum of two web pages that are linked to a common CSS
    Change the values in a CSS and observe the resultant changes in
       dependant web pages

This introduction to the use of Cascading Style Sheets does not attempt to
cover all of the issues involved, rather, it aims to introduce you to the basic
concepts and explores some of the main ways in which a CSS (cascading
Style Sheet) can enable you to maintain a large web site.


Web Site Maintenance – a major problem?
Imagine that you have a web site that has grown to consist of many
interlinked pages, maybe hundreds or even thousands of pages. Imagine also
that after (say) a year of development your clients wish to change some of the
features throughout the site. It may be that a new design specification
(possibly based on user feedback) requires the appearance of all links to be
changes from the default settings to a new set of colours, or perhaps every
Heading at level 1 needs to be changed from the existing font to another
(different) font. If you had to edit each page in your site, the task of
successfully maintaining your site would be extremely difficult if not
impossible. CSS make the task of maintenance easy, but only if they are used
rigorously throughout each page on your site.


What is a Cascading Style Sheet (CSS)?

The essential task of a CSS is to distinguish between the design of an
(X)HTML document and the structure of the document. A CSS provides us
with a way of defining a set of styles that can be applied to various (X)HTML
elements e.g. <p>, <h1>, <table> etc.. By using CSS’s we can achieve a
much greater degree of control over the visual and audio aspects of a web
page.




The Northern College                                                  Page 1 of 15
Tom Osman                        Cascading Style Sheets                  17 February 2010


Cascading Styles can be defined in four ways; the Cascading in a CSS is
done in the order shown below.
                 Most Specific                   1.   Inline
                                                 2.   Embedded
                                                 3.   Linked
                 Least Specific                  4.   Imported


INLINE Style
An Inline style is the most specific way of applying a style to an (X)HTML
element. The style is inserted using the style attribute. The following code
would cause a web browser to render a specific heading in green (figure 1).


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

      <head>
           <title>Green Heading</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

      </head>

      <body>
            <h1 style="color: green">This heading is in Green</h1>
            <h1>This heading is a level 1 heading in the default colour</h1>
            <h2>This is a Level 2 heading</h2>
            <h3>This is a level 3 heading</h3>
            <p>This is paragraph number 1.</p>
            <p>This is paragraph number 2.</p>
      </body>
</html>




The Northern College                                                           Page 2 of 15
Tom Osman                        Cascading Style Sheets       17 February 2010




Figure 1: Heading Level 1 in green (the Browser is Opera))


Embedded Style
An embedded style has a wider scope than an inline style. The embedded
style is defined in the <head></head> section of a web page and affects every
relevant tag on that page (but no other page).

The code shown below depends upon a class (called orange); this is defined
in the <head></head> section. The class has to have a name and the name
                             .
must begin with a full stop ( ).

The form of a class definition is:
                 <classname> {
                       <property>: <value>;
                       etc. …
                 }


The class definition has to be hidden from older browsers that cannot
recognise style sheets so the style definition

              .orange {
                   color: orange;
              }
is hidden between (X)HTML comments (<!-- and -->).



The Northern College                                              Page 3 of 15
Tom Osman                        Cascading Style Sheets                  17 February 2010


               <!--
               .orange {
                    color: orange;
               }
               -->
Finally, the the entire class definition needs to be enclosed within a style
container tag.

            <style type="text/css">
                  <!--
                      .orange {
                         color: orange;
                      }
                  -->
            </style>


The complete code is shown below.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
             <title>orange body</title>
             <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <style type="text/css">
               <!--
               .orange {
                     color: orange;
               }
               -->
            </style>
      </head>

      <body class = orange>
            <h1 style="color: green">This heading is in Green</h1>
            <h1>This heading is a level 1 heading in the default colour</h1>
            <h2>This is a Level 2 heading</h2>

            <h3>This is a level 3 heading</h3>
            <p>This is paragraph number 1.</p>
            <p>This is paragraph number 2.</p>
      </body>
</html>




The Northern College                                                           Page 4 of 15
Tom Osman                     Cascading Style Sheets             17 February 2010


The preceding code gives the following web page (Figure 2).




Figure 2: Orange text within the <Body> tag (Browser – Netscape)


By amending the <body> tag so that it refers to the class defined in the
<head</head> section of the page, we can change the attributes of all tags
that occur within the <body> tag.
                   <body class = orange>



Inheritance:
Why is all of the text in orange except for the first heading which is still
in green?

The answer to this question lies in the notion of inheritance. Simply, all of the
tags contained within the <body> and </body> tags will inherit all of the
attributes of the <body> tag.

So why is the first heading still in green?
Because we defined that specific <h1> tag to be green using an INLINE style.
The more specific style overrides the more general style. In other words an
INLINE style will always override an EMBEDDED style.




The Northern College                                                  Page 5 of 15
Tom Osman                       Cascading Style Sheets                 17 February 2010



Linked Style
So far, we have only managed to define styles within a single web page. This does not
really enable us to mange site wide changes easily. A Linked Style sheet is the answer
to this problem. We need to construct a separate document (the Cascading Style
Sheet) and then we need to link each web page in turn to that CSS. Once that has been
done if we wish to change the style of a page element, we only need to change the
definition held within the CSS.

Consider the following code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>red linked text</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <style type="text/css">
                   <!--
                          .orange {
                                 color: orange;
                          }
                   -->
            </style>

           <link href="/pii_style_sheet.css" rel="stylesheet" type="text/css" />

     </head>                                                             Refers to the external style
                                                                         sheet called
     <body class = red>                                                  pii_style_sheet.css
          <h1 style="color: green">This heading is in Green</h1>
          <h1 class = orange>This heading is a level 1 heading in orange</h1>

          <h2>This is a Level 2 heading</h2>
          <h3>This is a level 3 heading</h3>
          <p>This is paragraph number 1.</p>
          <p>This is paragraph number 2.</p>
     </body>
</html>

The <head></head> section has a line in it that links the web page to an
external style sheet called pii_style_sheet.css (all style sheets must use the
extension .css).

The new line of code uses the <link> tag and contains the location of the style
sheet (href="/pii_style_sheet.css").

The phrase rel="stylesheet" defines the relationship of the link to the current
document (inother words it tells the link tag that it is linking to a stylesheet).




The Northern College                                                        Page 6 of 15
Tom Osman                    Cascading Style Sheets              17 February 2010


The attribute type="text/css" tells the browser what type of content is in the
file being linked to; the browser can then work out how to deal with content
that they cannot support.


Having linked to the style sheet pii_style_sheet.css, we can now use the
class(es) defined in that style sheet in the same way as we use an embedded
style.

Consider the line:
                <body class = red>

This gets the style definition from the external style sheet
(pii_style_sheet.css); the contents of this file are shown below.

                            .red {
                                color: #FF0000;
                            }


The result of the <body class = red> tag is to instruct the browser to display
all text within the <body> </body> tags in red. This is shown in figure 3.




Figure 3: Red text defined in a linked (i.e. external) style sheet. (Browser –
Internet Explorer)

The green text is green because it is an INLINE style and it overrides the
Linked Style.




The Northern College                                                  Page 7 of 15
Tom Osman                        Cascading Style Sheets                 17 February 2010


The orange text is orange because it is an EMBEDDED style and that
overrides a LINKED style.


Imported Styles
Imported styles are another way of attaching an external style to a web page.
The main advantage of importing a style sheet rather than linking to it is that it
is possible for a web page to use many external styles. This is useful if we
had (say) a large company that wished to standardise on a single basic layout
and at the same time enable different departments to publish web pages that
used different styles in addition to the basic company layout.

Consider the following code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>imported blue</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <style type="text/css">
                   <!--
                        .orange {
                            color: orange;
                        }
                   -->
            </style>
            <link href="/pii_style_sheet.css" rel="stylesheet" type="text/css" />
           <style type="text/css">
                 <!--
                     @import url("/blue_pii.css");
                 -->
           </style>
     </head>

     <body class = red>
           <h1 style="color: green">This heading is in Green</h1>

           <h1 class = orange>This heading is a level 1 heading in orange</h1>
           <h2>This is a Level 2 heading</h2>

           <h3>This is a level 3 heading</h3>
           <p class="blue">This is paragraph number 1, the text is blue.</p>
           <p>This is paragraph number 2.</p>


      </body>
</html>

Also, consider the code that resides in the imported CSS blue_pii.css; this is
shown below.
                      .blue {
                               color: #0000CC;
                      }


The Northern College                                                         Page 8 of 15
Tom Osman                     Cascading Style Sheets          17 February 2010



In the web page code, the line

          @import url("/blue_pii.css");

Is placed within a <style> tag in the <head> section. The @import statement
is hidden from non compliant browsers with (X)HTML comments (<!-- and
-->). The <p> tag can have the blue class associated with it as before.

The text in paragraph 1 is displayed in blue because, whilst the imported style
has a lower order of precedence than the other styles, it has been applied at a
more specific level, i.e. at a specific <p> tag.

All styles that are applied at a more specific level will take precedence
over styles that are applied at a more general level.


The result of this code is shown in figure 4.




Figure 4: Using an imported style.




The Northern College                                               Page 9 of 15
Tom Osman                      Cascading Style Sheets               17 February 2010



Conflicting Styles
What happens when different and conflicting styles are applied at the same
level (i.e. to the same type of tag)?

This is where the rules outlined on page 2 of this document come into play.
The order of precedence of styles is reproduced below.

   1.    Inline
   2.    Embedded
   3.    Linked
   4.    Imported

To illustrate how this works we will construct a style sheet with a class called
myclass and link a web page to it. We will then add an embedded style with a
different class definition of the same name (i.e. a second myclass) we will be
able to observe what happens when there is a clash of definitions.

Consider the following web page code.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>example of a conflicting style</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
            1" />

             <link href="/cool_blue.css" rel="stylesheet" type="text/css" />
        </head>

     <body class = mystyle>
          <h1>This heading is a level 1 heading in blue</h1>
          <h2>This is a Level 2 heading</h2>
          <h3>This is a level 3 heading</h3>
          <p>This is a paragraph &lt;p&gt;. All of the body text is in blue, times
          roman, and is in 10 point. </p>
          <p>Notice that the &lt;h1&gt;, &lt;h2&gt; and &lt;h3&gt; tags keep their
          font
            size settings, this is because the browser itself decides how to display
          headings.</p>
          <p>This is paragraph number 2.</p>
          <p>This is paragraph number 3.</p>
     </body>
</html>




The Northern College                                                    Page 10 of 15
Tom Osman                      Cascading Style Sheets            17 February 2010


The web page links to a style sheet called cool_blue.css, this style sheet
contains the following class definition.

                 .mystyle {
                              font-family: "Times New Roman", Times, serif;
                              font-size: 10px;
                              font-style: normal;
                              font-weight: normal;
                              font-variant: normal;
                              color: #0099FF;
                 }

The result of applying this linked style is shown in figure 5.




Figure 5: Showing the effect of applying the linked mystyle definition to the
<body> Tag.

Let’s see what happens when we take the same web page code and add an
embedded style that gives a different definition to a class also called mystyle.

Consider the following code.




The Northern College                                                Page 11 of 15
Tom Osman                      Cascading Style Sheets                 17 February 2010




<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

     <head>
          <title>example of a conflicting style</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
          1" />
          <style type="text/css">
          <!--
                 .mystyle {
                            color: orange;
                            font-family: Arial, Helvetica, sans-serif;
                            font-size: 36px;
                            font-weight: bold;                               Conflicting
                      }
                                                                             styles
          -->
          </style>
          <link href="/cool_blue.css" rel="stylesheet" type="text/css" />
     </head>

     <body class = mystyle>
         <h1>This heading is a level 1 heading in orange</h1>

           <h2>This is a Level 2 heading</h2>

           <h3>This is a level 3 heading</h3>

           <p>This is a paragraph &lt;p&gt;. All of the body text is in orange, arial,
           boldfaced and is in 36 point. </p>

           <p>Notice that the &lt;h1&gt;, &lt;h2&gt; and &lt;h3&gt; tags keep their
           font
             size settings, this is because the browser itself decides how to display
           headings.</p>

           <p> This is paragraph number 2.</p>
           <p>This is paragraph number 3.</p>


     </body>
</html>

Notice that the embedded style defines a class called mystyle that defines a
number of attributes of the text. Colour, font family, font size and font weight
are defined in this example.

The resulting web page is as shown in figure 6.




The Northern College                                                      Page 12 of 15
Tom Osman                   Cascading Style Sheets           17 February 2010




Figure 6: Showing that an embedded style overrides a linked style.




The Northern College                                             Page 13 of 15
Tom Osman                    Cascading Style Sheets            17 February 2010



Exercise 1
Construct two web pages that both make use of a style sheet called
PII_STYLE.CSS. Your style sheet should define two classes called
                         .safe
                         .danger

Safe should define text to be in Arial, 24pt, and coloured green.

Danger should define text to be in Arial, 36 point and coloured red.


Your web pages should look like the ones shown in figures 7 and 8.




Figure 7: Safe




Figure 8: Danger

Submit the XHTML code for each page, together with the code for the
cascading style sheet.


The Northern College                                                Page 14 of 15
Tom Osman                   Cascading Style Sheets            17 February 2010


Exercise 2.
Amend the style sheet created in exercise 1 to produce the “Safe text” in
Times Roman, bold faced, green and 48 point text.

Further, amend the “Danger” text to be in Red, Arial, Bold, Underlined and 48
point text.

Submit a copy of the amended CSS code, together with a print out of each
page as seen in your web browser.




The Northern College                                              Page 15 of 15