How to Use CSS in a HTML Document

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 renderingparticularly 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 otherapproaches.

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

1.External
StyleSheetAn 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 SheetsThe 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 StylesInstead 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:

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.