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 […]
CSS Lesson 6: Shorthand Properties (Padding and Margin)
The padding and margin CSS properties are essential in building web layouts. Since rectangles (block level elements) have four corners, you will frequently need to assign four different padding properties to one element. If you are a beginner, this is the code you would likely use: However, there is a much more efficient (not to […]
CSS Lesson 5: Understanding The Box Model Part 2: Margin
As you begin designing layouts with CSS you will inevitably need to create spacing between elements; thus, today’s lesson is regarding the “margin” property. Let’s begin with a quick image to illustrate the margin property in action: Margin is space added to the outside of an element (past the element’s edge, or border). In some […]
CSS Lesson 4: Understanding The Box Model Part 1: Padding
In our previous lesson we learned the basic syntax of CSS code. We are now able to apply basic styles like defining a color or center aligning text. But before we can learn advanced CSS techniques we must study what is known as “The CSS Box Model.” Elements Are Rectangles First, you will need to […]
CSS Lesson 3: Basic CSS Selectors
CSS Selectors allow us to target specific HTML elements with our style sheets. While there are many different types of CSS Selectors, today’s lesson focuses on the four essential selectors; Type, ID, Class and Descendant selectors. First We Need a Page To Style CSS isn’t very useful without a page to style. Create a blank […]
CSS Lesson 2: How To Create Your First CSS File
Today we are going to write and save our first CSS file. Let’s begin by opening a text editing program. If you are on a Microsoft Windows PC open the program named Notepad (hold down the Windows Key on your keyboard and press R, then type notepad and press enter). If you are using a […]
CSS Lesson 1: What is CSS?
So you want to learn CSS? Great decision; CSS is the language for web and graphic designers to learn. Short for Cascading Style Sheet, CSS is the language used to add style to HTML elements. If you are unfamiliar with HTML you will have little use for CSS, so I recommend you begin reading my […]
HTML Lesson 5: How to Write HTML Code So Your Pages Can Easily Be Styled Via CSS Later
If you have followed my first four HTML lessons you are now familiar with the basic syntax of HTML. While there are HTML elements that you haven’t learned yet, it is safe to say that you know the basics and are ready to try something new and exciting. Where’s All The Style? You may have […]
HTML Lesson 4: How to Insert an Image in HTML
As you recall from Lesson 1 (What is HTML?), adding a paragraph in HTML is as simple as wrapping text in <p> and </p> tags. Adding an image, however, is a little more complicated. Follow Along Before we continue, I encourage you to follow along by copying and pasting today’s code into your own HTML […]
HTML Lesson 3: Attributes and Values: How to Create a Hyperlink
In our previous lesson, you encountered equal signs and quotation marks inside a HTML element for the first time. In today’s lesson, you will learn how to use equal signs and quotation marks to create attributes and values. Be Sure To Follow Along Before we continue, I encourage you to follow along by copying and […]