www. Expression-Web-Tutorial .com

Call 1.866.363.5633

 

view cart


A Place For Beginners

3 Types of CSS Styles

Three Ways to Use CSS

See the Mobile Version of Types of 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:

 

*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.

However, there are situations where Internal and Inline Styles may be more appropriate than an External Style.  As you gain experience and continue to learn about CSS, you will develop the understanding of when to use which type of Style Declaration.  (So be sure to practice as much as you can and continue to study css as well.)

Where to 'define' (place) each type of Style Declaration:

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)

  

Mysitemyway WordPress Themes

 

 

1. Internal / Embedded Styles

Internal Styles are placed inside the head section of a particular web page via the style tag.

  • 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:

<p style="font-size: 14px; color: purple;"></p>

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.

 

dvd

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.

 

How do these different styles "CASCADE"?

First, what on earth do we mean by 'Cascade'?

When more than one Style targets the same HTML Element or Portion of an HTML Element, with the same properties declared, but with different values, the CASCADE in CSS is used to determine which style will win in the end and be applied.

In other words, when there are conflicting styles only one can be applied.  Technically speaking, the browser must decide which style to apply.  The Cascade is a mechanism used by the browser to make this decision.  When looking at the entire cascade of 'things', things get very invovled.  I suggest you read over the W3C Recommendations (Standards).   This link takes you to the CSS 2.1 Specs, "Cascading Order".

Here I am simplfing things and keeping the focus on Types of Styles and the Cascade.  So here we go...

How it works

Question 1:  If I created the following Styles, which one will be applied in the end?

1. an External Style:  p {color: orange;}

 2. an Internal Style:   p {color: puprle;}

 

Answer:  The Style to be applied is the Internal Style, number 2. Yes, we'd end up with purple paragraph text.

Why:   As a General Rule of Thumb, the closest Style to the HTML Element styled is the Style that will be applied.

Therefore, in Question 1, the Internal Style is closer to elements being styled as compared to the External Style.  The External Style is on a completely separate file that is linked to the html web page.  So it is further away.

 

What if I added a Third Option:

3. an inline Style      <p style=color: "black;>This is a paragraph.</p>

Now which Style would be applied?  The External Style is out.  So, will it be the Internal or Inline Style that gets applied?

Ask yourself, which Style is closest to the element. 

Right, the Inline Style will be applied. 

 

Let me elaborate on this example so you can see the beauty of the Cascade......

If just that one paragraph has an inline style making the paragraph text black,  then the remaining paragraphs on that page only will end up with purple text from the Internal Style.  We can also assume all other pages in the site will have orange text due to the External Style Sheet being attached to all pages (and are not overriden by any Internal or Inline Styles).

Where to Next?