‘Style Sheets’ as the name describes, represents the layout of any kind of document. When it comes off for the HTML it means the style sheets of the HTML documents which enable you to specify the different parameters of the page describing its size, margins, color, and fonts. The most commonly used HTML style sheets today are CSS (Cascading Style Sheets) which are capable of easily setting the margins and parameters of different documents. Moreover, it also enables you to make the layout of different documents on the single screen. Some of the most important features of the HTML Style Sheets are:

  • Placing HTML Style Sheets in separate files provides flexibility to them so that they can be easily reused.
  • These style sheets are not dependent on any other Style Sheet language so that can be easily used.
  • It decreases the chances of media dependencies so that you can access different web pages on different devices.
  • HTML Style Sheets also enables you to blend them with other like CSS to get the best results.
  • It also enables you to get different types of layout styles while using the single format.

External Style Sheet

html document

External Style Sheets are the separate files which are used to declare all the styles which you wanted to have on your websites. These kinds of style sheets need to declare the styles separately. Once done explicitly on the code, remains same for each element of it. Moreover, if you wanted to update the style of your website you also need to use it once. These style sheets include links for all the HTML pages included in the layout.

These style sheets are generally used when someone wants to make changes in the multiple pages of their website. The main thing about these kinds of style sheets is that all the instruction regarding all the pages is stored in a single file which can be easily edited. The only thing you need to do is to link all the pages to the single layout by using <Link> tags on the each page and every head section. For example:

<head>

<link rel=”stylesheet” type=”text/CSS” href=”mystyle.css”>

</head>

While saving the Style Sheet, one thing that you should keep in mind is that the style sheet can be easily written in different types of text editors while it can only be saved by using the .css extension.

Internal Style Sheet

Internal Style Sheets are usually used for adding unique style to each and single page of HTML documents. This kind of style sheets needs to add code to each page of the file so that you can add uniqueness and special features in each page of it. This kind of style sheets can easily add to the document by defining in a <head> section of the HTML pages inside the >style> tag. An internal style sheet of the document usually includes the CSS code of the web page which is usually described in the header section. The main feature of this kind of style sheets is that the code once included in the single page can be easily reused for others if required.

If you are working with these style sheets you can easily use <style></style> HTML tags in the header section for describing the entire page. The entire coding of these style sheets is enclosed between the two <head></head> sections of the website code. For example:

<head>

<style type=”text/css”>

h1 {color:blue;}

h2 {color:red;}

p {color:green;}

</style>

</head>

Inline Style Sheet

Inline Style Sheets means to put Cascading Style Sheets (CSS) embedded inside the HTML files. These kinds of style sheets are usually present in the header section of each document along with <style> tags. These style sheets provide information about the current element.

These style sheets are not preferably used for professionals to develop web pages. Mostly these style sheets are used in HTML emails to make them fancy, older websites, CMS contents and dynamic content on websites that use JavaScript programming language. The inline style sheets are very much similar to CSS but still have some differences. These style sheets do not require any selectors for selecting the particular section to make changes. It has the capabilities to directly affect the tags in which they are embedded. For example:

<!DOCTYPE html>

<html>

<head>

<title>Playing with Inline Styles</title>

</head>

<body>

<p style=”color:blue;font-size:46px;”>

I’m a big, blue, <strong>strong</strong> paragraph

</p>

</body>

</html>

Where, <p style> represents the values of properties that are embedded HTML page.

Leave a Reply

Your email address will not be published. Required fields are marked *

Post Navigation