• Home
• Collections
• Find
• Services
• About Us
• Help

R&D Services

Web Design Tips

• About This Site
• Tools
• General Tips
• HTML
• XHTML
• CSS
• SSI
• Planning
• Writing
• Usability
• Accessibility
• Validation
• SEO
• Search and Replace
• Search Box
• Search Tools
• Statistics: Uses
• CMS
• Screen Recording
• Web Glossary

Search

CSU Web Central

• Web Requirements
• Style Manual
• Web Logos
• Developer Checklist
• Coding Links

Web Design Tips

Cascading Stylesheets: Exercises

Why | How | Exercises | Links

Requirements | 1. Viewing and Applying Styles | 2. Creating Styles | 3. Text Formatting | 4. Positioning

Show instructions for: FrontPage | Dreamweaver | Both

Software Requirements and Prerequisite Knowledge

1. Internet Explorer and either Firefox or Netscape (to browse the Web and test pages)
2. FrontPage 2003 or Dreamweaver MX 2004 (to author Web pages)
3. Basic knowledge of HTML code (commonly used tags and attributes)
4. About 30 to 60 minutes per session. Each session builds on the previous session.
5. See the CSS links page for more information and online references.

Session 1: Viewing and Applying Existing Styles

1. View the results of disabling a stylesheet.
   1. Go to the CSU Libraries home page.
      1. Click the Disable Stylesheet link.
      2. Click the Enable Stylesheet link.
   2. Open Firefox.
      1. Click View, Page Style, No Style. The current page will lose its formatting.
      2. Click View, Page Style, Basic Page Style to return to regular browsing.
      3. View some other pages without their stylesheets, such as:
         • Colorado State University
         • Web Administrator/Developer Pages
         • Garst Wildlife Photographic Collection
         • Writers on the Plains
   3. Open Internet Explorer.
      1. Click Tools, Internet Options, Accessibility. Check the three Ingore check boxes. Click OK. The current page will lose its colors, font sizes and font styles, but some styles will remain.
      2. View some of the above pages.
      3. Click Tools, Internet Options, Accessibility. Uncheck the three Ingore check boxes. Click OK to return to regular browsing.
2. View the results of alternate stylesheets.
   1. Go to W3Schools: CSS in action.
   2. Click the 6 links in the "Click on the styles" section (With Style1-5 and Without styles).
   3. Go to ATRC: CSS Style Sampler.
   4. Click each of the 1 2 3 buttons to see different stylesheets applied to the same HTML page.
3. View the results of a print stylesheet.
   1. Go to Garst Wildlife Photographic Collection.
   2. Click File, Print Preview. Notice that the navigation is hidden.
4. View the source code of an HTML page.
   1. Go to W3Schools: CSS in action or ATRC: CSS Style Sampler.
   2. Right-click in the page body. Click View Source. (In Firefox, click This Frame, View Frame Source.)
5. View the source code of an external stylesheet.
   1. Go to W3Schools: CSS in action.
   2. Click the 5 links in the "View the stylesheets" section.
   3. Can you explain what each line in each stylesheet does?
6. Copy an example to your computer. It includes an HTML page, an external stylesheet, and 3 images.
   1. View the example HTML page in a browser. Click File, Save As. Create a folder to save the file, or click My Documents. Type example.html. Click Save.
   2. View the example stylesheet in a browser. Click File, Save As. Type example.css. Click Save.
   3. Right-click these links to the CSU libraries logo, the CSU logo and the background. Click Save Target As... or Save Link As.... Save all documents into the same folder.
   4. Open your copy of example.html using FrontPage or Dreamweaver.
   5. Switch to Code or Split view to see the source code. It is just plain XHTML, with a few div tags and id attributes.
7. Link to an external stylesheet.
   1. In FrontPage, click Format, Style Sheet Links.... Click Add. Click example.css. Click OK twice.
   2. In Dreamweaver, click Text, CSS Styles, Manage Styles.... Click Attach.
      Or: Click the Design panel on the right, click the CSS Styles tab, and click the Attach Style Sheet icon .
   3. Click example.css. Click OK. Click Done.
   4. Switch to Design view. You should see that your document has been reformatted using the stylesheet.
   5. Switch to Code or Split view. You should see that a line of code has been added that looks something like this:
      <link href="example.css" rel="stylesheet" type="text/css" />
   6. Make sure that the path to example.css is relative. There should be no folders before example.css.
   7. Press Ctrl-S to save your changes to example.html.
   8. Press F12 to test in a browser if desired.
