HTML Styles

When it comes to styling a web page or HTML Elements , this whole responsibility is care taken by the CSS. CSS gives web designers and developers full control over the look and feel and the layout of the web pages.CSS can be added to HTML Element using the <style>…</style> tag or using “style=’ ‘ ” attribute.

There are four different ways CSS can be applied to any HTML Element –

  • Inline CSS
  • Embedded CSS
  • External CSS
  • Imported CSS

Inline CSS

In Inline CSS method all the styling applied to the HTML Element are defined inside the HTML Tag.

Example:

Embedded CSS

In this method styles are embedded inside the HTML document using the ‘style’ element (usually within the <head> tag).

Example:

External CSS

In this method all CSS that you want to use throughout your website are declared in a external style sheet which is a separate file that file typically has extension of ‘css’ . You can then include this external style sheet in any or all of your HTML pages.

Example:

Imported CSS

External Stylesheets can also be imported into an HTML document using @Import rule.

Example: