If you haven’t already, you soon will start using CSS3 and HTML5 in your web development. Below is a list I’ve compiled of the most popular postings, tips or tutorials on using CSS3.

CSS3info

“Everything you need to know about CSS3”
Link

 

(more…)

Single Image Background

How is the best way to apply a single image as a background using CSS?

You can apply a single image background to any tag that is capable, such as divs, tables, etc using CSS. This example will show how to apply a single image background to the entire page. The best way apply the background is to use the body tag, making the body or background the first “layer” in your design.

(more…)

1. Avoid not resetting the browsers default setting.

When creating a new website or web page, the first thing you should do is reset everything to zero. Browsers have their own default settings, mainly for padding and margins. Resetting all the tags to zero will ensure you start from scratch. Once you have used a reset CSS file, you can now start on styling your page.
<link rel="stylesheet" href="style/reset-min.css" type="text/css" media="screen" />

See our blog posting on this…

2. Avoid not accounting for other web browsers.

If you have applied a reset CSS file to your page, you’re half way there. Apart from resetting the browser’s default settings, you also have to keep in mind that not all style properties work the same for all browsers. A perfect example is the difference of overflow between IE6 and Firefox. Here is a screen shot of the difference between the two:

Internet Explorer 6Firefox

See here for yourself

3. Avoid using Inline Styles.

Using inline styles can create a few issues.
One, it makes your code longer and heavy. The longer the code, the harder it is to troubleshoot and the larger the file size of the page.
Two, changing styles on one single style sheet is easier than looking for them all over the site.
Three, it can save time if you are going to be using that same style throughout the page and website. You can apply a class an endless amount of times throughout a website, with only needing to type out the properties one time.
The best way and cleanest way to apply CSS is through the use of external style sheets.

4. Avoid not formatting your CSS file.

Formatting your properties will make it a lot easier when you come back to edit them in the future. You don’t want multiple styles being strung together in one line. There are two main techniques of formatting your styles.
One line:
div {padding:5px; font-size:12pt}
Block:
div {
padding:5px;
font-size:12pt;
}

5. Avoid being redundant.

A lot times you’ll find that your styles are redundant. Sometimes you can easily simplify and combine styles. For example, instead  of using:
table {padding:3px; margin-top:10px; font-weight: bold}
div {padding:3px;margin-top:10px; font-weight: bold}
You can simplify these two and use the following:
table, div {padding:3px; margin-top:10px; font-weight: bold}

6. Avoid not using a shorthand format.

This is also another method of simplifying and avoiding redundancy. Instead of spelling out each property over and over, you can put their values on one line.
Here is an example without the use of shorthand:
.style1 {
border-right-width: 2px;
border-right-style: solid;
border-right-color: #FFF;
}

Here is an example with the use of shorthand:
.style1{
border-right: 2px solid #FFF;
}


7. Avoid using style titles that are too specific to what it does.

For example, let’s say you want to make a title of a paragraph look like this:

About Our Company

You create a class named “.large-red-font” in order to create this appearance. The title itself is pretty self explanatory on what the class does, which is fine, but…

What happens if later on you change your mind or restyle your site? What happens if you don’t want that paragraph title being red and that large? The title “.large-red-font” can be confusing if you want the paragraph title to appear like the following:

About Our Company

Instead you should use less specific names, so if a change happens in the future, it’s not as confusing.

I’m sure you’ve all been there. You create a web page and it looks great in Firefox, then you preview it in Internet Explorer and…doh! You scratch your head and wonder, where did I go wrong?

Every browser has their set of built-in default styles for just about every tag. Most are the same but some aren’t, especially between the two main browsers (FF & IE).

Some of the most common differences are the margins and padding in the tags. Below is an example of the differences in spacing between Firefox 3 and Internet Explorer 7.

As you can see above, there are differences in spacing in both browsers.

You can also view this example yourself, if you have multiple browsers installed, here: http://www.redicedesigns.com/blog/wp-content/links/reset_example.html

The way to make sure all your spacing’s are the same across all browsers is to reset all the tag properties. This will set all properties for all tags to minimum, or zero. From there you can style the page exactly how you intend to.

You can find the most commonly used reset CSS file from yahoo, here:
http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css

There are a few keys things to remember when using a reset CSS file.

1. Always make sure when using a reset CSS file to list it FIRST, in the <head> section, in your list of styles. From then on you can add your own styles to supersede the reset styles.
2. The reset file will reset everything.
   This means your lists will be without spacing and properties, so initially the list items will appear as regular text lines. The <em> tag will not show text in italics and the <strong> tag will not show text in bold.
3. Always keep your reset CSS file separate from other styles.
   Keep it separate from the styles you will use to style your pages. The last thing you want to do is to mix up your styles. This also helps because you can always come back to the reset file to modify it a lot easier.

Introduction

Divisions or “div” are a ‘block level element’, meaning they have the “block” attribute already inherited. Divs are used to display content in a block format much like tables but also used to define sections of a web page.

General Layout

Divs are the best way to layout information on a web page because of the properties that can be applied using the simplest and cleanliest code. It is always better to use divs over tables whenever possible.

The best way to organize a web page using divs is to create specific sections for each part of the page. For example: a header, navigation, content and footer. For each of the different sections, an ID can be used to identify and style each div. It is always better to have each section or div inside one main div, normally this div is called the “container”, this “container” div will allow for more options, which will be described later.

Below is how to organize the container and its inner sections or divs.

<div id="container">
<div id="header">Header Content</div>
<div id="navigation">Navigation Content</div>
<div id="content">Main Content</div>
<div id="footer">Footer Content</div>
</div>

Below is a picture of a box model of the four sections inside the container, which also shows the style that applied to each section.

The example shows the navigation being used on the left hand side. You can set the “navigation” and “content” divs side-by-side using the “float” property. The “navigation” div will have the “float” property along with a specified width. The “content” div will have the “margin-left” property for the same value as the navigation width. Using the same value will allow the content to only flow to the right of the navigation.

Below is an example of the style applied to each section:

#header {
height:120px;
text-align:center;
}
#navigation{
width:150px;
float:left;
}
#content {
margin-left:150px;
}
#footer {
text-align:center;
}

Using a Container

By using a “container” div, you can set the width of the overall content. By not setting a “width” property, the content will fill the browser window-no matter what size. To set a maximum width for the overall content, you would do so by adding a “width” property to the container. The default alignment for the container is left, but you can also center the “container” div. You can see how to center the div below.

Centering

Unlike tables, divs do not have the “align” property, so you cannot center a div in the same way. The way to center a div element is to use the margin property. Below is how to absolutely center a div:

#container {
width:820px;
margin-left:auto;
margin-right:auto;
}

The value to use for the margin properties is “auto”. This will automatically calculate the distance from each side, left and right, and position the div in the center.

Links

You can also create a link from a div itself. Most of the time you will see this in the header, a link created from the header that points to the home page. This can be done with a bit of javascript. The easiest way to create a link from a div is below:

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

The only property that is applied, via css, is the “cursor” property, this is so the visitor knows the div is a link.