Introduction to Cascading Style Sheets (CSS)

Hey there! Congrats on your decision to use CSS in your projects.

Making great looking websites is SO much easier when you know just the basics of CSS. That’s why I created this guide for you.

This guide walks you step-by-step through learning and using CSS.

First we’ll get familiar with CSS, what it’s used for, and why. Once you know the basics, you can start running with it. After this introductory section, we will turn to the heart of the piece: the tutorial.

Also, just to give you an overview, here are the sections of the tutorial so that you can jump around if you need to:

Also, here are jump links to the sections on this page:

Let’s get started!

Overview Of Cascading Style Sheets

CSS, which is the acronym for “Cascading Style Sheets,” is a version of HTML language that allows you to alter the fonts, margins, lines, height, width, background images, color, and other features on your webpage.

This extension of HTML, while not challenging to use, can take some time to learn. Whether you are a professional or a website owner, having background in a bit of HTML and CSS enables you to take your website design a step further. You can create amazing emails, corporate newsletters, and alter your company’s WordPress website in many new ways.

One very simple example of an HTML tag is:

<u>text you want to underline</u>

While this is a fine approach, the trouble is that now, if you want to change the text that you initially underlined in your text, then you need to go through every single area that you wrote the code into and tweak it. Essentially, it’s an easy fix that is also very time consuming.

Another issue that you will encounter is altering the text by adding color, a different font, and the like. Similar to the concept above, if you want to change the text in certain ways, your HTML code will get to be a bit more complicated.

Here is an example:

<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif">
<strong>This is text</strong></font>

The code line above is now not only bolded, but the font style is also now Verdana instead of Arial or Helvetica or Sans-Serif. The more codes you have wrapped around the text, the messier your HTML gets.

It really is not an ideal situation, especially if there is a less verbose code that ultimately leads to the same outcome.

Rather than utilize the complicated approach explained above, CSS provides you with a clean and neat alternative: creating a custom style. The custom style includes all of the same properties as the messier HTML code above does, but just in a neater form. After you create the simple code, you give the code a unique name and ‘tag’ the HTML so that it applies the new stylistic properties.

Here is what the ‘tag’ looks like:

<p class= "myNewStyle">My CSS styled text</p>

Now that you have the tag, you can add the CSS code that explains the same style in much simpler form.

Here is the style that was just applied:

<style type="text/css">
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;

The code above is embedded directly in the CSS code right into the webpage itself. If you do opt for this system, know that it is only really ideal for smaller webpage projects or when you need to work on one page. For multiple pages, normally you would need to copy the above code into every single webpage. As you can image, this is also time consuming and it can also make each page look pretty cluttered.

Moreover, it is likely that not every page is going to have the same style. As a result, you would need to tweak the code on each page to achieve the look you are aiming for. The simpler strategy operates much like JavaScript does. Like with JavaScript, you can create a separate file that links to the webpage that you would like to make changes to. Just do not forget to create or define the separate CSS style.

This is what the link on a separate page looks like:

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

Once you have the code, you can link your external style sheet labeled as: ‘my FirstStyleSheet.css’. The sheet links to the HTML document. On your webpage, you place the code in between the tags

back to menu ↑

Introduction to Cascading Style Sheets (CSS): Part 2

The Process of Creating a Linked External Stylesheet

A linked external stylesheet is one of the best ways to add CSS to separate webpage sheets. The first step in the process is actually quite easy. Just open a text document on your computer; if you are using windows, then right-click and click “new text document.” Once you have the text document set up, change the form of the file from .txt to .css.

What we just did here is change the file type by altering the extension. The extension is what notifies the computer what files you are working with and since the computer now knows you are working with a .css file, it will open it differently as opposed to a .txt document.

When it comes to .css files, the extension is not really the major change that takes place. What really is significant is the HTML text in the file.

Here are some hardline rules to remember when using an external CSS document:

  1. Tags are not embedded in the CSS page similar to how the CSS code is embedded into the HTML:

<style type="text/css"></style>

The CSS link on your webpage links to the CSS page, therefore it is not necessary to write in the external CSS file that you are using CSS code. This is just redundant and a waste of time. The tag above does that for you in a much simpler way. Instead, the CSS code should be added right to your page.

For Example:

.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;

.my2ndNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;

.my3rdNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;

Just to clarify, what we have done with the above code is create separate CSS classes. The CSS classes can be applied to an HTML tag, which would look like this:

My CSS styled &amp;nbsp;text

Or this:

<h2 class=”my3rdNewStyle”>My CSS styled &amp;nbsp;text</h2>

The first example is a CSS style that was applied to the <h2> tag. This tag alters the size and appears of the text and it also modifies it so that comports with the size that is on the browser.

Since there is already a default style in place on your browser, adding the CSS class alters the default style by overriding it with the style that you set forth in the <h2> tag. As you can now tell, with CSS style, you can override default HTML tags.

An alternative method to apply CSS is to change the way the HTML tag looks by globally redefining it, like so:

h1 { font-family: Garamond, "Times New Roman", &amp;nbsp;serif; font-size: 200%; }

In the example above, the code set the font style and size for all <h1> tags – all in one go. As you can tell, you now do not need to go through your entire document to alter or apply a CSS class since everything has now changed automatically.

Below is what a page-wide change would look like that gives the page larger margins:

body { margin-left: 15%; margin-right: 15%; }

The great thing about redefining tags is that you can change the appearance of the page.

For example, here is a more powerful and extensive change:

div {
background: rgb(204,204,255);
padding: 0.5em;
border: 1px solid #000000;

In the above example, instead of using the extensive code for “green,” we just added the word “green.”

Essentially, we got the exact color by using the code – you just need to make sure you know the names of the codes when using this approach. There are many programs that you can use to figure out the values of the code.

Finally, here is another CSS code example that enables you to generate link roll-over effects sans images:

a:link { color: rgb(0, 0, 153) }
a:visited { color: rgb(153, 0, 153) }
a:hover { color: rgb(0, 96, 255) }
a:active { color: rgb(255, 0, 102) }

With the CSS code above, your webpage links will change color when a user hovers over the link with their mouse. Voila! Now you have instant rollovers without pesky images involved. When using the code above, the key thing to remember is that the style declarations must be in the correct order – for instance:


If you do not use the correct order, the code may break in a few browsers.

What we have just covered allows you to do some pretty neat things to your webpage and is just enough to get you started. Overall though, CSS has many capabilities, but most people do not need to use the majority of them. Also, you should not feel obligated to use CSS. It is just a tool to give you more leeway when constructing your webpages.

Now, let’s continue to part one of the CSS tutorial (with code examples).

Proceed To CSS Tutorial Part 1


We'd love to hear your thoughts...

Leave a reply

Hosting Review Box
Compare items
  • Total (0)