Introduction to CSS (Cascading Style Sheets)

Posted in CSS | Posted on 18-05-2009-05-2008

In the past, webmasters had to declare the presentational attributes of each HTML element respectively.  For example if you had an <h1> tag and wanted its font size to be 15 pixels, you would have to specify the font size for the that particular <h1> tag.  That sounds easy, right.  Now imagine that you have 2000 <h1> tags throughout your site, and you have decided that you want to change the font size on all of them to 13 pixels.  This would more than likely be a nightmare to accomplish.  This is where CSS (Cascading Style Sheets) comes into play.

CSS is  about presentation.  In other words, when we use CSS with our HTML page, the CSS code will determine how our HTML elements are going to look.

In this tutorial we will be introduced to three ways of how we can implement CSS and its attributes within our HTML page:

1.  External

h1 {
font-size: 13px;
font-family: Arial;
color: #ccc;
}

With external CSS, we would put the above CSS code  into a file with a .css extension. Example (stylesheet.css)

In the example, h1 is the element that we are declaring.   We will place its attributes within brackets.  Each attribute and its value is followed by a semicolon.

We then would use this style sheet with our HTML page by inserting the following line of code in between the <head> tags:

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

In this example all of the <h1> tags will be displayed as grey in color, Arial in font, and 13 pixels in size.

2: Internal

Within the <head> tags of your HTML page, you would insert the following:

<style type=”text/css”>
h1 {
font-size: 13px;
font-family: Arial;
color: #ccc;
}
</style>

The display is the same as the external example.  The difference is that since internal CSS is on the same page as HTML, it will overide the CSS code in the external file.

3.  Inline

Inline CSS is when you simply declare the presentation of the element within the HTML tag:

<h1 style=”font-size:13px;  font-family: Arial;  color: #ccc;”>Hello World</h1>

As with the previous example, the output is no different.  The difference is that this particular <h1> will be displayed with these features.  If you had other <h1> tags on your page, they would be displayed differently.  Inline CSS code will override the  code of internal CSS and external CSS files.

CSS is a powerful feature simply because it will make life easier on you.  You can literally change 1000 web pages with just one CSS file.  I highly recommend that you learn CSS and CSS layout.  We will definitely be learning a lot more about CSS in future tutorials.