HTML - Style Sheet

Quiz

CSS, or Cascading Style Sheets, is a tool that defines how web documents look on screens or in print. Since its introduction in 1994, the W3C has encouraged the use of style sheets for web design. CSS lets you control the presentation of your content, whether it's on a screen, in print, or for accessibility, making web design more flexible and efficient.

Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various attributes for the HTML tags. Using CSS, you can specify a number of style properties for a given HTML element.

Each property has a name and a value, separated by a colon (:). Each property declaration is separated by a semicolon (;).

Example of CSS on HTML Document

First, let's consider an example of an HTML document that makes use of <font> tag and associated attributes to specify text color and font size:

<!DOCTYPE html>
<html>
<head>
   <title>HTML CSS</title>
</head>
<body>
   <p>
      <font color="green" size="5">Hello, World!</font>
   </p>
</body>
</html>

We can rewrite the above example with the help of CSS as follows:

<!DOCTYPE html>
<html>
<head>
   <title>HTML CSS</title>
</head>
<body>
   <p style="color:green;font-size:24px;">
      Hello, World!
   </p>
</body>
</html>

Cascading means that a style applied to a parent element will also apply to all children elements within the parent. So when you are applying any style to an element, you have to be careful about child elements. You can apply different styles to children also.

Ways to Use CSS (Style Sheets) in HTML

There are three ways to include CSS in your HTML document:

External CSS: Define style sheet rules in a separate .css file and then include that file in your HTML document using HTML <link> tag.
Internal CSS: Define style sheet rules in the header section of the HTML document using <style> tag.
Inline CSS: Define style sheet rules directly along-with the HTML elements using style attribute.

Examples of Using Style Sheet in HTML

Let's see all three ways one by one with the help of suitable examples.

Using External CSS

If you need to use your style sheet (CSS) on various pages, then it's always recommended to define a common style sheet in a separate file. A CSS file will have an extension as ".css", and it will be included in HTML files using the <link> tag.

Consider we define a style sheet file style.css, which has the following rules:

style.css

.red{
   color: red;
}
.thick{
   font-size:20px;
}
.green{
   color:green;
}

Here we defined three CSS rules that will be applicable to three different classes defined for the HTML tags. I suggest you should not bother about how these rules are being defined because you will learn them while studying CSS.

Example to Use External CSS file in HTML

Now let's make use of the above external CSS file in our following HTML document.

<!DOCTYPE html>
<html>
<head>
   <title>HTML External CSS</title>
   <link rel="stylesheet" type="text/css" href="/html/style.css">
</head>
<body>
   <p class="red">This is red</p>
   <p class="thick">This is thick</p>
   <p class="green">This is green</p>
   <p class="thick green">
      This is thick and green
   </p>
</body>
</html>

Using Internal CSS

If you want to apply Style Sheet rules to a single document only, then you can include those rules in the header section of the HTML document using <style> tag. Rules defined in the internal style sheet override the rules defined in an external CSS file.

Example to Use Internal CSS in HTML

Let's rewrite the above example once again, but here we will write style sheet rules in the same HTML document using <style> tag.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Internal CSS</title>
   <style type="text/css">
      .red {
         color: red;
      }
      .thick {
         font-size: 20px;
      }
      .green {
         color: green;
      }
   </style>
</head>
<body>
   <p class="red">This is red</p>
   <p class="thick">This is thick</p>
   <p class="green">This is green</p>
   <p class="thick green">
      This is thick and green
   </p>
</body>
</html>

Using Inline CSS

You can apply style sheet rules directly to any HTML element using the style attribute of the relevant tag. This should be done only when you are interested in making a particular change in any HTML element. Rules defined inline with the element override the rules defined in an external CSS file as well as the rules defined in <style> element.

Example to Use Inline CSS in HTML

Let's rewrite the above example once again, but here we will write style sheet rules along with the HTML elements using style attribute of those elements.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Inline CSS</title>
</head>
<body>
   <p style="color:red;">This is red</p>
   <p style="font-size:20px;">This is thick</p>
   <p style="color:green;">This is green</p>
   <p style="color:green;font-size:20px;">
      This is thick and green
   </p>
</body>
</html>

Print Page