8. Apply an existing class to an HTML tag.
   1. Select the Section 1 heading. Select red from the Style menu. You should see that the heading has become red.
      1. In FrontPage, for internal styles, click Format, Style, select User-defined styles from the List: menu, select .red from the Styles: menu, and click OK.
      2. In Dreamweaver, right-click the <h1> tag in the bar between the document and the Properties window, move to Set Class, and select red.
   2. Repeat for the Section 2 heading. Note that you can apply a class to more than one element.
   3. Repeat for the Example HTML Page heading. Note that you can apply a class to different types of elements.
9. Apply an existing ID to an HTML tag.
   1. Select the Introduction heading. Switch to Code or Split view. Change <h2> to <h2 id="redborder">.
      1. In FrontPage, for internal styles, click Format, Style, select User-defined styles from the List: menu, select #redborder from the Styles: menu, and click OK.
      2. In Dreamweaver, right-click the h2 tag, move to Set ID, and select redborder.
   2. Switch to Design or Split view. You should see that the heading has a red border.
10. Remove a class or ID from an HTML tag.
    1. Select the Section 1 heading.
       1. In FrontPage, select Heading 2 from the Style menu.
       2. In Dreamweaver, select None from the Style menu.
    2. Repeat for the Section 2 heading and Example HTML Page heading.
    3. Select the Introduction heading. Switch to Code or Split view. Change <h2 id="redborder"> to <h2>.
    4. Switch to Design or Split view. You should see that the headings have returned to normal.
11. Work with styles in Microsoft Word.
    1. Open csspractice.doc.
    2. Format the first line as Heading 1.
    3. Format the second line as Heading 2.
    4. Format the remaining headings as Heading 3.
    5. Add some text after "Session 1: Viewing and Applying Existing Styles".
    6. Select "Session 1: Viewing and Applying Existing Styles".
    7. Click Format, Styles and Formatting.
    8. Right-click Heading 3 in the Styles and Formatting window on the right. Click Modify.
    9. Change the font color to red by clicking the A with a red underline.
    10. Click OK. Notice that all styles formatted with Heading 3 become red.
    11. Press Ctrl+A to select all. Press Ctrl+C to copy .
    12. Create a new HTML document in FrontPage or Dreamweaver (press Ctrl+N).
    13. Paste into the new document (press Ctrl+V).
    14. Switch to Code or Split view. Notice that the Word headings have become h1, h2 and h3 in HTML.
    15. Also notice that FrontPage adds a MsoNormal class and other styles which you would probably want to remove.

Session 2: Creating Styles

1. If you are not continuing from Session 1, download the example files and link the stylesheet to the Web page.
2. Create an inline style to format a single instance of a tag.
   1. Open your copy of example.html using FrontPage or Dreamweaver.
   2. Click in the upper left cell of the table in Section 2.
   3. Switch to Code or Split view.
   4. Change <table> to <table style="border: 5px solid blue;">
   5. Switch to Design or Split view. You should see that the table now has a thick blue border.
   6. Tip: You can use the Quick Tag Editor to make a change to a tag without switching views.
      1. Select part of the page such as a table.
      2. FrontPage
         1. Click View, Reveal Tags or press Ctrl+/, and click on a tag.
         2. Click Edit, Quick Tag Editor or press Ctrl+Q.
         Or:
         1. Click View, and make sure Quick Tag Selector is checked.
         2. Right-click the <table> tag in the Quick Tag Selector bar and click Edit Tag.
      3. Dreamweaver
         1. Right-click the <table> tag in the bar between the document and the properties window.
         2. Click Quick Tag Editor... , or click Modify, Quick Tag Editor, or press Ctrl+T.
      4. Make changes to the tag and press Enter.
