Skip to content
Nov 28 11

CSS Shadows (text-shadow & box-shadow)

by Brad

In this CSS video tutorial we learn how to add shadows to our text, our block level elements, and finally how to use RGBA color values to control the opacity of our shadows.

Nov 26 11

Clearing CSS Floats – Clearfix

by Brad

Every web designer / developer has a preferred method for clearing their floats. I’m partial to simply tacking on a class of “clearfix” to a parent element which has floated children. Below is the CSS code for this “clearfix” method. If you are unable to copy and paste the code below, here is a link to a plain text file with the same code.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* @end */
Nov 26 11

CSS Box Model Tutorial (Padding, Margin, and Border)

by Brad

In this CSS video tutorial we cover the basics of padding, margin, and border, and how these properties affect the dimensions and spacing of elements.

Nov 26 11

CSS Floats – Understanding & Clearing Floats Tutorial

by Brad

In this CSS tutorial we take a look at how the float property affects the elements it is applied to, and also its surrounding and parent elements.

Apr 21 10

CSS Background Image Replacement Tutorial

by Brad

In this CSS Video Tutorial we learn how to replace plain text elements with CSS background images.  This is a great strategy to improve your SEO (search engine optimization) performance, and also increase accessibility.

Apr 14 10

CSS Navigation Tutorial

by Brad

In this CSS Video Tutorial we learn how to apply very basic styles (including hover effects) to our navigation. For quick reference, you may also watch the tutorial where we created the Two Column Layout.

Apr 13 10

Equal Height Columns – CSS Tutorial

by Brad

In this CSS Video Tutorial we learn how to create equal height column backgrounds.

Apr 12 10

CSS Two Column Layout Tutorial

by Brad

In this CSS tutorial we learn how to create a simple two column layout by hand. Here are a few quick reference links to the files created in this video:

Feb 12 10

Intro to CSS – Basics + Selectors

by Brad

In this Intro to CSS video tutorial we learn how to add basic styles to a page with CSS. First, we link to an external style sheet, and then we learn the basic syntax of CSS, as well as four of the most common CSS Selector types; (1) type selectors, (2) ID selectors, (3) class selectors, and (4) descendant selectors.

To view this lesson in full written form, see:

Feb 12 10

How To Add an Image To a Web Page

by Brad

In this video we learn how to insert an image into a web page by hand, using HTML code. We also learn how and why to use the “alt” attribute, and how to organize images into sub-folders.

Quick Code Reference

<img src="image-name.jpg" alt="Short description of image" />

Notice there is no </img> end tag. This is because the <img> element is a Self Closing Element.  Unlike a paragraph, we won’t have a plethora of content inside our <img> element, but rather a single image.   The /> at the end of the code tells the web browser to end the image element.

For a full written tutorial, see How to Insert an Image in HTML.