3 Types of CSS Styles

Three Ways to Use CSS

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:

internal style

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.

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.

How to Create an External Style Sheet

Step 4 of the Expression Web 4 Getting Started Checklist shows you how to set up an External Style Sheet within Expression Web.

Or, if using notepad, simply create a text file, then save it as a .css file simply by changing the extension.

The External Style Sheet is basically a Text File that is Saved As a .css file. It is simply a separate page from our html pages.

We must Link the External Style Sheet to the Web Page(s) in order for the External Styles to be applied as specified.

Take a quick look at an External Style Sheet.

Want to Learn more about using CSS? Maybe even master the topic? Take a look at my Tutorials on DVDs for Beginners and my Online Class for Beginners. Both products will teach you more than you ever expected to learn. Better than any other training or tutorials available anywhere. And you won't find my products sold any where else.... I sell all my products from this web site.

View all products for Beginners.