3. Create an internal stylesheet and format one or more existing tags within the document.
   1. FrontPage
      1. Click Format, Style... Click the h2 tag. Click Modify...
      2. Click Format, Font... Select a font, size, style, color, effects, and/or character spacing. Click OK 3 times.
   2. Dreamweaver
      1. Click Text, CSS Styles, New...
         Or click the Design panel on the right, click the CSS Styles tab, and click the New CSS Style icon .
      2. For the Selector Type, click the Tag radio button. Select the h2 tag from the tag menu.
      3. Select the radio button Define in: This document only. Click OK.
      4. Select properties such as font and/or size. Click OK.
   3. You should see that all h2 tags in the document are now formatted differently.
   4. Switch to Code or Split view. Find the CSS code that was inserted for you, in the <head> section, within a <style> tag.
4. Create an external stylesheet from a template.
   1. FrontPage
      1. Click File, New, More page templates...
         Or click the arrow next to the white New icon in the upper left corner and click Page...
      2. Click the Style Sheets tab. Select a stylesheet. Click OK.
   2. Dreamweaver
      1. Click File, New... or press Ctrl-N. In the General tab, click CSS Style Sheets.
      2. Select a stylesheet in the right side of the dialog box. Click Create.
   3. Click File, Save As. Type styles1.css. Click Save.
5. Create an external stylesheet from scratch.
   1. FrontPage
      1. Click File, New, More page templates....
      2. Click the Style Sheets tab. Click Normal Style Sheet. Click OK.
   2. Dreamweaver
      1. Click File, New... or press Ctrl+N. Choose Basic page from the Category menu.
      2. Choose CSS from the Basic page menu. Click Create.
   3. Add styles to the external stylesheet.
      1. Type a line of CSS code on the second line.
         body { background-color: lightyellow; }
      2. FrontPage
         1. Click Format, Style.... Click the body tag. Click Modify....
         2. Click Format, Font.... Select a text color (or other formatting if desired). Click OK 3 times.
      3. Dreamweaver
         1. Click Text, CSS Styles, New.... Or click Design, CSS Styles, .
         2. For the Selector Type, click the Tag radio button. Select the h2 tag from the Tag menu. Select the radio button Define in: (New Style Sheet File). Click OK.
         3. Select a text color (or other formatting if desired). Click OK.
   4. Click File, Save As. Type styles2.css. Click Save.
6. Move a style from inline to internal (so it can be used by more than one instance of a tag).
   1. Click in the upper left cell of the table.
   2. Switch to Code or Split view.
   3. Select border: 5px solid blue;. Press Ctrl-X to cut. Select style="". Press Delete.
   4. Move the cursor to the right of the <style> tag. Press Enter to add a new line. Press Ctrl-V to paste. Add a table style rule so the line looks like this:
      table { border: 5px solid blue; }
   5. Save your changes. Test that the table still has a thick blue border.
7. Move a style from internal to external (so it can be used by more than one Web page).
   1. Switch to Code or Split view.
   2. Select table { border: 5px solid blue; }. Press Ctrl-X to cut.
   3. Open example.css. Position the cursor outside of any style rule. Press Ctrl-V to paste.
   4. Save your changes to both example.html and example.css. Test that the table still has a thick blue border.
   5. In Dreamweaver, you can copy a page's internal styles to an external stylesheet. Click Text, CSS Styles, Export.... Type a file name and click Save.
8. Create a class selector to format groups of elements.
   1. FrontPage
      1. Click Format, Style... Select User defined styles from the List menu. Click New.
      2. Type a name for the selector (e.g. large).
      3. Click Format, Font.... Type in a different font size (e.g. 3em). Click OK 3 times.
   2. Dreamweaver
      1. Click Text, CSS Styles, New.... Or click Design, CSS Styles, .
      2. For the Selector Type, the Class radio button should be selected. Type the tag name (e.g. .large).
      3. Select the radio button Define in: This document only. Click OK.
      4. Type in a different font size (e.g. 3em). Click OK.
   3. Check that the large style now appears in the Style menus.
   4. Apply this style class to any element to test.
