CSS Worksheet

Document Sample
CSS Worksheet Powered By Docstoc
					Staffordshire University IT Programme
Publishing for the WWW


CSS Worksheet - Background
This worksheet aims to help you get an overview of CSS by asking you to read a series of small pages and
then answer some questions. The questions should help clarify some of the important issues to do with
stylesheets. Please discuss points with your tutor and your colleagues whenever appropriate.

Refer to the Stylesheets Guide on the Webmonkey site for this worksheet, at http://www.webmonkey.com.
You may want to refer to other on-line resources such as the HTML Goodies site, at
http://www.htmlgoodies.com/beyond/css.html.
Read the pages given below and answer the questions associated with each one.

Read the introductory page "What is CSS?"

      The article suggests that we should separate visual design from the HTML structure of a page. Why
       is this a good idea?
       Discuss the matter with your colleagues. It may help if you have some experience of software
       engineering, particularly Object Oriented design, where similar ideas are important.




      What benefits of CSS are referred to in the introduction?




Read "How CSS Works"

      In the example given, what do you think the redefinition of the paragraph tag <P> does?
       Discuss the matter with your colleagues. It may help if you have some experience of writing HTML
       code by hand!




Read "Linking Stylesheets"

      What is the advantage of linking to a stylesheet file compared to inserting style information into the
       <HEAD> block of a page?




Read "CSS Examples"

      In the first example, the paragraph tag redefinition changes the typeface to which font family?



      What size and colours will the paragraph text have? Try to work out what the hexadecimal colour
       code really means.




C.Mayer                                       1
14/04/2010 23:11:00
Staffordshire University IT Programme
Publishing for the WWW

Read "Browser Compatibility"

       Research (in 2004) shows that about 76% or more of Web users have Internet Explorer 5 or better
        and that about 1.5% use Netscape Navigator 4 or better. Is it safe to assume that most Web users
        will be able to experience your CSS-based pages properly?



       How old are the following browsers?
           1. Opera 5
           2. Internet Explorer 4.x
           3. Netscape Navigator 4.x

        You will have to search to find out.

       What is the significance of these three browsers for CSS users?



       Does this bode well for CSS support?




Refer to the Cascading Style Sheets Tutorials on the Page Resource site for this part of the worksheet, at
http://www.pageresource.com/dhtml/indexcss.htm.
Read the pages given below and answer the questions associated with each one.

Read the page "Introduction to CSS"

       Did the example box (with the green border) display as explained in the text? If not, check your
        browser.


       How accurate is the positioning capability of CSS formatting?



       Why is defining a style more efficient for you than manually formatting each instance of a tag? Make
        sure you are clear on the answer to this question. It is one of the key motives for using CSS.




Read "Using the Style Attribute"

       Write a DIV tag which sets text to bold and colours it blue.



       Can you write a P (paragraph) tag with yellow, italic text on a blue background? You may need to
        view a CSS properties reference.




C.Mayer                                        2
14/04/2010 23:11:00
Staffordshire University IT Programme
Publishing for the WWW

      This just seems like a fancy way to format tags separately - not a great leap forward. Move on to the
       next section.

Read "Styles in the Head Section"

      How worrying is the reference to problems with older versions of Netscape Navigator? Imagine that
       you are developing pages for a world-wide audience.



      Overriding the default formatting of a tag is very useful. Can you think of disadvantages though?




Read "Using Classes to Define Styles"

      Classes are very useful in CSS. Invent a class to set the background color to yellow.




      ID settings are used in much more specific and infrequent ways than classes. IDs and classes are
       not the same thing! You will hardly ever need IDs unless you are using Javascript to change styles
       dynamically.

Read "Using External Style Sheets"

      Save this plain web page to a local disc - your floppy disc or some other storage area. You should
       already know how to do this.



      Follow the instructions to create and link a stylesheet to the plain page.
      Experiment with classes and overriding the standard tag default styles.
      You may want to have a quick look at the reference pages in the next section.
      Show your tutor what you have managed to do - don't be scared of making a mess!

Read "CSS Properties Table" and "The Box Properties"

      Use some of the properties you have just read about to modify your test page from the previous
       section.




Summary
On completion of this worksheet, you should be able to create simple stylesheets and link them to HTML
pages. You should also be able to briefly discuss the following topics;

          Why we use CSS
          Different ways to use CSS
          Compatibility issues with CSS
          What we can do with CSS
          CSS classes
          Details of individual property settings

C.Mayer                                        3
14/04/2010 23:11:00
Staffordshire University IT Programme
Publishing for the WWW


Creating a Stylesheet with Dreamweaver

Open a new file and save it. If you do not save your file first you get warning messages about
incorrect file paths.

Either
Select Text | CSS Styles | New
Or
From the Styles panel click the Add Style button

Task 1

First try re-defining a tag. Click Tag from the selector list and then select the tag from the Tag
dropdown list above.
For example, select the h1 tag and set the Font to Verdana, the Size to 14 point, the Weight to Bold
and the colour to Red.

Try setting the body tag. Set background image – choose an image from Studentinfo on
Trentdev/images.
Set up the list options.

Set up a paragraph tag. Set the box and border settings.

Define some of your own classes. Don’t forget the .name convention.

Produce a web page that uses these tags.

Now edit the stylesheet. Use the Edit Style button in the Styles panel or Text | CSS Styles | Manage
Styles. The select the css file and Edit.

Edit some of your styles and see how your web page changes.

Task 2

Start a new page and attach the stylesheet you have just produced. Prove that changing the
stylesheet changes all the pages to which it is attached.

Try some other options. Use Dreamweaver Help if you are not sure what a CSS style does.




C.Mayer                                    4
14/04/2010 23:11:00