CSS-Inclusion

To associate styles with your HTML document, there are four ways. Inline CSS and External CSS are most commonly used methods

Embedded CSS - The <style> Element

CSS rules can be put into an HTML document using the <style> element. This tag is placed inside <head>...</head> tags. All rules defined using this syntax will be applied to all the elements available in the document. Here is the generic syntax ?

Example :-

Following is the example of embed CSS based on the above syntax

Result

This is a heading

This is a paragraph.

Inline CSS

An inline style may be used to apply a unique style for a single element.We add the style attribute to the relevant elementto use inline styles. The style attribute can contain any CSS property. We can apply CSS in a single element by inline CSS technique.Style sheets in HTML document are inserted by using inline CSS. It is advised to use inline CSS method sparingly because this method mitigates some advantages of style sheets. To use inline CSS, you should use the style attribute to the relevant tag.The example below shows how to change the color and the left margin of a <h1> element

Example :-

Result

This is inline CSS

Disadvantages of Inline CSS

  • Within inline CSS, you cannot use quotations. If you use quotations the browser will interpret this as an end of your style value.
  • These styles cannot be reused anywhere else.
  • Because they are not stored at a single place,these styles are tough to be edited.
  • With inline CSS, it is impossible to style pseudo-codes and pseudo-classes.
  • Inline CSS does not provide browser cache advantages.
  • External CSS - The <link> Element

    To include an external style sheet file in your HTML document, the <link> element can be used. You can change the look of an entire website by changing just one file with an external style sheet. Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

    Example :-

    Consider a simple style sheet file with a name mystyle.css having the following rules ?

    Embedded CSS - The <style> Element

    CSS rules can be put into an HTML document using the <style> element. This tag is placed inside <head>...</head> tags. All rules defined using this syntax will be applied to all the elements available in the document. Here is the generic syntax ?

    Following is the example of embed CSS based on the above syntax

    Example