how-to-apply-css-to-web-documents-

CSS applies styles to individual HTML elements. We can apply CSS to HTML elements in following four ways

•    Inline Style
•    Embedded Style
•    External Style
•    Importing Style
Inline Style

Inline style makes use of style attribute which can be applied to any HTML element.

Example:

<HTML>
<Head>
<Title>Inline Style</title>
</Head>
<Body>
<P style=”color:F00″> This Paragraph implements in line Style </p>
</Body>
</Html>
In above example paragraph tag <P> has been applied CSS to turn its color to red.

Embedded Style

In embedded style method all style are grouped together in head of document.

Example:

<HTML>
<Head>
<Title>Embedded Style</title>
<Style type=”text/css”> p {color:F00}</style>
</Head>
<Body>
<P> This Paragraph implements in Embedded Method </p>
</Body>
</Html>

In above example paragraph tag <P> has been applied CSS in <head > section of the page to turn its color to red.

In above examples CSS has been written as a part of the web document. This is good if you need only few styles but for large documents it is not recommended. For complex documents CSS should be kept separate from actual document. Following methods explains this.

External Style

In this method CSS is kept in separate file and referenced by the web document.

Example:

File1:

P{ color:F00;}
Copy and paste above in file and save it as “/files/includes/external.css”;
Now in the same folder create a file named “external.html” with following text.

File:2

<HTML>
<Head>
<Title>Embedded Style</title>
<link rel=”stylesheet” type=”text/css” href=”//files/includes/external.css” />
</Head>
<Body>
<P> This Paragraph implements in Embedded Method </p>
</Body>
</Html>
In above example paragraph tag <P> has been applied CSS in external CSS file.

Importing Style

In this method external CSS files are imported in web document either by using Embedded method or by using External method.
In Embedded it done by adding following line after title tag.

<style type=”text/css”>@import url(/files/includes/external.css);</style>

In External method the CSS file itself imports external file.
@import url(/files/includes/external.css); is used to import an external CSS file.

In both ways we can add more CSS after importing CSS file.

.

Comments are closed.