Conquering Cascading Style Sheets: Part 1

CATEGORIES: GoLive, Tutorials | Chris Converse | January 24, 2006

If you’re relatively new to Web design and HTML, this tutorial will help you gain an understanding of the role that Cascading Style Sheets (CSS) can play in describing how your webpage should look.

This tutorial is the first part of a three-part series on style sheets, including:

• Part 1: Beginner (this Web article): Covering CSS definitions, HTML elements, classes, and pseudo-classes
• Part 2: Intermediate (Layers magazine, January/February 2006): Navigation and links, styles for tables, and background images
• Part 3: Advanced (Layers magazine, March/April 2006): DIV properties and CSS-based layout

  To follow along in GoLive CS 2, download and open the file GoLiveCS2_Issue5_Beginner_Tutorial.site.

  To follow along in GoLive CS, download and open the file GoLiveCS_Issue5_Beginner_Tutorial.site.

STEP 1: Start with Some Text

Open the file index.html. Start with some plain text on your page. Without any CSS instructions, GoLive will display the text as black, Times Roman, at approximately 14 points. This is because this is the average default setting of most Web browsers.

STEP 2: Assigning HTML Elements

Before creating some style sheet definitions, let’s first style the text with basic HTML mark-up. Select the text “ATTRACTIONS,” then on the Options Bar at the top, from the Set Paragraph Format pull-down menu, select Heading 1. This creates an HTML element named <h1> (which stands for Heading 1). GoLive will also render this to the default settings of most Web browsers.

STEP 3: Adding a Link to Text

Next, select the “Learn more” text, and in the Inspector palette, enter a pound sign (#) in the Link field. This will create linked text in the document. This also creates an HTML element named <a> (which stands for anchor). Anchors are the most common way to make items “clickable” in webpages.

STEP 4: A Look Under the Hood

Click on the Source Code Editor button at the top of your window to switch to Source view and look at the code we have generated so far. The green arrows indicate the beginning and end of the heading <h1> element, and the orange circles indicate the beginning and end of the anchor <a> element. Notice that the “ATTRACTIONS” text is inside of the heading element, and the “Learn more” text is inside of the anchor element. This is important to note because when we make our CSS definitions for headings and anchors, only the text inside of these tags will be affected.

STEP 5: Open the CSS Editor

Click on the Layout Editor button to switch back to Layout view. Then, click the Open CSS Editor button at the top right of the document window to bring up the CSS Editor for this page. You can have CSS definitions in two places: inside the webpage you are working on, or in a separate CSS document that is linked to your page. The advantage of linking to a CSS document is that you can use one CSS document on all of your pages, and exercise global control of your website’s look from one place! So, we’re going to opt for this.

STEP 6: Linking to a CSS Document

In the CSS Editor window, click the button to Create a Reference to an External Style Sheet File. Next, you will see an empty reference created in the area to the left. Select it, and use the Fetch URL button to point-and-shoot to the stylesheet.css document in the site window. Then close the CSS Editor window.

STEP 7: Create a CSS Definition

Open the file stylesheet.css. We are going to redefine some standard HTML elements. Click on the Create a Style That Applies to Markup Elements button, and select h1 from the pop-up menu. This will allow us to redefine how the Web browsers will render text inside of the <h1> element tags.

STEP 8: Assign Properties to a Definition

Select the <h1> element in the definition list to the left. Next, click on the Font Properties tab. Choose 12px for the size. Double-click on the Color field to bring up the Color Picker and choose a brownish color. Then, click the Create New Font icon at the bottom right of the window and select Arial as the font from the pop-up menu.

STEP 9: Assign Additional Text Properties

Now, select the Text Properties tab and enter 20px for Letter Spacing. As you make changes, you’ll see your changes happening in real time.

STEP 10: Style Your Links

Make a new definition for the <a> element. Select the a:link item from the Create a Style That Applies to Markup Elements button’s pop-up menu. (If the buttons shown here don’t appear along the top of your window, click below your new element to get back to the front screen and turn on the checkbox for Show These Buttons at Top.) This controls the way a link looks in your page. the “:link” is actually a pseudo class, meaning a subset of the <a> element. We’ll do more with this in the next step. Once you make the new a:link element, select the Font Properties tab and choose Red from the Color pop-up menu.

STEP 11: Set Rollover Colors for Links

Make a new element, just as in Step 10, and select the a:hover. This is another instance of the anchor element <a>, but with the pseudo class of hover. This means that the properties you select with this definition will only occur when you hover (move your mouse) over the link. Click the Font Properties tab and select a light blue color in the Color field. Save your style sheet document (File>Save), and choose the Preview button in your document. Roll your mouse over the link to see the :hover pseudo class in action!

STEP 12: Set Properties for the Page

Let’s make yet another element definition. Same process as in Step 10, but choose . In the Font Properties tab, select Blue from the Color pop-up menu, and Yellow from the Back Color pop-up menu. Type 12px for Size, and choose Times from the Create New Font pop-up menu. As before, you will see the changes reflected immediately.

STEP 13: Make a Custom Class

Now we’re going to invent our own definition item. Click on the Create a New Class Style button. This will create a new item in the left area called “.class.” Class items are items you can name anything you want, as long as it starts with a period (.). Let’s name it “.heading” and give it a Size of 18px in Font Properties. From the Style pop-up menu, select Italic.

STEP 14: Assign Your Custom Class

Finally, select the text “Night Life” in your webpage. Bring up the CSS palette under the Window menu. You will see a listing in this palette of every custom class you create. Turn on the checkbox under Inline Style next to the “heading” item. GoLive will also show you a preview of what the text will look like with this style selected in the preview pane of the CSS palette. If you look at the Source view again, you’ll notice your custom CSS tags inserted into the code <span class=”heading”> around the Night Life text.

Now you are ready for part 2, the intermediate lesson, in the January/February 2006 issue.

Back to Top

Get the latest tips, tricks and news delivered straight to your inbox.

• 
• Dragging an Object Between Documents
• TV Scanline Effect
• Trick to the Glossy Effect
• 3D Text
• Changing Type on a Path
• more tips