9. Create an ID selector to format a single element.
   1. FrontPage
      1. Click Format, Style... Select User defined styles from the List menu. Click New.
      2. Type a name for the selector, starting with a # symbol (e.g. #huge).
      3. Click Format, Font.... Type in a different font size (e.g. 250%). Click OK 3 times.
   2. Dreamweaver
      1. Click Text, CSS Styles, New.... Or click Design, CSS Styles, .
      2. For the Selector Type, click the Advanced radio button. Type the tag name, starting with a # (e.g. #huge).
      3. Select the radio button Define in: This document only. Click OK.
      4. Type in a different font size (e.g. 250%). Click OK.
      5. Check that huge now appears in the Set ID menu.
   3. Apply this style ID to any element to test.
10. Format links and create rollover effects using pseudo-classes (a:link and a:hover).
    1. FrontPage
       1. Click Format, Style.... Select a:link from the Styles: list. Click Modify....
       2. Click Format, Font. Change the color (or other formatting if desired). Click OK three times.
    2. Dreamweaver
       1. Click Text, CSS Styles, New.... Or click Design, CSS Styles, .
       2. For the Selector Type, click the Advanced radio button. Select a:link from the Selector: menu.
       3. Select the radio button Define in: This document only. Click OK.
       4. Change the color (or other formatting if desired). Click OK.
    3. Test in a browser by viewing unvisited links.
    4. Repeat for a:visited to format visited links.
    5. Repeat for a:hover to create a rollover effect. Test by moving the mouse over a link.
11. Look at the W3Schools tutorial for more information and examples.

Session 3: Text Formatting

