Subscribe to exclusive tips of making money online.
Enter email address:
@onlinebzDOTcom

Join Me on Google

earn $150 free cash from Chase Freedom

Link External Style Sheet to HTML Document

Share This...Share on Facebook0Tweet about this on TwitterShare on Google+0Share on Tumblr0Share on StumbleUpon0Buffer this pageEmail this to someonePrint this page

learning web design beginner's guide to html, css, javascript and web graphicsHow to link external style sheet to HTML document? The answer is to use a <link />tag in the <head>section of such HTML document.

e.g.
<head>
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css”/>
</head>

The <link /> element is an empty element, it contains attributes only, no closing tag is needed.

The “link” element goes only in the head section, but it can be used once or several times as needed.

Check out this CSS style Sheet example:

body {
font-size: 10pt;
font-family: Verdanda, Geneva, Helvetica, sans-serif;
color: black;
line-height: 14pt;
padding-left: 5pt;
padding-right: 5pt;
padding-top: 5pt;
}

h1 {
font: 14pt Verdada, Geneva, Helvetica, sans-serif;
font-weight: bold;
color: red;
}

p.subheader {
font-weight: bold;
color: orange;
}  (This can be rendered using class=”subheader” in <p> section.)

img {
padding: 3pt;
fload: right;
}

a {
text-decoration: none;
}

a:link, a:visited {
color: green;
}

a:hover, a:active {
color: blue;
}

div.footer {
font-sizze: 9pt;
font-sytle: italic;
line-height: 12pt;
text-align: center:
padding-top: 30pt;
}   (This can be rendered using class=”footer” in <div> section.)

Save this style sheet under the name “style.css” in the same folder as the HTML document you wish to link to. The properties specified in the style sheet will apply to the content in the page without the need for any special HTML formatting code.

Below is how to link this “style.css” style sheet to the HTML document using <link /> tag.

<html>
<head>
<title> Your Title </title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<h1> Your h1 Title </h1>
<p><img src=”logo.gif” alt=””/> sdkljghaskghasjkghas</p>
<p class=”subheader”> XXXxXXxx </p>
<p><a href=””></a></p>
<div class=”footer”>Copyright & copy: XXXXxxxx </div>
</body>
</html>

To link external style sheet to HTML document has two-fold benefits. You can easily create a website with multiple pages that maintain a consistent look and feel. Also, since you have isolated the style of all the pages to a single CSS document, you can therefore easily make changes on the style sheet and make the changes happened on all related pages.

Other Ways to link CSS to HTML

There are actually three ways to include CSS style sheets in a website:

1. External style sheet —  A separate style sheet file with the extension .css, which is linked to HTML in the <head> section

2. Internal style sheet —  A collection of style rules placed in the <head> section within the <style> tag. An example is like this:

<head>

<style type=”text/css”>

div.footer {

font-size: 12pt;

}

</style>

3. Inline style — style rules are placed directly in an HTML tag via the style=”attribute”.

Style Class in CSS

Style class is a type of specially formatted text you define . Whenever you want some of the text on your webpages to look different from the other text, you can use style classes to achieve.

Suppose you want two different types of <h2> headings to be used in you documents. You would create a style class for each one by putting the following CSS code in a style sheet:

h2.one { font: 24pt comic sans; }
h2.two { font: 30pt Arial; }

H2 here is called called selectors. When a selector is followed by a dot (.) and a descriptive class name, you can link this with HTML using link tag and the appropriate class attribute, like this:

<h2 class=”one”>This is h2 header using class one</h2>

If you want to create a style class that can be used to any element, rather than any particular tags, you can use <div> tag, which is used to enclose any text in a block that is similar to a paragraph of text.

You can basically make your own custom HTML.tag by using the div selector followed by a dot and any style class name. You can define this style class with any specifications you choose.

What make style classes so valuable is how they isolate style code from web pages, effectively allowing you to focus your HTML code on the actual content in a page, not how it is going to appear on the screen. Then you can focus on how the content is rendered to the screen by fine-tuning the style sheet.

A relatively small amount of code in a style sheet can have significant effects across an entire web site. This makes your web pages much easier to maintain and manipulate.

Style IDs in CSS

Style classes can be used as many time as you like. When you want to have precise control over some unique elements for layout or formatting or both, and the unique elements only appear once on any given pages, at this time, using style ID rather than a style class is the appropriate choice.

You probably often see style IDs to be used to define the specific parts of a page for layout purposes, such as a header area, footer area, main body area, and so on. For example, the previous div style class footer can be changed to footer ID since footer only appear once per page, ID is more appropriate in this situation:

Div#footer {
Font: 9pt;
Line-height: 12pt;
Color: light grey;
Padding-top: 5px;
}

The format to create a style ID is like this:  The selector, this time is div, then a pound sign #, followed by a unqiue ID name.

When render a style ID in HTML code, simple specify the ID name in the id attribute of an element, like this:

<div id=”footer”>Copy @ website 2014 all rights reserved.</div>

 

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  

  

  

commentlvu enabled. Please only use your real name. Comments without real name will be deleted.