Cascading Style Sheets

NOTE: YOU MAY NOT COPY THIS CONTENT AND USE IT AS YOUR OWN. PLEASE RESPECT THE HARD WORK I'VE PUT INTO THIS WEB SITE BY NOT STEALING THE CONTENT AND MISREPRESENTING IT AS YOUR OWN.

My articles and tutorials are not available for sharing. You may link to the article pages, but you may not copy the content. I know most people do not realize they are violating copyrights in most situations. You must first get my written permission (via email) to use any content. You must give me full credit and provide a link to the page in which you used the content.

For written permission, email me at kellys.tutorials @ gmail . com or kelly @ expression-web-tutorial . com and tell me why and how you want to use my content and I will respond with yay or nay and any further instructions.

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 3 types of Styles we can create.

The 3 Types of CSS Style Declarations are as follows:

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 Style Declarations, 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, we've separated content from presentation, 
					kept our HTML markup to a minimum, and met the Web 
					Standards.

1. Internal Styles are defined in the <head> section of the "current" web page.

2. Inline Styles are defined within the HTML markup of a particular page element. (avoid using!)

3. External Styles are defined on the External Style Sheet, which is linked to the web page(s). (BEST choice)

1. Internal / Embedded Styles

Internal Styles are placed inside the <head> section of a particular web page via the style tag. <style type="text/css"></style>
These Styles can be 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 in Expression Web, Define the style in the Current Page. This will create an Internal Style.
Advanced Use of Internal Styles unless you need to override an External Style.

Internal Styles are also called "Embedded" Styles. We use the <style> tag to embed Internal Styles in the <head> section of a given web page.

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.

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 (file) 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.

We must Link the External Style Sheet to the Web Page(s) in order for the External Styles to be applied as specified. We place the following link in the <head> section of the page, right below the title tag......

<head>
<title>The Title</title>

<link href="main.css" rel="stylesheet" type="text/css" >

</head>

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.

Where to Next?

Be sure to review the Anatomy of a Style Declaration.
Then read about CSS Selectors
Watch the video: "Types of CSS Style Declarations"

A Place For Beginners