Monday, October 11, 2010

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 <h1> tag), you only apply the style to the instance you want the style to apply to.

For example:
<h1 style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#0000FF">This is Heading.</h1>


Embedded CSS
You embeded css information into an HTML Document by using "style" element. you do this by css embeddinng the information between <style type="text/css">....</style> tags in the head section of the document.

For example:
<style type="text/css">
h1{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#0000FF;
}
</style>
now, whenever any of those elements are used within the body of the doucment, they will be formatted as mention in above css.

External CSS
An external stylesheet is a separate file, where you can declare all the styles you want to use through their website. You then link to the external style sheet from all your HTML pages.This means that you must set the styles for each element once. To update the style of your site, just to do in one place.

For example:

create new file naming style.css & insert following code in stylesheet(style.css).
h1{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#0000FF;
}

p{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;

}

add the following between <head><head> section of HTML document that you want to refernece the external style sheet.
<link rel="stylesheet" href="style.css" type="text/css">

Import 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 "style.css";
@import url("style.css");

No comments:

Post a Comment