CSS Shadows (text-shadow & box-shadow)
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
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 */
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.
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.
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
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
In this CSS Video Tutorial we learn how to create equal height column backgrounds.
CSS Two Column Layout Tutorial
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
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
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.
