Call Customer Support
1.866.363.5633
CSS Tutorials: Three Types of CSS
Three Types of CSS
1. External
2. Internal or Embedded
3. Inline
When we create CSS Styles with Expression Web 3, 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. External Styles
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.
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.
2. Internal Styles (Embedded Styles)
An Internal or Embedded Style is placed in the <head> section of the current page, and is applied to an element on that current page only. These styles cannot be reused on other web pages.
<head>
<title></title>
<style type="text/css">
p {
font-family: Arial, Verdana;
}
</style>
</head>
Of course, we will use the Style Builder to create Internal Styles. All we need to do is Define the Style in the Current Page.
3. 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. So 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>
Just a few more Thoughts
When building very large web sites, several External Style Sheets will be used. Combine these with a few Internal Styles and possibly an occasional Inline style, all of the Styles will CASCADE. In other words, several styles will be applied to one HTML element.
Sometimes, the various styles may conflict with one another. If that is the case, there is a mechanism in place that will resolve the conflict and determine which conflicting style will win, thus be applied.
For those of you who purchase the Starter Set of 3 DVDs, you will experience the Cascade of Styles on DVD 2, working with Premade Templates. These templates use several style sheets and page elements have more than one style applied to them. Thus, the styles Cascade. But you truly need some experience with CSS before you can really appreciate the Cascade of Styles. Thats why DVD 1 does not discuss the Cascade!!
Learn more about the Cascade and the Rules of the Cascade that are used to resolve conflicting styles.
