External Style Sheets and Embedded CSS Style Sheets

External Style Sheets and Embedded CSS Style Sheets
There are a few things that make external style sheets different from embedded style sheets.

Embedded Style Sheets
In the previous tutorials you saw examples of embedded CSS style sheets and you learned that the basic CSS code for an embedded style sheet begins and ends with the <style> tags. Inside these tags are the CSS code which is made up of each selector(s) and its respective property-value pairs. Finally the embedded style is placed in the head section of your webpage.

Example
<style type="text/css">
<!--
p {font-size: 12pt; color: #000000; text-align: center}
-->
</style>

External Style Sheets
External style sheets are a little different because they do not have the beginning and ending <style> tags. In fact, you cannot have any HTML tags except for comments and the @import statement. It is basically a text file that contains only the CSS code.

Example
body {background-color: #ffffff}

p {font-size: 12pt; color: #000000; text-align: center}

You can name your external style sheet anything you like but it is a good practice to give the file a name that reflects the purpose of the CSS code. For example the CSS code that controls the style for the menu links on your webpage might be called menu.css. Although it is optional, you should use the .css extension for your external style sheets.

After you create you external style sheets, you can use them on any webpage by placing either the <link> tag or the @import statement in the head section.






This site needs an editor - click to learn more!



RSS
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map





Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.