1. If you are not continuing from Session 1, download the example files and link the stylesheet to the Web page.
2. Use CSS lists.
   1. Add this code to the internal or external stylesheet and observe the effect on the bulleted list:
      ul { list-style-type: circle; }
   2. Change the list-style-type to disc, square, and none, and observe the effect for each.
   3. Add this code to use an image for the bullets:
      ul { list-style-image: url(http://lib.colostate.edu/rds/webtips/css/tinysprout.gif); }
   4. Add this code and observe the effect on the numbered list:
      ol { list-style-type: decimal; }
   5. Change the list-style-type to upper-roman, lower-roman, upper-alpha and lower-alpha.
3. Use CSS colors.
   1. In the table in Section 2, highlight each word and add an inline style to use a different background-color:
      <td style="font-size: 20pt; background-color: red;">one</td>
      1. Try the following values:
         

         red	darkred	transparent
         #00F	#0F0	#FF0
         #F00	#FF0000	rgb(255,0,0)

4. Use contextual selectors to apply styles only to elements that occur within other elements.
   1. To make links only in the footer red, add this line of code in the internal or external stylesheet:
      #footer a { color: red; }
5. Group multiple selectors to reduce repetitive code.
   1. To underline both h1 and h2 headings, add this line of code in the internal or external stylesheet:
      h1, h2 { text-decoration: underline; }
6. Add an alternate stylesheet to a Web document, e.g. a large font or text-only version of a page for accessibility.
   1. If you are not continuing from Session 2, download styles1.css and styles2.css or create from steps 4 and 5.
   2. Add these codes to the head section of example.html:
      <link href="styles1.css" rel="alternate stylesheet" type="text/css" title="fancy" />
<link href="styles2.css" rel="alternate stylesheet" type="text/css" title="simple" />
   3. Save, open in Firefox or Netscape, and test by clicking View, Page Style, fancy or simple.
7. Add a print stylesheet to a Web document.
   1. Create a stylesheet named print.css. Add this code to the head section of example.html:
<link rel=stylesheet href="print.css" type="text/css" media="print">
   2. To just override a few styles, use either of these methods:
      1. In the print stylesheet, include the regular styles using the statement
@import url(styles.css);
      2. Instead of using a separate print stylesheet, add the following statement at the end of the regular stylesheet:
@media print { }
         Add the print styles between the curly braces
8. Add comments to CSS code.
   1. In example.css or within the <style> tag of example.html, add text between /* and */ marks.
      /* This is a comment to explain CSS code to other people. It is ignored by all browsers. */

Session 4: Dimensions, Classification, Positioning and Page Layout

1. If you are not continuing from Session 1, download the example files and link the stylesheet to the Web page.
2. Use CSS dimension units.
   1. In the table in Section 2, highlight each word and add an inline style to use a different font-size:
      <td style="font-size: 20pt;">one</td>
      1. Try 15pt, 20pt, 15px, 20px, 150%, 200%, 1.5em, 2em, xx-large.
   2. Hold down Ctrl and scroll the mouse wheel to change the default font size in both Firefox and Internet Explorer.
      1. Observe which font sizes change, and by how much. In Internet Explorer, pt and px sizes are fixed.
3. Use margin, padding and border around an image, table or other block element.

   			↑↓ margin-top
   			↑↓ border-top
   			↑↓ padding-top
   margin- left ↔	border- left ↔	padding- left ↔	object	padding- right ↔	border- right ↔	margin- right ↔
   			↑↓ padding-bottom
   			↑↓ border-bottom
   			↑↓ margin-bottom

   1. Add lines of code to the img#csu rule in the stylesheet to change the padding, margin and border of the CSU logo.
      padding: 2px;
border-top: 3px dotted red;
border-right: 5px dashed blue;
border-bottom: 3px double #F0F;
border-left: 5px groove #0FF;
margin: 2px 5px 2px 0px; /* top right bottom left */
   2. Add lines of code to the img#csulibraries rule in the stylesheet to change the padding, margin and border of the CSU Libraries logo.
      padding: 2px; padding-left: 5px;
border: 2px solid #6c9; border-right-color: #042; border-bottom-color: #042;
margin: 0;
      
4. Make an image float to the left or right of some content.
   1. Position the cursor at the beginning of the Section 1 paragraph, to the left of "Curabitur".
   2. Insert the CSU logo image. Only the first line of text will be moved to the right.
   3. Edit the image tag, add an inline float style, and see the image move to the left or right of the paragraph.
      <img style="float: left" border="0" src="csu.gif" width="109" height="60">
<img style="float: right" border="0" src="csu.gif" width="109" height="60">
5. Create a skip link for screen readers, but hide it from regular browsers.
   1. Before the navigation bar, include a link to an anchor named content. It should use the skip class.
      <a href="#content" class="skip">Skip Navigation</a>
   2. After the navigation bar, include the anchor named content.
      <a name="content" id="content"></a>
   3. In the internal or external stylesheet, define a skip class that positions the link above the visible page.
      .skip { position: absolute; top: -500px; }
6. Make navigation buttons using a list of links.
   1. Set the list-style-type of the list to none.
      ul#nav { list-style-type: none; }
   2. If the buttons will be in a row, set the display of list items to inline.
      ul#nav li { display: inline; }
   3. Remove the underline from the list item links.
      ul#nav a { text-decoration: none; }
   4. Add a background-color to the links.
      ul#nav a { background-color: #ccc; }
   5. Add padding to the links.
      ul#nav a { padding: 1px 5px; }
   6. Add a border to the links.
      ul#nav a { border: 3px groove #999; }
   7. Change the color, background-color and/or background-image of the list item links when the user moves the mouse over them.
      ul#nav a:hover { color: #f99; background-color: #ffc; }
   8. Add a background-image to the links instead of background-color.
      ul#nav a { background-image: url(http://lib.colostate.edu/lts/tips/css/gradient.jpg); }
ul#nav a:hover { background-image: url(http://lib.colostate.edu/lts/tips/css/gradient2.jpg); }
7. Create a centered page.
   1. For a variable-width page, the body style should have equal but nonzero left and right margins (pixels or percent).
      body { margin: 0 10%; }
   2. For a fixed-width page, enclose the entire page content within a centered div, which contains a document div with a fixed width (e.g. 780px or 48em).
      
      1. In the stylesheet, add this line:
         div#doc { width: 48em; min-width: 780px; max-width: 100%; }

      2. In the Web page, enclose the page content in two div tags:
         <body>
<div align="center">
<div id="doc">
[page content goes here...]
</div>
</div>
</body>
8. Create a two-column page with navigation and content.
   1. Create a list <ul id="nav"> that contains a list of navigation links. (This could be enclosed in a div tag for consistency.)
   2. Add a style in the stylesheet for ul#nav that positions the list on the left side of the page, below the header.
      ul#nav { position: absolute; top: 70px; left: 10%; }
   3. Create a section <div id="body"> that contains the body column of the document.
   4. Add a style in the stylesheet for div#body that positions the body column to the right of the navigation column.
      div#body { margin-left: 160px; }