Cascading Style Sheets

What is CSS?

CSS stands for Cascading Style Sheets. In the previous lessons, we learned about how to use styles as an attribute and then using an internal style sheet. Now, we are going to look at using these same style sheets, but from an external file. These files are CSS files and can save a lot of work for you.

External Style Sheets

External style sheets is a file made in notepad, using only CSS (without tags) and is saved as a .css file. A CSS file can be used for an unlimited number of pages that you want to use it for. (That’s why it can save you so much time!) This means instead of adding your CSS (or styles) in the head tag of your html page, you would save them an external CSS document, for example called mystyle.css.

The way you would link your external style sheet to your html page is by adding one line of code to in your head tag:

<link rel="stylesheet" type="text/css" href="mystyle.css">

 

The href needs to be linked to wherever or whatever you called your CSS file. Example 1 demostrates this below:

Example 1a – The HTML Page 
<html>
<head>
	<title>My Web Page</title>
	<link rel="stylesheet"  type="text/css" href="mystyles01.css">
</head>
<body>
<h1>Heading of the Page</h1>
<p>This is a paragraph</p>
</body>
</html>
Example 1b – The CSS File (mystyles01.css) 
h1
{
color:red;
text-align:center;
}

p
{
color:red;
}

Notice, in the header section of the HTML Page the CSS File is linked, so it can correctly apply the styles to the page. Also, notice that the syntax for thes styles are exactly the same as Internal Style Sheets.

Here is a Demo of how CSS can be applied.

Order of Importance

We have now learned three correct ways to add styles. It is important to know that if you use these ways together on your page, how they will be applied. The order of importance is:

  1. Inline Styles (or using styles as an attribute in each line like in lesson 1)
  2. Internal Style Sheets
  3. External Style Sheets

Commenting

Comments are used to explain your code and should be used to help you, when you are trying to edit your code later. Comments just like in HTML are ignored on your page, but can be seen only in your code. A CSS comment begins with /* and ends with */. Please use comments in your code.

Practice A:

  1. Create a new notepad document called mystyles.css.
  2. Add four selectors, with at least two declarations per selector.
  3. Then create a new notpad document called externalstyles.html.
  4. Then in the head tag add the link tag from the example to link your page to your CSS page.
  5. Lastly, in the body tag, use those four tags to make an example.

Styling Links

As we know, with CSS you can style each selector to how you want it to look on the page. When styling hyperlinks, we need to know that there are four different states that a link could be in: normal link, visted link, hover (when mouse is over it), and active link (the moment it is clicked). Because of this we cannot just use the “a” selector by itself. The correct way to do this is in Example 2 below:

Example 2 – Styling Links 
a:link
{
color:green;
}
a:visited
{
color:green;
background-color:orange;
}
a:hover
{
color:green;
text-decoration:none;
font-size:18px;
}
a:active
{
color:green;
text-decoration:none;
font-size:18px;
}

Note: a:hover MUST come after a:link and a:visted in the CSS.

Note: a:active MUST come after a:hover in the CSS.

Practice B:

  1. Open up your Animal Page assignment.
  2. Add the four states of a link into your Internal CSS.
  3. Add a comment for each of the states, explaining what it does.
  4. Edit them to make them similar to Example 2 of this lesson.
  5. Be creative, but keep it consistent with the current colors on the page.