Learn Web Code

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:

#header {
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 6px;
    padding-left: 15px;
}

However, there is a much more efficient (not to mention easier!) way of applying four padding or margin values. Here is your first glimpse of CSS Shorthand in action; the following code achieves the same exact results as the padding example I just provided:

You simply list four values, one directly after the other, and the web browser interprets this as the four (clockwise- top, right, bottom, left) directional values.

Similarly, you can also list two values in a row and the browser will interpret the first to be both top and bottom, and the second value to be both left and right.

Using this new knowledge, let’s imagine we need to add 10 pixels of right margin and 15 pixels of bottom margin to an element. Here’s the code we would use:

#header {
    margin: 0 10px 15px 0;
}

We used the four-value shorthand syntax, and simply included zeroes for the directions (top and left) we didn’t want to apply margin to.

That’s it for today’s lesson. Hopefully your CSS code will be a little cleaner with these simple shorthand methods.

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 instances, Padding and Margin can be used to achieve a similar affect, but it’s important to understand the difference.  Padding adds space to the inside of an element, while margin adds space to the outside of an element.

Let’s code a simple example of margin in action.  Begin with the following HTML code, and place it in a blank XHTML starter file.

<div id="box-a">
<p>Box A</p>
</div>

<div id="box-b">
<p>Box B</p>
</div>

Next, let’s give these two boxes a width, background-color, a border and padding.  Add the following code to your CSS file:

#box-a {
    width: 300px;
    padding: 15px;
    background-color: orange;
    border: 1px solid black;
}

#box-b {
    width: 300px;
    padding: 15px;
    background-color: gray;
    border: 1px solid black;
}

When viewed in a web browser, our example should look like this:

Now imagine we want to create 10 pixels of spacing between the two boxes.  We would achieve this by adding bottom-margin to box-a:

#box-a {
    margin-bottom: 10px;
    width: 300px;
    padding: 15px;
    background-color: orange;
    border: 1px solid black;
}

When refreshed in our web browser, our page should now look like this:

You may wonder, “Could we have also added margin-top to box-b?”  Let’s do that now; let’s double the space between the boxes by adding another 10 pixels of margin to box-b:

#box-b {
    margin-top: 10px;
    width: 300px;
    padding: 15px;
    background-color: orange;
    border: 1px solid black;
}

When you refresh the page in your web browser, you’ll notice that the spacing didn’t double; it stayed exactly the same. This is because two margins are touching, so one collapsed. Essentially, when two margins touch the larger margin is used, and the smaller disappears (or collapses).

To fully illustrate this point, let’s change the margin-top of box-b from 10 pixels to 11. When we refresh the page in our web browser we’ll notice that the spacing hasn’t ballooned to 21 pixels, but instead has increased by only one pixel.

The browser uses the 11 pixel margin of box-b and collapses the smaller 10 pixel margin of box-a.

That’s all for today’s lesson.  To recap, you now know:

• The difference between margin and padding
• How to use margins to create spacing around elements
• How the smaller of two touching margins collapses

Continue to Next Lesson

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 begin thinking of every XHTML element as a rectangle (or box).  We style our boxes by assigning properties such as widths, margins, borders and padding.  Our goal for today is to understand the CSS property “padding” and how it affects our elements.  I have created a graphic to help visualize the padding property:

As the graphic hopefully conveys, padding is used to create space between the edge of our HTML element, and the content (usually text) that the element houses.

Padding Affects The Width of Elements

One of the trickiest aspects of CSS is keeping track of the “true” width of your elements.  For example, how do things like padding, borders and margins affect the width of an element?  Let’s begin coding to discover our answer.  I encourage you to follow along in your own text editor.

Our First <div> Is Our Base

First, let’s create a <div> element with an ID of “base” and include some text inside of it.  Here’s the XHTML code we’ll insert into a new web page.

<div id="base">
    This is 300 pixels wide.
</div>

Now, let’s make our “base” 300 pixels wide and give it a background color so we can easily see its width in our web browser.  Here is the CSS code we’ll insert into our CSS file:

#base {
    width: 300px;
    background-color: yellow;
}

Now if we view our webpage in a web browser we’ll see a yellow box which measures 300 pixels wide.

The “Experiment” <div>

Let’s create a second <div> with an ID of “experiment” and place it directly below our base.  We’ll use this new <div> to test properties like padding, margin, and border.   Here is the XHTML code you’ll add:

<div id="experiment">
    This is the experiment.
</div>

Next, we’ll give our experiment <div> a width of 300 pixels, a background color of orange, and 10 pixels of padding:

#experiment {
    width: 300px;
    background-color: orange;
    padding:  10px;
}

Unequal Widths

