Hi friends in this article I’m explaining about use of css in a html document.

Description:

We are very aware of what CSS is and it’s uses hve been described in previous

articles. Now let’s try to understand how to use CSS or Style Sheets in a HTML

document. CSS presents a good presentation in a document and web page or app.

We can use a Style Sheet using one of the following three methods:

• We can use an external Style Sheet, either by importing it or by linking to it.

     (External Style Sheet)

• Directly embed a document-wide style in the head element of the document.

(Document-Wide Style)

• Set an inline style rule using the style attribute directly on an element. (Inline

Style)

Each of these Style Sheet approaches has its own pros and cons, as listed below:

Advantage:

1.  External StyleSheet

      a. Can set and update styles for many documents at once.

      b. Style information is cached by the browser so there’s no need to repeat.

2.  Document-Wide Style

      a. Can easily control style document by document.

      b. No additional network request to retrieve style information.

3.  Inline Style

      a. Can easily control style to a single character instance.

      b. Overrides any external or document styles in the absence of ! important directive.

Disadvantage:

1.  External StyleSheet

a. Requires extra download round-trip for the style sheet, which might delay page rendering    particularly when multiple files are in use.

b. In some case when @import is used, the browser may cause a rendering “flash” under slow loading conditions.

2.  Document-Wide Style

a. Need to reapply style information for other documents, bulking up the document and making it more difficult to apply updates.

3.  Inline Style

      a. Need to reapply style information throughout the document and outside documents.

      b. Bound too closely to markup, making it even more difficult to update than other   approaches.

Now let’s do some work using all three methods.

1.  External StyleSheet

An external Style Sheet is simply a plain text file containing CSS style rules. The common file extension .css indicates that the document provides Style Sheet information. As an example, the following CSS rules can be found in a file called sitestyle.css, that defines a Style Sheet used site-wide:

CSS Code:

@font-face {
    font-family: 'Led Bus';
    src: url("Font/Led Bus.eot"); /*EOT file for IE*/
}
 
@font-face {
    font-family: 'Led Bus';
    src: url("Font/Led Bus.ttf"); /*TTF file for CSS3 browsers*/
}
 
@font-face {
    font-family: ToxicPowers;
    src: url("Font/ToxicPowers.eot"); /*EOT file for IE*/
}
 
@font-face {
    font-family: ToxicPowers;
    src: url("Font/ToxicPowers.ttf"); /*TTF file for CSS3 browsers*/
}
 
@font-face {
    font-family: TurnUp;
    src: url("Font/TurnUp.eot"); /*EOT file for IE*/
}
 
@font-face {
    font-family: TurnUp;
    src: url("Font/TurnUp.ttf"); /*TTF file for CSS3 browsers*/
}
@font-face {
    font-family: Blazed;
    src: url("Font/Blazed.eot"); /*EOT file for IE*/
}
 
@font-face {
    font-family: Blazed;
    src: url("Font/Blazed.ttf"); /*TTF file for CSS3 browsers*/
}
 
.name {
    font-family:Blazed;
    font-size: 60px;
    color: #56c6d9;
}
 
h1 {
    font-family:'Led Bus';
    font-size: 50px;
    color: #56c6d9;
}
 
p {
    font-family: 'ToxicPowers', georgia, serif;
    font-size: 16px;
    color: #676262;
}
.emp-name {
    font-family: 'TurnUp';
    font-size: 20px;
    color: #191818;
}

 

HTML Code:

<linkhref="~/Content/font.css"rel="stylesheet"/>
 
 
<divstyle="width:80%;margin:0auto;border:2pxdashed#b0a9a9;">
    <divclass="name">Mindstick</div>
    <h1>MindStick Software pvt. ltd.</h1>
    
    <p>Research & Development</p>
    <hr/>
    <divclass="emp-name">Product Development</div>
    <divclass="emp-name">Software Development</div>
</div>

 

So now we are done with both files Let’s see the output:

CSS is, at least theoretically, not the only style technology we could use, though as it stands, by default, most browsers assume that CSS is being used. We set type to be specific but that may get a bit redundant. 

2.  Embedding Style Sheets

