CSS Layout Basics - Part 2

Monday, April 28th, 2008

Now you’ve gotten through Part 1 of CSS Layout Basics and you understand the basic principles behind CSS, we can get a little deeper.

Not all CSS requires stylesheets. Apart from a stylesheet, there are two ways to incorporate CSS: inline CSS and page CSS.

Inline CSS

Inline CSS is referred to when CSS is inserted to the HTML tag via a style attribute. This CSS will only affect that particular HTML tag. Example: We can change our Header 2 to a sixteen pixel font size with the following code:

<h2 style=”font-size:16px;”>My Sixteen Point Header</h2>

This will not affect any other Header 2’s on the page. Since CSS does not observe line breaks, we can insert multiple CSS attributes into the style attribute:

<h2 style=”font-size:16px;color:#ff0000;”>My Sixteen Point Header</h2>

This method is not 100% recommended because it is tedious to revisit multiple files and dig into the code to make simple changes.

Page CSS

In your page’s <head> tag, you can insert CSS that will affect that page only. This will look similar to a stylesheet, except for that there will be HTML tags above and below the CSS. Example:

Again, this is not 100% recommended because it is tedious to revisit multiple files and dig into the code to make simple changes.

Most Important Attributes

Before we get in knee deep in CSS, let’s go over the most important attributes.

Height - Determines the height of the CSS item (Example: 10%, 70px)
Width - Determines the width of the CSS item (Example: 10%, 70px)
Color - Determines the color of the CSS attribute (Example: red, #ff0000, #f00)
Font-Family, Font-Size, Line-Height, Letter-Spacing, Font-Weight - Changes the attributes of the text in the container. Examples:
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
line-height:18px;
letter-spacing:-1px;
font-weight:bold;
Padding - This is the buffer space on the inside of the CSS element. Formatted from the top of the div container, clockwise to the left of the div container. (Example: padding:5px 0 8px 16px;)
Margin - This is the buffer space on the outside of the CSS element. Again, formatted from the top of the div container, clockwise to the left of the div container. (Example: margin: 5px 10px 0 0;)
Background-Color, Background-Image, Background-Repeat, Background-Position. These are fairly straight-forward:
background-color:#ff0000;
background-image:url(images/background.jpg);
background-repeat:no-repeat; /*also repeat-x or repeat-y*/
background-position:top center; /*or pixel values*/

Those values alone can put together a pretty complicated website. Next week, I will discuss more difficult attributes and how to get started. Hope that helps.