Implementing CSS
There are 4 ways of implementing CSS: declare inline, embed into the head of your document, link to an external CSS file, import a CSS file.
Inline CSS
Style sheet information is applied to the current element. Instead of defining the style once, then applying the style against all instances of an element (say the <P> tag), you only apply the style to the instance you want the style to apply to.
For example:
<P style="color:#ff9900">
CSS tutorial.
</p>Embedded CSS
You embed CSS information into an HTML document using the 'style' element. You do this by embedding the CSS information within <style>...</style> tags in the head of your document.
For example, place the following code between the <head>...</head> tags of your HTML document:
<style type="text/css" media=screen>
p {color:#ff9900;}
</style>Now, whenever any of those elements are used within the body of the document, they will be formatted as instructed in the above style sheet.
External CSS
An external style sheet is a separate file where you can declare all the styles that you want to use throughout your website. You then link to the external style sheet from all your HTML pages. This means you only need to set the styles for each element once. If you want to update the style of your website, you only need to do it in one place.
For example:
- Type the following into a plain text file, and save with a .css extension (i.e. external_style_sheet.css).
p {font-family: georgia, serif; font-size: x-small;} h1 {color: #000099; } - Add the following between the <head>...</head> tags of all HTML documents that you want to reference the external style sheet.
<link rel="stylesheet" href="external_style_sheet.css" type="text/css">
Imported CSS
You can use the @import rule to import rules from other style sheets.
Add either of the following between the <head>...</head> tags of all HTML documents that you want to import a style sheet into.
@import "imported_style_sheet.css";
@import url("imported_style_sheet.css");
Comments
Post a Comment
leave your comment to help us to develope the website.