header 2000

3 CSS Basics

CSS Styles are a set of rules to control the appearance of various elements of our website. CSS styles are independent of our content. Thus, one style sheet can not only be used for several web pages within a single website but also used to control the appearance of several websites. This chapter is divided into four sections.

3.1 How to Create a CSS Stylesheet

3.2 Select and Style Fonts

3.3 Colors and Gradients

3.4 How to be a CSS Detective

In Section 3.1, we will use the Bluefish Editor to build a CSS Style Sheet.

In Section 3.2, we will review web font options and use our new style sheet to modify the appearance of our web fonts.

In Section 3.3, we will explain how tags, classes and IDs can be used to control the parts of our web page that a given style is applied to.

In Section 3.4, we will cover how to create and specify colors and background colors as well as linear and radial gradients.

Here is a diagram of CSS syntax. Note that colons are used at the end of each property while semi-colons are used at the end of each value:

3.0.01

At the end of the last chapter, we created an internal style sheet by copying a series of inline attributes and then pasting them into the head of our document. In this chapter, we will review how to create an external style sheet. We will then place our style sheet into our website css folder and then provide a link the style sheet in the head of our web documents.

Bluefish CSS Style Sheet Builder

In addition to providing tools to build HTML documents, Bluefish comes with a tool to create style sheets. They call it the CSS Style Sheet Builder. To create a stylesheet using the CSS Style Sheet Builder, click File, New to open a new document. Then in the Bluefish Toolbar, click the CSS tab. Then click on the Create Style Sheet Icon which is the first icon on the left. This will open the Cascading Style Sheet Builder:

3.1.01

Click on the Selector Drop down arrow. This will bring up a list of elements or tags which in CSS are called Selectors – all listed in alphabetical order. In addition to the selectors on this list, we can create our own custom selectors – which we will discuss later in this chapter.

For now, click on the body selector which is the first selector in most HTML documents.

3.1.02

Then click on the Property drop down arrow to see a list of properties we can apply to this selector.

In this section, we will explain how to select and style text for your web pages. This is going to be a difficult subject since most web design instructors specifically recommend that you not style your text. Their reasoning is that viewers know what family of text they prefer and can set their own preferred font family and font size in their browser. If you call out a font family and size in your CSS file, your settings might over ride the settings of your web viewers.

There are three problems with this line of reasoning. First most people are not aware of how they can set their own font family and font size in their browser.

Second, there is the problem of screen size and resolution. What may appear to be readable on one screen size and resolution may not be readable on a lower resolution or a smaller screen size.

Third and most important, your viewers are not likely to be experts in readability. But if your web page have text that is hard to read, the viewer is less likely to keep reading what you want to tell them – even if they are not aware that their reading problems may be due in part to how the font family used by their browser combined with a possibly low screen resolution is making it hard for them to read your text. .

Four all three of these reasons, I specifically recommend that you do select your font family and font sizes. Studies have shown that the San Serif family is more readable on most computer screens than the Serif family. Let’s use Bluefish to start a new html page. Call it myfirsttexttest.html. Here is what the Text Test page looks like initially in the Firefox browser:

3.2.01

This is different from the default text in the Bluefish Editor. Click on Edit Preferences and you will see that the default font is a sans serif font called Monospace Regular size 10:

3.2.02

Raise the size to size 12. Then click OK. To see the font settings in Firefox, click on Preferences and scroll down the Settings page to Fonts and Colors. The default is DejaVu Serif set for 16 pixels which is 12 points.

3.2.03

For practice, let’s create a new stylesheet with the Bluefish Style Sheet Builder. Begin with File, New and save the file to your CSS folder as mytexttest.css. Then click on the CSS tab. Then the Style Sheet Builder icon. For the h1 selector, Property select font-family. Then for value, click arial, sans-serif. Then click Add. Repeat for the P selector. Then click File Save. Then in the head of our Text Test HTML file, copy and paste the full URL to your new css sheet. Here is the path to my css sheet (your path may be slightly different):

<link href="file:///home/david/My First Website/css/mytexttest.css" rel="stylesheet" type="text/css" />

Save the HTML file. Then open it in the browser

One of the least used areas of web design is the use of background colors to help the viewer understand the layout of the web pages. Imagine you have an online retail store with dozens of products in different categories on your Home page. Or imagine you have a news website with dozens of news articles in different categories on your Home page. In both cases and many more, using different background colors can help seperate products or articles in one category from products or articles in the next category. In the next chapter, we will discuss page layout. But in this section, we will discuss how to add a lot more color to your web pages.

Here are some examples of the use of background colors to divide and organize content on a web page.

3.3.01

Here are rows of feature boxes on a news website:

3.3.02

Here are some more colorful boxes:

3.3.03

Here is a menu using CSS color classes to define different menu items:

3.3.04

Example of Rows and Columns Needed for an Online Store or News Website

All too often, your web pages will not appear in the manner you expect. In other cases, you may wonder how others get their websites to look so much better than yours. In this section, we will review some methods you can use to solve appearance problems on your website and learn from the appearance methods used on other websites.

3.4.01

Save Your Files and Clear Your Cache
You
made several changes to your CSS and or HTML only to see these changes fail to appear when you open the page in a web browser. When things do not appear as you expect, first make sure that you did not miss a colon or semi-colon in your CSS. Then make sure that you saved both your CSS and HTML files. Then make sure you cleared your Firefox browser cache. The easiest way to clear this cache is to go into Firefox preferences and display the top menu.

3.4.02

Choose Clear Everything and click Clear Now. Then refresh and reload the page.

Use Firefox Web Developer Debugger to Better Understand the CSS
If you are still having problems, Firefox used to have a free tool called Firebug. It is now a part of the Web Developer Tools and is simply called the Debugger. To open it, go to Tools, Web Developer and click on Debugger. A split screen will appear with your web page at the top and the debugger at the bottom.

3.4.03

To understand why the title is so big or to analyze any other element on the page, click on the small box to the left of the Inspector and hover it over the title.