Tracy L Baker - CIS133 - Final Project

CSS Intro

Click on a tag to jump to its section:
Inline Styles | Internal and External Style Sheets | Class Selectors

In this lesson, we covered Cascading Style Sheets, otherwise known as CSS. CSS is different from all the previous lessons in that it is technically not a discussion about HTML, per se. In fact, one of the goals of CSS is to remove formatting HTML code and replace it with CSS code. CSS is a very powerful concept, one that I cannot cover in its entirety here. So, I'll cover a few basic things. Click here for more information on CSS.

The code that is being replaced is, generally, various HTML tag's attributes -- ones that control the formatting (or style) of the page. So while the <p> tag would still be in an HTML page, a paragraph tag that looks like this would not:

Instead, remove the attributes and add appropriate coding into the CSS.

A big benefit of this is that you can have one Style Sheet controlling many web pages, thereby making it very easy to create, and maintain, a unified theme across many web pages.

There are three ways that CSS can be used; inline, internal Style Sheet, and external Style Sheet. Of these three, I much prefer the external Style Sheet -- using one makes it very easy to apply styles across many web pages. The other two methods, particularly inline, aren't used as much -- perhaps for "quick and dirty" coding. Nevertheless, here are some examples.

Inline Style:

In the following line of code I'm using an inline style. It is being applied to a <p> tag and, because it is inline, it overrides the styles that I have chosen for the paragraph tags on this page.

This is a paragraph.

Style Sheets, Internal and External:

As mentioned previously, inline styles aren't used a great deal. The above example does show a good example of when an inline style would be used, perhaps as an override or possibly a one-time use of a style.

Style Sheets, whether inline or external, are used much more often. The main difference is that internal Sytle Sheets are applied internally to each individual HTML page, whereas external Style Sheets are usually applied to many HTML pages. In each case the structure of the style sheet is virtually identical.

Internal Style Sheets are placed in an HTML page's <head> section. Using the example of applying a style to a paragraph tag, an internal Style Sheet looks like this:

The format of the sheet is important. In its basic form it is:

Let the browser know you're using a style sheet: <style type="text/css">
Tag to which these styles will be applied; in this case, the paragraph tag (p)
Opening brace - {
Style elements to be applied to the tag
Closing brace - }
Close the <style> tag.

All of these elements can be placed on a single line. To use our paragraph tag example, it would look like this:

When done this way all text on the HTML page, within paragraph tags, will assume the styles that have been defined (in our example: light gray background, bold, sienna colored text, with the left margin inset 20 pixels).

When one wishes to apply a style to multiple HTML pages, an external Style Sheet is by far the best option. This is a two step process. (1) Make a reference to the external Style Sheet in the <head> section of each HTML that you wish to use the styles, and (2) create a separate simple text file with the styles defined within it.

Step 1: Define external Style Sheet (example.css) in the <head> section of the HTML page:

Step 2: Define the styles in the external simple text file (example.css) -- using our previous paragraph tag example (single line):

Now that this is done all text in every paragraph tag on every page that has the external Style Sheet defined within its <head> section will have the defined styles applied to them.

Style Sheets (internal or external) can, of course, have many styles defined for many tags. A small example from the external Style Sheet that is controlling this web site (all single line, to save space):

So, in my example, I'm controlling the styles for the body, paragraph, and heading 5 tags. You can view my CSS file by using the link in the footer section, below.

Class Selectors :

The final point I want to make is that there are style definitions known as a class selectors. There are various methods to define a class selector. I'll talk about the method I like the best. Changing a previous example a bit to this:

Notice that I changed the "h5" to ".special". The period preceding the word "special" defines it as a class selector. By doing this, I can now use the styles defined by the .special class selector with many different tags, by using the class="" attribute with the tag, three examples:

In each of these three cases, the styles defined by the style .special will be applied to each tag. Notice that, within the class="special" attribute, the leading period is not used.

Again, there are many things that can, and should, be done with CSS. Please use the link, below, to explore CSS in more depth.

Click here for more information on CSS.