Ch. 9 Lecture
- Use Cascading Style Sheets (CSS) to increase consistency throughout a web
page or web site. Also, use CSS so that it's easier to make modifications
to the fonts and colors used in a web site.
- Cascading style sheets (CSS) give a Web site a consistent and uniform appearance,
by defining and applying styles such as font color and size to elements on
all pages within a Web site. CSS goes beyond HTML to allow you the Web page
designer to control the format of a Web page. (Really, HTML only affects the
structure and function of elements on a Web page.) CSS permits the designer
to separate the form of the page from its structure (HTML's role). No plug-in
is necessary to render CSS but stylesheets are implemented differently in
Netscape and Internet Explorer. Therefore, browser detection may be necessary
in order to make your pages universally consistent.
- The word "cascading" is used because several of the above methods
could be used within a Web site and actually define styles differently. Therefore,
an established hierarchy is used to determine which style applies to a given
HTML element. The following hierarchy applies with the higher numbers superseding
styles set by lower numbers:
- browser default settings
- user preferences settings that are set in the browser
- linked external style sheet
- inline style information
- HTML tag attributes
- You can create stylesheets with any text editor, however Dreamweaver can
be used to create & edit stylesheets as well. Another nice aspect of Dreamweaver
that it offers a utility that converts an existing stylesheet into HTML tags.
Since the percentage of Web surfers who use a browsers older than version
declining rapidly, you may not wish to bother making this conversion. But
you can see http://www.macromedia.com/support/dreamweaver/ if you'd like to
advantage of this Dreamweaver feature.
- You can link to the W3C Core
style sheets for free!
- If you wish to use Cascading StyleSheets (CSS) decide early in your site's
design whether you plan to use them and to what extent. They work well but
not if applied inconsistently.
- See examples of CSS at this Penn
State University Foundations of Design workshop web page.
Activity: Create a stylesheet with Dreamweaver that specifies
font and font size for your Final Project site for this workshop.
1.Use the Window/CSS Styles menu command.
2.Click the small black arrow and choose New Style...
3.Name the new style .ist6773 (or something relevant to your site name)
4.Click OK and save as ist6773.css in your ist6773 folder.
5.Open your index.htm home page and apply the .ist6773 style by linking the
home page to the ist6773.css style sheet.
6.Change one of the style settings in your .css file using Notepad and reload
the index.htm web page in a browser window to see the change take effect.
- Three ways to use CSS:
styles - This style allows you to tie together 2 or more styles such as
bold, font size, font color, etc. and easily apply this combination of
styles to selected portions of text throughout a web page. The stylesheet
tags are placed within HTML elements on the page to be affected. This
method is not very efficient.
- internal style sheet - all of the necessary stylesheet specifications
are placed outside of and above the <body> and sometimes even the
<head> of the Web page. In this case, they only apply to that specific
Web page in which they are located.
- redefine an HTML tag throughout a whole web page - The <H3>
tag with the title at the top of this web page is an example of redefining
an HTML tag throughout a given web page.
- define a custom class and apply throughout
a whole web page - This paragraph is an example in which I defined
a class named CustomClassExample.
- using CSS selectors you can redefine a few different hyperlink attributes.
These attributes (as well as other CSS techniques) may not work similarly
in both IE and Netscape though. The yellow highlights created when
the mouse is over the hyperlinks on this page were created using a
- external style sheet - By linking to a single, external stylesheet,
you can set the format for dozens or even hundreds of Web pages to give
a very consistent look to your Web site. At anytime in the future, you
can modify the look by changing this one stylesheet. This powerful technique
for setting fonts, sizes, & colors allows a web designer to specify
CSS style elements in a separate file with the extension .css. Multiple
web pages (or even every web page in a web site) can link to this external
style sheet to make use of the custom classes defined there. This makes
it easier to update a whole web site at once. The homework section of
this page is affected by the homework class in the web115styles.css linked
Review the process of causing a pop-up window to appear by either typing HTML
code (see Class #13 Lecture page) or using Dreamweaver's
- Work on any aspect of Project #2
which is due at our last class.
- Finish reading Ch. 9.