Cascading Style Sheets (CSS) Using KompoZer

(r 07/13/09 rdm, rms)

Introduction
Cascading Style Sheets (CSS) are used extensively in developing web sites. A primary purpose
for CSS is to support format consistency across multiple web pages and greatly simplify changes
and modifications to the appearance of the whole website. For example, the Marriott School at
BYU desires to have a consistent header, background and formatted appearance for the web
pages on its web site. By defining those elements using Cascading Style Sheets other web pages
can import the styles from that central CSS file and thus maintain a formatting consistency on all
web pages. Furthermore, if future actions should change that central style, then those changes
would cascade down to be effective in all the other web pages using that CSS thus
maintaining the new theme consistently through out the web site because all the web pages
would get their formatting from the common CSS. This 1) saves substantial development time,
2) fosters the implementation of a consistent appearance for all the web pages on a web site, 3) it
saves maintenance time when changes are made to the website theme, 4) it makes the web page
coding a lot shorter and easier to read, and 5) in general CSS significantly simplifies the
management of a web site. It is no wonder that CSS are a popular web technology.
While CSS have many uses, we will focus on a simple explanation of implementing a common
style in multiple web pages. This will illustrate the power of the CSS concept. Basically, CSS is
implemented by creating a file containing only formatting/style specifications, then applying that
file to those web pages designed to use the specification. This basic idea is technically referred
to as inheritance. The inheritance property is commonly used not only with CSS, but also in
other modern programming languages such as java, C++, and other object oriented languages.
We will use CSS to modify our Zion web site example. Specifically, our objective will be to
create a common format for the heading and background for the zionhikes and zioncontrast
web pages, then demonstrate how a change in the CSS cascades to all the web pages using it.
Set Up the CSS with KompoZer
Open KompoZer. Launch a CSS development pallet: On the menu bar click the CSS icon (see
Figure 1). It will ask you for the title of the current page. Enter anything you like and save the
blank HTML page. Click the Palette menu bar button (see Figure 2). From the menu select
Linked stylesheet. Click the Create Stylesheet button, then click on Internal Stylesheet in
the menu on the left-hand side. You should see a screen like Figure 3.

Figure 1 - CSS Menu Button

Figure 2 - Palette Menu Button

Figure 3 - Export Stylesheet

Save the CSS file in your website folder (see the following figure): Click Export stylesheet and
switch navigate to the desired folder (the same folder where your web pages are located);
enter the desired file name (zs1.css); and click Save.
We will now modify several HTML tags to include certain formatting attributes. These will later
be selectively applied in our web pages to achieve the desired appearance. On the menu bar
click the Palette icon again (see Figure 1). You should see several options to the right. Select
the option: Style applied to all elements of type. In the select box, select h1 (Heading 1) and
click Create Style Rule. (See Figure 4)

Figure 4 - Create a style rule

For the h1 style tag we will define a font family, color, and position. With the h1 tag in the
left-side menu bar, select the Text tab. Select Use a custom font family in the Font Family
section and select Cooper Black. Font style should be set to normal, and color to #114400
(custom red=17, green=68, blue=0). Set the font size to 36pt. Finally, set the Alignment to
Center and click OK (see Figure 5 for help finding sections).

Figure 5 - Edit Font settings

Click the Palette icon again to create a new rule for h2. Select the h2 option from the select
box and click Create style rule. Click the Text tab again and in the Font Size box type
36pt. This makes all text marked with the h2 markup into 36 point font. Now select the
Borders tab. Make sure that the box indicating all four sides use the same border style is
selected. Select the Solid border style and type 1px (1 pixel) for the width of the border.
Now select the Box tab, and at the bottom enter 5px (5 pixels) for the padding on top,
bottom, left, and right.

Figure 6 - Create a border style rule

Now create a style rule for the h3 tag with font size 18pt. Click OK to close all parameter
windows. Find your CSS file (where you saved it) and open it in Notepad (right-click Open
with Notepad. It should look like the file shown in Figure 7.

Figure 7 - CSS file

Figure 8 - Add background image tag

Finally, define the body tag with the background-image parameter by merely typing it in as
shown in the circled area of Figure 8. Save this file as zs1.css and as zs.css in the common
folder. This completes a CSS file with common formatting specifications.
Create a third CSS file (zs2.css) except make the font-family: Algerian, and color: #441100 as
shown below:

Figure 9 - Modify font family and color

Apply the CSS to Web pages

The next step is to apply this CSS to other web pages using the link tag; the following is one of
several ways to do this. First, open the target web page (zionhikes.htm) in KompoZer. In the
menu bar click the CSS button. Click the Palette icon and select Linked stylesheet. Click
Choose file and select your CSS file (zs1.css). Click Create stylesheet. This inserts the

Link tag into the web page. Click OK to close the CSS window. In KompoZer change from
Design view to Source view. Modify the tags for the body and the first heading line to apply
the body and h1 and tags from the CSS file as shown below:

Figure 10 - New markup tags

Save the revised zionhikes.htm web page in the common website folder. Repeat the linking
process and apply the body, h2 and h3 tags to the zioncontrast.htm page by typing them
into the HTML code view as shown in the code segment below:

Figure 11 - More new markup

You will notice in both of the above examples (zionhikes and zioncontrast) that our common
styles have been defined by three parameters: h1, h2 and h3. This approach also allows the
heading text in the previous zionhikes web page to inherit only those attributes which are
appropriate; and the zioncontrast web page will inherit those attributes appropriate for it.
Shortly we will demonstrate the power of the Cascading feature where changing an attribute
in the common CSS will effect a change in ALL the web pages using that CSS.
Note: For those who know which parameters to use, creating the CSS pages and modifying the
zionhikes and zioncontrast web pages could probably be done more efficiently than our example
KompoZer process by simply using Notepad.
Testing the CSS Implementation

Open the zionhikes.htm file in IE. Click on the picture to launch the zioncontrast.htm web page.
Notice that the zioncontrast page has a similar look and feel as the zionhikes page because the
headings and backgrounds are the same format. This shows how one CSS page can control the
format of many other web pages. I.e. the formats contained in the single style sheet cascade
across many web pages.
Note: CSS are NOT fully WYSIWYG in the KompoZer Design view. You will need to view
the final results by viewing the pages in a browser.
Demonstrating Change Efficiencies
Open the zs2.css file in Notepad and resave it as zs.css. Reopen or refresh the zionhikes and
zionconstrast web pages. Notice how both pages now show the heading changed to the dark red
Algerian font. This illustrates how changes can be made to the format of many pages simply by
modifying the parameters in the common Cascading Style Sheet. I.e. the format change (font
style and color) has Cascaded to ALL of the pages using that CSS definition. That is a very
powerful feature of CSS.
There are many other ways to use CSS. Have fun exploring additional features of this important
technology.

copyright 2008 Lynn J McKell