A Crash Course on CSS

***If while reading this page, you look at the source code, you will notice two external style sheets (you'll learn about these momentarily). You will also be presented with a link to look at the main external style sheet for this page "example.css". Please do not be tempted to look at the second style sheet "quiz.css" as it is used as a "quiz" that is presented at the very end of this page. Try to challenge yourself after reading through this page. Don't cheat! Good luck! :D ***

The topic of Cascading Style Sheets (CSS) was brought up often in class as it is the new standard from the W3C (World Wide Web Consortium) for website layout and much more verstaile than using standard HTML. I used CSS extensively in the creation and design of the azafl.com website. To see an example of the main css for the azafl.com site, you can click here. (If prompted, open the file with any basic text editor such as NotePad or WordPad.) This CSS is the main CSS for the azafl.com site that has the basic styles that apply to all pages of the website, and some for the main page. Each page of the website also has its own CSS for style applied only to that page. You may notice some similarities in the tags and elements used in CSS, but the coding and application is different.

To see what kind of difference CSS can make, click on the azafl.com link to view the main site with CSS first. Then click here to see the same page with the CSS removed. You can obviously see how much can be done with the use of CSS. Feel free to browse through the no CSS site, as the CSS have been removed from all pages. Your initial thought may be that there is more that has been changed in the pages, but it is the CSS only (and the links were changed to link to the no css pages). If you want, look at the source code for the same page on the regular site and on the No CSS site. You will notice the only thing that is different is the No CSS pages don't have the '<link rel="stylesheet" type="text/css" href="css/main.css">' code in the '<head>' section. Some pages have an additional stylesheet as well and those have also been removed.


So now that you've seen what a difference CSS can make, let's break them down a bit. Obviously Cascading Style Sheets are used to control the style of the page. The word Cascading comes from the way they are applied. There are 4 types of style sheets that can be applied to webpages in the following order from lowest to highest priority.

  1. Browser Default
  2. External Style Sheet
  3. Internal Style Sheet
  4. Inline Style Sheet
Number 1 may sound strange at first, but yes, your browser has its own default style sheets. If a style is not declared in the page you're viewing, you're browser will set text size, color, background color, and more based on your default preferences. Second is an Eternal style sheet. These are style sheets that are linked to from the webpage using the '<link>' above. These are good for applying the same style to multiple pages, and also make it easier to apply the same change to multiple pages. Instead of changing the code on every page, you can just change the code in the style sheet, and all pages that link to that style sheet will have the changes applied to them. Third is an Internal Style Sheet. These are style sheets located within the <head> tag of a particular page and are good for applying styles to one particular page (another style sheet could be used for this as well. Lastly, and highest priority, is Inline Style Sheets. An Inline Style Sheet is used to apply style to a particular element, text, or group thereof within the page. The reason they are called Cascading is because the all styles from all 4 types of style sheets will combine, or cascade, into one style sheet that is applied to the page you are viewing. If a style is applied to the same item in different style sheets (say an <h1> tag) the style with the highest priority in the list above will be applied. Say you have an external style sheet that makes all <h1> tags appear green, but you have an Inline Style Sheet for one <h1> tag on one of your pages that makes it blue. The text with that <h1> tag will show up blue because of the priority. Think of it as being applied in the order above. The tag that makes the <h1> text green is applied first, but then as the page is loading the parser notices an inline style sheet (applied last) that makes that <h1> text blue and overwrites all other <h1> color applications.

So now let's look at how to write CSS. First of all a CSS "Rule" is made up of three parts: A Selector, A Property, and A Value. 

selector {property: value}
The selector is the HTML tag that you wish to change, simple enough. The property is obviously the property of that tag you wish to change (color, size, alignment, etc.). And the value is the value you wish to apply to the property you have selected. The property and the value are separated by a colon ' : ' and are enclosed in curly braces '{ }'. Just like in HTML, white space does not matter in writing CSS, so you can use spaces and carriage returns to make your code more readable.

**For the examples below, this page uses an external style sheet with class and id selectors, an internal style sheet, and an inline style sheet. Although the code is listed, if you would like to view it within the scope of the page, just view the page source. To view the source code of the external style sheet you can click here. This page does not use any of the HTML <font color=" "> tags. All styling (font size, colors, etc.) on this page are controled exclusively with CSS.

Regardless of what type of style sheet you are using, the syntax is still the same. So if you wanted to make an <h3> text gray:

Code Result 
h3 {color: gray}

Gray <h3> text


This text was generated with an external style sheet that you can link to above.
The reason I used an <h3> tag there is because if you looked at the source code for this page, you would notice that there is an Internal Style Sheet that makes all <h1> text green and it will overwrite any <h1> style applied from an External Style Sheet, because of the priority list above. For example, the External Style Sheet is set to make all <h1> text yellow (if you don't believe me you can check the code :P) but we end up with this for all <h1> tags:

Code Result 
h1 {color: gren}

Green <h1> text


Lastly is the Inline Style Sheets. Remeber that Inline are the highest priority and cascade last, so they will overwrite any previously declared styles. So if we write the CSS Rule as such we'll get:

Code Result 
<h1 style="color: red">

Red <h1> text


You will notice that the syntax is just slightly different for inline style sheets, but still follow the same general rules overall.

Another thing you can do is use class and id selectors to single out certain elements within your page even more. For example, our external style sheet is set up to make any tag with a class of "orange" to appear orange, and any <h1> with an id of "aqua" to appear aqua. When writing a rule using class or id selectors, the syntax is the same, you just add a ' . ' after the selector for a class and a " # " after the selector for an id. The difference between a class and an id is that an id selector is generally only used on one tag on a page and a class selector is used on multiple tags. Class and Id selectors can be set up as a blanket rule or can be applied to certain elements only. This means that any tag with a class of "orange" will appear orange. But only h1 tags with an id of "aqua" will appear aqua. For example:

Code Result 
.orange {color: orange}

<h1> tag with a class of "orange"

 
h1#aqua {color: aqua}

<h1> tag with an id of "aqua"


If we tried to use this tag we would get:
Code Result 
<h3 id="aqua">

This is an h3 tag.


The reason this text is gray and not aqua, even though it has the "aqua" id selector, is because our id selector is set up to only apply to <h1> tags with an id of "aqua" and not any tag with an id of "aqua" like our "orange" class selector is. Therefore, since the id tag does not apply, it applies our default h3 rule of setting it to gray

Since the "orange" class selector is generic, and not limited to a particular tag, we can use it to do this:

Code Result 
<td class="orange"></td>
 This text also has a class of "orange"


This is a very BRIEF overview of CSS. If you would like to learn more, I would recommened the W3C Schools site. It is a great site and where I did a lot of my learning, in addition to instructional videos. Here is the link.


***The color of the h2 text above is controlled using another external style sheet, with a little something extra thrown in for the link. See if you can write the code to achieve the text color above. Don't worry about the link becuase I got a little tricky with that, which you can see in the link below.

Hint: The text is an h2 tag. Once you think you have it, click here to view the source code for the separate external style sheet to see if you are correct. The color may not render correctly in Mozilla Firefox. If it appears black, it is supposed to be blue. See if you can still figure out the code that would make it blue.***

Just for laughs, if you want to see this page with all the styling removed click here.