How to use Stylesheet in HTML

On a web page, use the CSS Stylesheet to specify style properties, for example, changing font color, font size, background color, etc. Let us see how style property is set on an element. Here, for our example, we are setting style for <body> element:

CSS Stylesheet

As we can see above, each property has a name and a value, separated by a colon (:).

CSS styles can be added to a web page defining styles rules:

  • Inline Stylesheet for defining style rules
  • Internal Stylesheet for defining style rules
  • External Stylesheet for defining style rules

Let us learn about the style rules one by one:

Inline Stylesheet for defining style rules

With the Inline StyleSheet, you can easily set the rules with a specific HTML element. The style attribute is used for this. For example:

Internal StyleSheet for defining style rules

With the Internal StyleSheet, the rules are set in the <head>…</head> of an HTML document. The <style> element is used as in the below example:

External StyleSheet for defining style rules

External StyleSheet as the name suggests, allow you to create a separate CSS file and set the rules in it. This external file is to included in the HTML file, under the <head>…</head> like this with the <link> element:

As you can see above, “style.css” is our external file, wherein we have set the style. Here’s our “style.css” file:

Note: It’s not a good practice to use Inline CSS. Avoid it. Consider using External Stylesheets to add all the CSS rules in a single file and include in your web page with <link>.

Now, we will create a web page and set font and background color with all other elements essential for an HTML document. We are using Interbal StyleSheet i.e. <style> element:


Internal CSS in HTML

How to set/change font color in HTML
HTML5 Features
Studyopedia Editorial Staff
Studyopedia Editorial Staff
[email protected]

We work to create programming tutorials for all.

No Comments

Post A Comment

Discover more from Studyopedia

Subscribe now to keep reading and get access to the full archive.

Continue reading