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:
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.)
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)
Internal Styles are placed inside the
head section of a particular web
page via the style tag.
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.
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.
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.
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.
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......
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.