The second way to include a Style Sheet is to embed it. When you embed a Style Sheet, you generally write the style rules directly within the document with a <style> tag.
The basic syntax of the <style> tag is as follows:

HTML Code:

<style>
    h1 {
        color:#f00;
    }
    .name {
        color:#00ff21;
    }
    p {
        background-color:#b0a9a9;
        padding:15px;
    }
    .emp-name {
        color:#565252;
    }
</style>
 
 
<divstyle="width:80%;margin:0auto;border:2pxdashed#b0a9a9;">
    <divclass="name">Mindstick</div>
    <h1>MindStick Software pvt. ltd.</h1>
    
    <p>Research & Development</p>
    <hr/>
    <divclass="emp-name">Product Development</div>
    <divclass="emp-name">Software Development</div>
</div>

You can have multiple occurrences of the style element within the head of the document, and you can even import some styles with these elements.

The following is the output for the code above:

 

While this technique is a common practice and used for script masking as well, there are some subtle issues, particularly when including non-comment-friendly content like multiple dashes or trying to address XML strictness. (McGraw-Hill CSS). 

3. Inline Styles

Instead of using a Style Sheet for an entire page, you can add style information directly within a single element. Suppose you want to set one specific <h1> tag to render in extra-large, green, Arial font. You could quickly apply the style to only the tag in question using its style attribute, that is a core attribute common to nearly any HTML element.

As an example, the following markup shows an inline style applied to a heading:

<h1 style="font-size: xx-large; font-family: Arial; color: green;">

This sort of style information doesn’t need to be hidden from a browser that isn’t Style Sheet-aware, because browsers ignore any attributes that they don’t understand.

Although using inline styles seems to be an easy route to using CSS, it does have a number of drawbacks. The largest problem is that inline rules are bound very closely to a tag. If you want to affect more than one <h1> tag then you need to copy and paste the style attribute into every other heading of interest. The separation of markup from CSS presentation is not optimal with an inline style. However, for quick and dirty application of CSS rules, this might be appropriate, particularly for testing things out.

The second and lesser-known concern with inline CSS rules is that you simply cannot perform every task with them. For example, if you want to change the look of various link states, this is easily accomplished in a document-wide or linked Style Sheet with pseudo-class rules like:

a:link {color: blue; text-decoration: none;}
a:visited {color: red; text-decoration: none;}
a:hover {color: red; text-decoration: underline;}
a:active {color: red; text-decoration: none;}

However, if you attempt to put such rules in an <a> tag, how are other states indicated? The simple example here would appear to set the color to blue for any state:

<a href="http://www.w3.org" style="color: blue;">Inline Link Styles?</a>

Similarly, in order to change the first letter of a paragraph to large, red text, you might use a pseudo-element rule like:

p:first-letter {color: red; font-size: xx-large;}

However, when you attempt to do this inline, you are forced to introduce an element to hold the first letter as in the following:

<p><span style="color: red; font-size: xx-large;">T</span>his is a test.</p>

While these examples indicate why these selectors were given the names pseudo-class and pseudo-element, they don’t really show us how to use such inline styles.

       
<a href="http://www.w3.org/"
style="{text-decoration: none; }: link {color: blue;

            }
            }: visited {color: red; }: hover {color: red; text-decoration: underline; }:
active {color: red;

            }">
            }">Inline
Link Styles?</a>

To set the first letter on paragraphs, we would use:

       
<p style="{text-indent: 1em; text-align: justify; line-height: 150%; }: first letter {color: red;
            font-size: xx-large;
}">
    </h2>
    <p>

This is the set of <p></p>.

The emerging specification even suggested the importation of Style Sheets directly inline:

<div id="navbar" style="@import url(navigationstyles.css);">just an example</div>

While all these ideas are quite interesting, more than seven years after the working draft was authored, not a single browser supports this syntax at the time this edition is being completed. So, besides being too closely bound to tags, understand that unless this situation has changed by the time you read this edition, only using inline styles is going to limit your application of some of the more useful CSS selectors. (Reference McGrill CSS)

These were some methods for using CSS, there are many other methods for using CSS but includes the preceding three parent methods. So for more stay tuned for the next articles while continuing your coding work with various examples.

in my next post i'll discuss about Stylish CSS3 progress bars