CSS Inclusion in HTML Documents

In this tutorial you will learn how to include or link CSS style sheet in HTML Document, it easy to use with HTML Document, make better User Interface by the CSS style sheet.

A CSS Stylesheet can be include or link in different ways, in HTML Documents and each way has its own advantages and disadvantages to use in HTML Documents

when linked CSS style sheet in HTML Documents its plays an important role in the presentation of Web pages.

CSS decorate web pages, visual styles such as layout, positioning, colors, and fonts of HTML elements.

Different ways of CSS Inclusion into HTML:

Let’s see, there is the following three method to use CSS Stylesheet in HTML document.

  • The internal style sheet – Embedded CSS
  • The external style sheet – External CSS
  • The in-line style – Inline CSS
  • The Imported CSS

In these methods, we use mostly External CSS and Inline CSS methods.

The internal style sheet – Embedded CSS

The internal style sheet – Embedded CSS is written always in the HEAD element of the HTML document.
The syntax in HTML Document is written as follows:-

Example


Here is the output produced by the above internal style sheet – Embedded CSS code:

Embedded-CSS

Explanation:-
In the above example style element contain, starting and ending tag, and this style element contains an attribute with value text/css.
style elements declaration was written between an opening and the closing tags, and declaration consists of a selector (property and value) followed by curly braces.
The curly braces contain a property colon, semicolon.

The external style sheet – External CSS

In this method, all CSS which you want to use in your website or blog is declared in an external style sheet.
its a separated file of CSS. which use to control the website user interface design that file typically has an extension of “.CSS”
you can include in all of your HTML web pages.
as you see in case of an internal style sheet when used CSS file its placed inside the HTML Document but,
in case of the external style sheet, the CSS code (file) is placed the outside the web HTML pages and the reference of
the CSS file which will be placed in the HTML document.
now the external style sheet, linked in your Web pages in the following two ways.

I) Importing:-

the external style sheet, linked use @import rules, here The @import keyword is used,
followed by the URL (Uniform Resource Identifier) of the style sheet to which you want to import
the style rules.

The following code shows an example of the @import rule.

In the above code, you can see that @import keyword followed by the URL of the style sheet named new_stylesheet.css

II) Linking:-

The HTML link element is used to link a style sheet. This LINK element has the following three attributes.
I) rel
II) href
III) type

Here, in the above code fragment, the rel attribute define that what you are linking (In Case of CSS style sheet).
the href attribute indicates or specifies the path of the file (in case of CSS extension .css file) and The type
specifies the MIME type for the browser,

As you see in above, rel attribute value is set to the stylesheet, the value of the href attributes is new_stylesheet.css and the type attribute value set to text/css

The in-line style – Inline CSS

The Inline style – Inline CSS, properties are always written in single line with separated by semicolons. and Inline CSS properties placed inside the HTML element.

Example

inline css

Above is the output produced by the above inline style CSS fragment code

Imported CSS

Imported CSS Method is used to external stylesheets imported into an HTML document by @Import rule.