CSS Configuration (ways to attach style sheet in web)

Here, I will show the method “how they configure filename.css file in web pages”

1. Internal Style sheet:

The Rule: Use this method if you want to override the CSS you have in a linked CSS file or if you only have a one-page web site.

First we will explore the internal method. This way you are simply placing the CSS code within the <head></head> tags of each (X)HTML file you want to style with the CSS. The format for this is shown in the example below.

<html>

<head>

<title>Internal Style sheet<title>

<style type=”text/css”>

CSS Content Goes Here

</style>

</head>

<body>

With this method each (X)HTML file contains the CSS code needed to style the page. Meaning that any changes you want to make to one page, will have to be made to all. This method can be good if you need to style only one page, or if you want different pages to have varying styles.

2. External Style sheet:

The rule: If you are going to have more than one web page with the same stylistic properties (that look the same in some way) you should create a separate CSS file and link your web pages to it.

Next we will explore the external method. An external CSS file can be created with any text or HTML editor such as “Notepad” or “Dreamweaver” or “IDE”. A CSS file contains no (X)HTML, only CSS. You simply save it with the .css file extension. You can link to the file externally by placing one of the following links in the head section of every (X)HTML file you want to style with the CSS file.

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

Or you can also use the @import method as shown below:

<style type=”text/css” media=”all”>@import “filename.css”; </style>

Note: This will be used inside the <head>….</head>

3. Embed the CSS right on the tags themselves (called inline CSS):

The Rule: Use this method on a unique element/tag that you want to affect with CSS.

An example can be with a special heading on the page where you want to have a little more padding than you typically do for a heading. Instead of creating a class elsewhere that will only be used on this one occasion, it makes sense to me to just include the CSS inline. I have to stress that inline CSS is something you should rarely if ever use because it can get messy quick.

<p style=”color: #ff0000;”>Some red text</p>

So, which one is better!!!!

So with all these various ways of inserting CSS into your (X)HTML files, you may now be asking well which is better, and if I use more than one method, in what order do these different ways load into my browser? All the various methods will cascade into a new “pseudo” stylesheet in the following order:

  • Inline Style (inside (X)HTML element)
  • Internal Style Sheet (inside the <head> tag)
  •  External Style Sheet

As far as which way is better, it depends on what you want to do. If you have only one file to style then placing it within the <head></head> tags (internal) will work fine. Though if you are planning on styling multiple files then the external file method is the way to go. Choosing between the <link related=> & the @import methods are completely up to you. I will mention that the @import method may take a second longer to read the CSS file in Internet Explorer than the <link related=> option.

Click here, to validate your CSS file(s) “filename.css”

Click here, for all Browser Compatibility Testing

Click here  for CSS Browser Support (Comparisons Chart)

Get more info about CSS, Click here

I think this information will helpful to you…  

 

4 Responses to CSS Configuration (ways to attach style sheet in web)

  1. sam says:

    As a web site owner I think the material here is really magnificent. I appreciate it for your time. You must maintain it and keep it up forever! Excellent work.

  2. prasana says:

    Just wish to say your article is as surprising. The clearness in your post is just great and i can assume you are an expert on this subject.

  3. Tisha says:

    Nice article. Its realy good. More info help me.

  4. kumar says:

    This article is very useful for me and very interesting to learn for beginners. Good post

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>