SIDEBAR
»
S
I
D
E
B
A
R
«
Embeding CSS in your Webpage
by sheri

Embeding CSS in your Webpage

After knowing the basics of CSS, and knowing what effects it adds to your document. Now it’s time to understand the ways you can add CSS to your document. Basically, CSS can be categorized in three categories based on how we can attach style sheets in the document namely, Inline CSS, Internal CSS and External CSS. When a browser downloads requested HTML document it automatically read out the CSS rules defined in that document. Each and every type has its own significance of use in the document. Which type and where to use is the secret question. We will explain all this step by step.

Inline CSS

Inline CSS is the styling sheet that is embedded into the document by using “style” attribute with any HTML tag as it is a global attribute. Normally, we use it with heading tags (<h1>-<h6>), paragraph (<p>), div tag (<div>), and many more to add style to that section of the document.

Example

<h2 style=”color : blue;”> The printed text is in blue color </h2>

<p style=”color : red;”> This printed text will be displayed in a paragraph with red color. </p>

However, we should avoid using Inline style of adding CSS to our document as it is very complex way for the designing websites. It is efficient only for only small documents. Normally we avoid using Inline style as it becomes very difficult to manage, if we need to make any updates in the document in the future. The alternative to this are the other two styles to embed CSS in the document.

Internal CSS

Internal CSS is embedded in the HTML document by using <style> tag under the <head> tag. It is a much better option to use than the Inline CSS. This provides a difference between the structure and the presentation coding of the document properly.

Example

<html>

<head>

<title>Example displaying Internal CSS</title>

<style type=”text/CSS”>

h2 {color : red;}

p {color : blue;}

</style>

</head>

<body>

<h2>Example of Internal CSS</h2>

<p>This text displays under the paragraph tag and will be displayed in blue color as it is defined in <head> section under <style> element. </p>

</body>

</html>

 

In the above example, Internal CSS is embedded into the document in thesection with the help of style tag. This is a better option to embed CSS in the document as this differentiate displaying content and the styling coding part separately. This makes it easy for the designer to make any updates in the future. But still we use the most preferred way of embedding the CSS in the document that is, the third and the last one (embedding External CSS in our document).

External CSS

External CSS is embedded in the HTML document by the use of <link> tag with some of its attributes. This is the best option of embedding a style sheet into your document. External CSS is a separate file that is saved by the .css extension. In this file all the styling part of each tag, class and id are defined in this file. This makes it easier for the developer to have a good understanding of the coding. Making the content that is the HTML document separate and the CSS on a separate externally sheet makes it really comfortable to apply the styling part to the same sections of the document.

Example

<html>

<head>

<title>Example Showing External CSS</title>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<h2>Example of External CSS</h2>

<p>This text displays under the paragraph tag and will be displayed in blue color as it is defined in an external file named “styles.css”</p>.

</body>

</html>

In the above example the external style sheet is embedded into the HTML document with the help of <link> tag using the href attribute. The file is saved with the extension .css and is embedded in the document. This helps in separating both the displaying content and the styles applied on it in two different files.


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
*
SIDEBAR
»
S
I
D
E
B
A
R
«
© Copyright cssblaze.com