Learning Topic 6: Cascading Style Sheets and Web Page Structures
Background/Rationale:
Before the introduction of Cascading Style Sheets (CSS), every web page had to include
all necessary information regarding colors, styles, and structural design. This made the
job of updating sites very cumbersome and time consuming. With the advent of external
CSS style sheets, web developers are now able to create unified design styles for
complete web sites that can easily be updated and redesigned. Separating the content
material from the presentation specifications also allows pages to load more quickly and
simplifies the job of addressing accessibility issues.
In this Learning Unit you will explore the process of designing CSS and will see how it is
possible to develop the complete layout structure for your web pages with CSS.
Understanding the best practices of CSS based web design will empower you to build
standards compliant web pages that will be easy to update as new industry standards are
adopted.
Learner Outcomes:
At the end of this Learning Topic, you will be able to:

Understand how CSS design is used to shape the appearance of all elements on a
webpage. (Discussion 1)

Demonstrate an understanding of the three main types of Cascading Style Sheets
and how inheritance works. (Project 1)

Develop complete page layouts using CSS. (Project 2)

Use tools within Dreamweaver to add text, images and hyperlinks on a web page.
(Discussion 2)

Use Dreamweaver as an interface to edit the CSS content on a cms/lms website.
(Project 3)
Readings and Research:
CSS Tutorial. (n.d.). W3Schools Online Web Tutorials. Retrieved July 10, 2010, from
http://www.w3schools.com/css/
Learn Dreamweaver CS5. (2010). Adobe Systems Incorporated. Retrieved July 12, 2010
from http://tv.adobe.com/show/learn-dreamweaver-cs5/
Lowery, J. (2009) Dreamweaver CS4 Bible. John Wiley & Sons. [Accessible via
Books24x7, http://library.books24x7.com.dml.regis.edu/toc.asp?bookid=29592]
Shea, D. (n.d.). Css zen garden: the beauty in css design. Retrieved July 14, 2010 from
http://www.csszengarden.com/
Varese, J. (2010, April 30). Css page layout basics. Retrieved July 12, 2010 from
http://www.adobe.com/devnet/dreamweaver/articles/css_page_layout_basics.html
Varese, J. (2010, May 17). Understanding cascading style sheets. Retrieved July 12, 2010
from http://www.adobe.com/devnet/dreamweaver/articles/understanding_css.html
Learning Activities
Discussion 1 – Introduction to Cascading Style Sheets
In order to gain a starting understanding of how Cascading Style Sheets function, visit the
csszengarden web site (http://www.csszengarden.com/) and explore the different designs
available under the “Select a Design” menu. As you will discover on this site, the content
and presentation styles are separate and each design demonstrates a unique way of
presenting the material. This site is a perfect example of the power of CSS to control all
of the design elements of a page.
Discuss the following topics in pairs or small groups:

How do the different designs on the csszengarden site convey feelings or intent?

What design do you feel is most effective for the content and why?

What are the implications to a web developer of having the ability to separate
content from design?
Assessment - Discussion 1
Use the Regis general discussion rubric: Student actively and thoughtfully participated in
the discussion. Student was respectful of classmates’ points of view.
Project 1 – Types of Cascading Styles
In web design, styles allow the developer to separate the rules from the element they are
controlling. The rules can take the form of class styles, HTML tag styles or advanced
styles. The style sheet, or collection of styles, can be placed in the head section of a
document, inline with the HTML content or in an external style sheet. The external style
sheet is generally considered the most versatile of the implementation methods because
of its ability to be referenced by multiple HTML documents.
For further information regarding CSS programming, read the article “Understanding
Cascading Style Sheets” and complete the w3schools CSS basic and CSS styling tutorials
(http://www.w3schools.com/css/). To demonstrate your understanding of CSS text styles,
create a blank HTML page without any layout formatting and develop a set of 10
different styles for text only. Of the 10 different styles, explore cascading inheritance
issues by making at least 5 of the ten styles control one another through the inheritance
method.
Assessment – Project 1
Cascading Style Sheets
10 different styles are created for text
with proper CSS markup.
At least 5 of the styles demonstrate an
understanding of cascading inheritance.
1 absent •••••••••••••••••• 5 advanced
Project 2 – Using CSS for element styling and page layout
In addition to the function of styling text, any element on a page can be controlled by a
CSS style, including images, tables, lists, forms and multimedia elements. A standard best
practice in modern web design is the use of CSS for the page layout. For more
information regarding how CSS styles can be used for the structural design of a web
page, complete the CSS Box Model and CSS Advanced tutorials from the w3schools
tutorial site (http://www.w3schools.com/css/). Also read the article “CSS Page Layout
Basics” and Chapters 7 in the Dreamweaver CS4 Bible text.
Using what you learned from the tutorials, article and chapters, create a graphic organizer
that shows your understanding of the different elements of a web page layout. Using
bubbl.us, writemaps.com or other web 2.0 mind-mapping tools, show how the following
elements are structured and connected:
 DOCTYPE
 Title
 Meta information
 Head
 Body
 CSS
 Header
 Footer
 Columns
 Other HTML elements/tags – include at least 5 of the following (H1, H2, p, div,
tables, forms, lists and images/multimedia)
Assessment – Project 2
Web Page Graphic Organizer
Structural elements are included with a clear
presentation of their place in a web page
structure.
The graphic organizer shows connections
between elements, especially between CSS and
styled elements.
1 absent •••••••••••••••••• 5 advanced
Discussion 2 – Working with Text, Images and Hyperlinks in Dreamweaver
Dreamweaver provides many options for adding text, images and hyperlinks on a web
page. In Chapter 8 and 9 in the Dreamweaver CS4 Bible, many of the different methods
for inserting and styling content are explored. For this project, you will read through the
chapters and create a list of the top 10 things that are necessary to understand in order to
effectively work with text, images and hyperlinks with Dreamweaver.
Discuss the following topics in pairs or small groups:

Compare your top ten list with one another. How are they similar and how are
they different?

What tools and functions are new and different than what you have encountered in
the content management system software or other web development software?

What methods for controlling content are confusing or non-intuitive?
Assessment - Discussion 2
Use the Regis general discussion rubric: Student actively and thoughtfully participated in
the discussion. Student was respectful of classmates’ points of view.
Project 3 – Using Dreamweaver to edit the CSS content on a CMS Web Site
In the CS5 version of Dreamweaver, the ability to open and edit content management
system websites was added. This functionality makes it very easy to adjust the CSS
elements of the layout of a WordPress site. For a video tour of this functionality, view the
video on the following page: http://tv.adobe.com/watch/learn-dreamweaver-cs5/workingwith-cms-frameworks/.
For this project you will open your completed WordPress site from within Dreamweaver.
Before you begin making any changes, make a screen capture of your site so you can
show the before and after results. Choose five CSS style elements you want to edit, and
use the Dreamweaver interface to make the changes. When you have completed the work,
send the screen shot of the website before you began editing and the URL of the current
site to your instructor. Also include a brief explanation of the changes you made and how
they benefit the visual appearance of the site.
Assessment – Project 3
Editing the CSS content on a
WordPress or Joomla website
A before and after screen shot was
included to show how the CSS was
edited.
The explanation of the changes that were
made provides a clear rationale for the
edits.
1 absent •••••••••••••••••• 5 advanced