When we refresh our page in a web browser we see that our new orange <div> is wider than our first <div>.  We assigned it the same width of 300 pixels but our 10 pixels of padding tipped the scales.  Notice how our text in the orange box is 10 pixels inside the left edge of the <div> element?  There is also 10 pixels of padding on the right side of our box, so overall our new box is 20 pixels wider than our gray base.

Making the Widths Equal

Let’s pretend we want our orange <div> to match our gray <div> in width.  This requires us to lower the width value of the orange <div> by 20 pixels to compensate for the padding we added.   Let’s edit our CSS width declaration for our experiment <div>:

#experiment {
    width: 280px;
    background-color: orange;
    padding:  10px;
}

When we refresh our page in a web browser we see that the two <div> elements are now equal in width.  We now have a basic understanding of how the “padding” property works.  It gives the content inside an element, in this case our text, room to breathe from the edge of the element.  Padding also changes the width of an element and we learned how to use some basic arithmetic to keep our elements even.

In our next lesson we will continue to examine the CSS Box Model by learning about the “margin” property.

Continue to Next Lesson

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 text document, and copy and paste the following XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS Selectors</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body>

<h1>CSS Selectors</h1>

<div id="intro">
<p>This is the <em>first</em> paragraph.</p>
<p class="important">This is an <em>important</em> paragraph inside the Intro Div.</p>
</div>

<p>This is a regular paragraph.</p>
<p class="important">This is an <em>important</em> paragraph that is not in the Intro Div.</p>

</body>
</html>

Create a new folder named “CSS-Selectors” on your desktop or any other location you prefer.  Then, save our document in this folder with a file name of index.htm.

The Page Without CSS

Open index.htm in a web browser, and you should see something very similar to this:

Let the CSS Begin

Now, create a new blank text document and save it in our “CSS-Selectors” folder with the file name of style.css.  We are now ready to start styling our page with the four essential Selector types.

1 – Type Selector

Type Selectors are very simple. They correspond with any HTML element type. For example, add the following code to your blank CSS file; these are three simple Type Selectors:

body {
font-family: Arial, sans-serif;
font-size: small;
}

h1 {
color: green;
}

em {
color: red;
}

This code selects and styles our <body> element, as well as all <h1> and <em> elements on our page.

2 – ID Selectors

If you take a look at the code of our XHTML page, you’ll notice we have a <div> element with an ID of intro.   We assign elements IDs when they are unique on a page; there is only one “intro” section on our page.  This is important, because two elements cannot have the same ID.

When an element has an “ID” we can access it with a CSS selector by placing a pound sign (#) in front of it’s ID value.  Add the following code to your CSS file, directly below our <h1> rule:

#intro {
font-size: 130%;
border: 1px solid black;
}

3 – Class Selectors

Class Selectors are very similar to ID Selectors. The major difference is that while a certain ID should only be assigned to one element, we can assign the same class to as many elements as we want.

If you look at the code of our XHTML page, you’ll notice that two of our paragraph tags have a class of “important.”  When an element has a class we can access it with a CSS selector by placing a period in front of it’s class name. Let’s add the following rule to our CSS file to make these paragraphs stand out:

.important {
background-color: yellow;
}

4 – Descendant Selectors

Imagine we wanted the important paragraph in the “intro” Div to look different than the important paragraph at the bottom of the page.  We can use a Descendant Selector to achieve this.

Add the following CSS rule at the bottom of our CSS file:

#intro .important {
background-color: orange;
}

Let’s dissect how the selector is working.  It begins with “#intro” which selects our Intro Div.  This is followed by a space, and then “.important.”  So essentially our selector is telling the web browser to (1) find the element with the ID of intro, (2) go inside that element and find any elements with the class of important.

Notice that within the orange paragraph, the word “important” is red.  Let’s imagine we want to change the color, since red text on an orange background is difficult to read.  The word “important” is inside an <em> element, so we’ll use the following code to select and style it;

#intro .important em {
color: white;
}

This code is telling the browser to (1) find the element with an ID of intro, (2) go inside that element and find any elements with a class of important, (3) go inside that element and select any <em> elements.

That’s it for today’s lesson.  Let’s recap:

• Type Selectors correspond with HTML elements
• ID Selectors are used by adding # in front of an elements ID
• Class Selectors are used by adding a period in front of an elements class
• Descendant Selectors are similar to family trees; you start with the parent element you wish to select, add a space, and continue  naming any interior elements until you’re arrived at the specific element you wish to select

In our next lesson we will begin studying the essence of all CSS Design; The CSS Box Model.

Continue to Next Lesson

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 Macintosh computer, launch the application named “TextEdit” (which can be found in your Apps folder).

Let’s Write Our First Bit of CSS

Let’s imagine we have a simple web page with a heading, and we want the heading to be orange and center aligned.  Add the following code into your new blank text document:

