Free CSS Video Tutorial With Template Examples

Home >> Web Design >> CSS Tutorial

It took me a long time to get my hooks into CSS (Cascading Stylesheets). But once I discovered the benefits, I have not looked back and will never create a site without CSS again.

If you use WordPress then your site is already driven by CSS and the stylesheet can be found by going to Appearance >> Editor from the Admin panel. Look for a file called stylesheet.css or style.css.

This is the file that governs the entire design, font sizes, colors and widths of your site. You can learn more about editing the stylesheet in my full WordPress tutorial.

Stylesheets will save you loads of time by allowing you to update various parts of your site by updating one file. The video tutorials below will show you how to create a CSS website from scratch. (This is for static sites only, not blogs).

CSS Tutorial Part 1 - Basic Layout

In this tutorial, you will learn how to setup a basic, 3-column layout in CSS by creating a stylesheet from scratch.

Be sure to download the template that goes along with the tutorial.

CSS Tutorial Part 2 - Styling Links and Text

Now that you've learned how to setup a basic CSS layout/template, it's time to style your links and text.

CSS Tutorial Part 3 - Creating a Horizontal Nav

A quick tutorial that shows you how to setup a horizontal navigation by creating a new class.

CSS Tutorial Part 4 - Creating Tables

Learn how to create tables/boxes using CSS.

If you enjoyed these tutorials, check out my CSS starter templates.

More CSS Tips

Have you ever wanted to position/float something on your site, but you're not sure how to accomplish it? Let's say you want to position a banner in the header of your website.

Anytime you want to create an element that you want to be called one time on your page, you use an ID, which is represented by the pound sign in your CSS file. So here's the code for your stylesheet.

#BannerCode {
position: absolute; top: 10px; right: 25px;
width: 400px;
}

This tells the browser that you want the code to be placed 10 pixels from the top of the container and 25 pixels over from the right. The 400 pixels represents the width of the banner.

Now add the following code to your your header...

<div id="BannerCode">INSERT BANNER CODE HERE</div>

That's all you have to do! Now your banner will show up where you insert the HTML code above. If you need to adjust the placement just change the coordinates as needed.

Now, if you are creating a style that you will use over and over again, you will create a class. A class begins with a period in the stylesheet. So...

.smallText {
font-size: 10px;
color: black;
}

This simply creates a style for small black text. You may want to use this for disclaimer text, your footer, etc.

Notice the CSS code starts with a period instead of a pound. That means it is a class and we can apply this style to multiple areas on the site.

So if you want to use this text style in your footer, you can add the class to the paragraph tag in your page. So it may look like this...

<p class="smallText">This text will be small.</p>

Now that text will take on the style identified by the selector.smallText in the stylehseet.

If you liked this, please share. Thanks!