Linking Your Stylesheet to HTML

Style sheets made way to the development of web page that is why web designers these days have improved in developing a better website look compared to what it was before. Before people were only interested in what was written, not on how web pages were designed. As people became more curious, the more they found out that designing through HTML has a limitation. Designing a web page using HTML takes time and is considered as one of the most redundant tasks. That is why they have come up with style sheets or otherwise known as CSS.

In CSS, to design a style of the site, authors usually link the style sheet file to their HTML page, similar to this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="orange.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="special">This paragraph should have orange text.
</BODY>
</HTML>

There are reasons authors put a separate style file for their HTML page like for example, they want a similar style in all the pages they have. Using an external style sheet is indeed convenient, but there are some drawbacks; retrieving an external style sheet file could take a while does delaying its presentation to the visitor. This is also true when you have a very long code in an external stylesheet.

This disadvantage is solved thanks to the inline stylesheet. Using this method, the CSS code is in the HTML page located in the tag of the page. To link a CSS to an HTML inline, here is what you need to do:

First specify the stylesheet language that you want to do. To do that, use the element to set the default language for the document. This should be put right below the tag.

This declaration is also similar to the HTTP Header normally done like this:

Content-Style-Type: text/css

Then to specify an inline style, you can put an attribute to any HTML tag.

A new background and font color with inline CSS

Using this approach, you can select which specific region in your document has a color, different font size, and other things which will make it unique from your document. Do note however that using the above approach there a small rule to follow, do not use quotations within your inline CSS or else HTML will render it as the end of your CSS style.

You can also link your CSS inside an HTML page using class. In this method we create class declarations in the header after the tag.

Example:

.h2{font-family:Arial, Helvetica, sans-serif;line-height:18px;font-size:12px;color:#312E2E;font-weight:700;}

Conclusion

Linking your stylesheet in an HTML code could probably improve the performance of your website. Just make sure when creating an inline style, you use the correct syntax for it and can differentiate an HTML tag, a class, and an inline stylesheet so you won’t get lost with it. It can be both a beneficial approach and a disadvantage, because although you have sped up the loading time of your webpage, if something went wrong with the style of your website, you will have to look at it one by one in all the webpage that had been affected by the error. Do note however, that you can use both external and internal stylesheets at once but can overwrite one style to another.