h1 {
color: orange;
text-align: center;
}

Hopefully, you remember this code from our previous lesson.  The task for today is to save our CSS file and link it to an XHTML page.

Step 1: Saving The CSS File

Create a new folder on your desktop (or another location you prefer) and name it CSS-Test. Now, back in your text editing program save your document as “style.css”.

Linking CSS File to an XHTML Page

Our new CSS file is worthless if we don’t apply it to a web page. Let’s create a quick XHTML page for this lesson. Create a new blank file in Notepad (or TextEdit) and add the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS-Test</title>
</head>
<body>

<h1>CSS-Test</h1>

<div id="box-one">
<p>This is box one.</p>
</div>

<div id="box-two">
<p>This is box two.</p>
</div>

</body>
</html>

If you’ve read my first few XHTML Lessons, then this code is at least somewhat familiar.  I’ll explain it as the lesson continues; for now save this document in our “CSS-Test” folder and name it “index.htm”.

Linking the Two Files Together

We still need to tell the web browser to load our “style.css” file when the “index.htm” page is viewed.  Add the following code to “index.htm” directly above our </head> closing tag:

<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />

This line of code tells our browser that we want to link a Style Sheet, that it’s located in the same folder as our XHTML page, and that it’s named “style.css”.

Now, when you view “index.htm” page in a web browser you should see a centered, orange heading:

Let’s Style Those Two Boxes

If you look at the code of our XHTML page, you’ll see two <div> elements.  We added an HTML attribute of “id” for these two elements and assigned them values of “box-one” and “box-two.”  We can use an element’s “id” to select and style it with CSS.  For example, let’s make the first box gray, and the second box yellow.  Add the following code to your CSS file, directly below our original <h1> rule:

#box-one {
background-color: gray;
}

#box-two {
background-color: yellow;
padding: 10px;
}

When an element has an “id” we can access it with a CSS selector by placing a pound sign (#) in front of it’s id value. So to select the first <div> element we simply type “#box-one” and then begin our CSS Rule.

Our New Fancy Boxes

When you save your CSS file and refresh our XHTML page in a web browser you should see something very similar to this:

Yay For Style

It may not be beautiful, but we styled our first XHTML page with CSS! Let’s recap your CSS knowledge so far.  You know:

• The basic syntax of CSS (covered in our previous lesson)
• How to link a CSS file to an XHTML page
• How to select certain HTML elements and style them

In our next lesson we’ll continue learning about CSS Selectors and the different ways to target specific elements with your CSS.

Continue to Next Lesson

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 (or XHTML) you will have little use for CSS, so I recommend you begin reading my XHTML Lessons.

A World Without Style

Imagine you have a web page written in XHTML with your main heading inside a <h1> element and a few paragraphs in <p> elements.  Without any CSS, most web browsers will render your page in a plain black text, with your <h1> in a large, bold font.  Your paragraphs will fill the entire width of the browser, resulting in impossible-to-read line lengths (the human eye prefers only around 12 words per line).  To put it bluntly; your pages will look horrible.

CSS To The Rescue

We need CSS to add our own custom styles; we need CSS to add color, size, columns, and layout; we need CSS to beautify our typography; we need CSS to add background textures and images.  If good HTML is the key to an organized, accessible web, then CSS is the key to a beautiful web.  CSS puts the design in Web Design.

How It Works

Cascading Style Sheets are simple text files saved in a “.css” extension which contain style Rules. For example, let’s imagine we had a <h1> heading element on a page, and we wanted to make it orange, and center aligned. Here is the code we would add to our .css file:

h1 {
    color: orange;
    text-align: center;
}

Let’s Dissect The Code

Relax, I don’t expect you to understand this code yet! Although you have zero training to understand the syntax of the code, if you speak English odds are you can make a little sense of it.  The following graphic explains the syntax of the code:

Our CSS Rule begins with “h1” which is our CSS selector.  The selector tells the web browser which XHTML element we wish to style.

Next, the word “color” is a property and “orange” is its value.  A property and value pair together and create a declaration.  We create complex style rules by stringing together multiple declarations, which are separated by semicolons.  This entire piece of code, including the selector and declarations, is known as a CSS Rule.

Finally, directly preceding, and directly following the declarations we enclose our Rule in curly brackets (found on your keyboard by holding shift and pressing the buttons directly to the right of your P key).

That’s it for today’s lesson.  You’ve learned a great deal of new material, so let’s recap.

• CSS styles the HTML elements of a web page
• Cascading Style Sheets are simple text files
• Style sheets are made up of Rules
• Rules are made up of selectors and declarations.
• Declarations are made up of properties  and values.

In our next lesson we will learn how to write and save our first CSS file, and more importantly, how to link it to an XHTML page.

Continue to Next Lesson