How to Insert a StyleSheet

The file that contains only CSS code and is saved with a ".css" file extension is called as External CSS. Using the <link>instead of <style>,this CSS file is then referenced in your HTML. Don't worry if you're confused. We are going to walk you through the whole process.

<html>
<head>
<title>My First Stylesheet</title>
<link rel=stylesheet href="mystyles.css" type="text/css">
</head>
<body>
<h1>Stylesheets: The Tool of the Web Design Gods</h1>
<P>Friendship is always alive! Squash your enemies!</P>
</body>
</html>

Now create a separate text file called mystyles.css (you can name it anything you want). All it contains is this:

h1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }

Note:

When the same style / format / look n feel is required on numerous pages then we say that an external style sheet (CSS) is perfect.The webmaster can change the look of the entire site - by changing one file,with the help of an external style sheet,.

Internal Style Sheet

When a single document has a unique style,an internal style sheet should be used.In the head section, by using the <style> tag, you can define internal styles like this:

<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>

The browser will now format the document and read the style definitions according to it.

Note: A browser normally ignores unknown tags. This means that an old browser that does not support styles, will ignore the <style> tag, but the content of the <style> tag will be displayed on the page. By hiding it in the HTML comment element: ,it is possible to prevent an old browser from displaying the content.

Inline Styles

Inserting stylesheets rules right in the middle of all your HTML is called as inline stylesheet. It might look like this:

<html>
<head>
<title>My First Stylesheet</title>
</head>
<body>
<h1 style="color: orange; font-family: impact">Stylesheets: The Tool of the Web Design Gods</h1>
<P style="background: yellow; font-family: courier">Amaze your friends! Squash your enemies!</P>
</body>
</html>

Multiple Style Sheets

In different style sheets if some properties have been set for the same selector the values will be inherited from the more specific style sheet.

For example, an external style sheet has these properties for the h4 selector:

h4
{
color: blue;
text-align: left;
font-size: 8pt
}

And an internal style sheet has these properties for the h4 selector:

h4
{
text-align: right;
font-size: 20pt
}

If the page with the external style sheet also link to the internal style sheet then the properties for h4 will be:

color: blue;
text-align: right;
font-size: 20pt

The text-alignment and the font-size is replaced by the internal style sheet and The color is inherited from the external style sheet.

Share And Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.

Keywors: css friendster profile editor, css codes, css tutorial, dvd region css free, css code background for friendster, free friendster background css codes, myspace css code generator, css templates, css style sheets, css layouts

HTML Quizes

XML Quizes