Expression Web Tutorials: Building Web Sites with CSS & HTML ~ One Step at a Time

Getting Started Steps

CSS Tutorial for Beginners: 3 Types of CSS Styles

Recall, the Style Declaration is at the heart of CSS. Now we will take a look at the three different ways to use a Style, or 3 types of Styles we can create.

1. Internal (Embedded) Styles
2. Inline Styles
3. External Styles

Each type of Style can be characterized by it's location.

When we create CSS Styles with Expression Web, we will need to decide where to place our Styles. The type of Style we create is characterized by the location we choose to place CSS Styles. ** Ideally we will place most styles on an External Style Sheet. This way, all of our styles are re-usable.

1. Internal / Embedded Styles

Internal Styles are placed inside the <head> section of a particular web page. ( we use the style builder to accomplish this.)
These Styles can be re-used only for the web page in which they are embedded.
Therefore, you would need to create these styles over and over again for each web page you wish to style.
When using the style builder, Define the style in the Current Page. This will create an Internal Style. But, Internal Styles are not ideal.
An External Style Sheet would be a better choice.
Advanced Use of Internal Styles -taking advantage of the cascade may require the use of internal styles. however, the main styles are best if placed on an external style sheets.

The <style> tag is used to write an Internal Style. Here's an Example:

<head>
<title>Title Goes Here </title>

<style type="text/css">
#left-col p {
color: #222;
font-weight:bold;
}
</style>

</head>

2. Inline Styles

Inline Styles cannot be resused at all, period. Inline styles are placed directly inside an HTML element in the code. We cannot use the Style Builder to make an Inline Style. Instead, to purposely create an inline style requires you to go into the HTML code and type the style yourself.

Note: Inline Styles do not Have a Selector. Why not? The reason is because an inline style is embedded directly inside the html element it styles. Therefore, there's no need for a selector.

Quite frankly, Inline styles defeat the purpose of using CSS and negates most, if not all of CSS's advantages, like the separation of content from presentation.

Therefore, the use of Inline Styles should be kept to an absolute minimum. Use Inline Styles only as a last resort.

One example of when using an inline style is useful: Let's say you want to over-ride a style that's on your external style sheet. Using an inline style is one way to accomplish this.

Example of an Inline Style:

The style is embedded inside the HTML element using the style attribute. The above style cannot be reused at at all. It will only target that one paragraph.

In order to style more paragraphs with an inline style, you'd have to make one inline style per paragraph. That's not efficient at all. And makes a mess of your code and certainly adds to the amount of mark-up in your page.

3. External Style Sheet

For the most part, we will want to place the majority of our Style Rules on an External Style Sheet. This will allow us to reuse the styles as many times as we would like simply by linking the External Style Sheet to other web pages.

It also means we only have to create the Styles one time!

An External Style Sheet is a separate page which is then linked to the web page. Therefore, the styles are External to, or outside of, the Web Page.

1.866.363.5633