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 fi le

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