Learn Web Code

CSS Shadows (text-shadow & box-shadow)

Brad — Tue, 29 Nov 2011 06:50:11 +0000

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.

Clearing CSS Floats – Clearfix

Brad — Sun, 27 Nov 2011 05:03:50 +0000

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 */

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

Brad — Sun, 27 Nov 2011 04:57:20 +0000

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.

CSS Floats – Understanding & Clearing Floats Tutorial

Brad — Sun, 27 Nov 2011 04:48:27 +0000

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.

CSS Background Image Replacement Tutorial

Brad — Wed, 21 Apr 2010 19:49:11 +0000

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.

CSS Navigation Tutorial

Brad — Wed, 14 Apr 2010 20:30:55 +0000

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.

Equal Height Columns – CSS Tutorial

Brad — Tue, 13 Apr 2010 19:05:29 +0000

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

CSS Two Column Layout Tutorial

Brad — Tue, 13 Apr 2010 01:27:52 +0000

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:

Intro to CSS – Basics + Selectors

Brad — Fri, 12 Feb 2010 17:47:33 +0000

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:

How To Add an Image To a Web Page

Brad — Fri, 12 Feb 2010 17:39:09 +0000

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

Notice there is no end tag. This is because the element is a Self Closing Element. Unlike a paragraph, we won’t have a plethora of content inside our 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.