1. Be Creative and Original

When designing a website, you want it to stand out not look like everything else. Look up the competition and see how your site can differ, in a positive way. Being creative however doesn’t mean re-inventing the wheel.

2. Use style sheets

Style sheets ensure that the pages will look the same. Apart from keeping the same look across the site, it is easier to avoid syntax mistakes. Using external style sheets is better than using inline styles or embedded styles. External style sheets will save time because you only have to create a style one time. (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.

This section will only be helpful if you know the basic understanding of HTML.

What is CSS?

CSS (Cascading Style Sheets) is the standard way of presenting and formatting a web page. The middle word, Style, basically describes its purpose. Think of CSS as a theme, kind of like a theme applied to your computer, phone, a blog or even your email. CSS will provide the look and feel of that theme, and that theme being applied to your web page. CSS is mostly applied to HTML and XHTML written pages, it can also be used to style XML formatted pages.

Types of CSS Application

CSS can be applied to a page in several ways. There are three main applications or types of CSS implementation, each type works the same way. The difference is how it’s applied to the pages. The style can be embedded into the HMTL code itself or it can be written in a separate document and attached to the HTML page. Each type has a different priority, meaning one style can override another style. Below are the three main types of CSS application, they are listed in priority.

Inline Style: used inside the HTML code, applied to a specific tag or element, it’s applied using the “style” attribute
Embedded Style: used inside the HTML code-normally in the header, usually a block of CSS styles to be applied to that page only
External Style: blocks of CSS written in a separate document (.css file), attached to the HTML page, it can be attached to multiple pages

There is also another form of style that we cannot see but is used. That is the ‘User’ type. Generally this style is implemented by the web browser with default settings. It has the lowest priority. Every browser will have their own set of default settings, the settings will vary by browser and browser version.

Syntax

No matter what type of application you use, Inline, Embedded or External, the syntax will be the same. CSS comes with many properties that cover just about anything needed to style a web page. The styling is made up of two main parts, the selector and the declaration.

In the declaration, it will have properties and values. A list of CSS properties can be found at the W3Schools.com website.

The property and value are separated by a colon “:” and each declaration, or set of properties, is separated by a semicolon “;”.

Application of CSS

A specific style can be applied several different ways. Below are the three main types of CSS application.

Element: You can apply a style to HTML elements like paragraphs, headers, divs, and tables. Here is an example of style applied to a paragraph element using an embedded, external and inline type of application.

p {color:red;font-size:12px;}
This will apply a red font color and font size of 12px to any <p> tags in the html document. (embedded or external style)

<p style="color:red;font-size:12px;">
This will apply a red font color and font size of 12px also, using the “style” attribute, but only to this particular paragraph. (inline style)

ID Selector: You can apply a style to a unique element using the ID attribute. The name of the ID can be whatever you like. You can set the style using the embedded or external type of application. You apply the style to the element using the “id” attribute. Here is an example of how to style using the ID Selector either embedded or from an external style sheet.

#mystyle {
color:blue;
text-align:center;}
The ID selector is defined by a “#”. Any ID that you create will need to have “#” to define it as an ID.

Here is how to apply it to a unique element.

<div class="mystyle">
This applies the style of “mystyle” to this particular div, it will make the text blue and align it to center.

Class Selector: You can apply a style to multiple elements, as many as you like, using the Class attribute. The name of the Class can be whatever you like. You can set the style using the embedded or external type of application. You apply the style to the element using the “class” attribute. Here is an example of how to style using the Class Selector either embedded or from an external style sheet.

.redstyle{
color:red;
font-size:13px;}
The Class Selector is defined by a “.”. Any Class that you create will need to have “.” to define it as a Class.

Here is how to apply it to multiple elements.

<p class="redstyle">My Text</p>
<h1 class="redstyle">My Text</h1>