HTML: 3 Ways to Add CSS Styles for a Web Page

HTML: 3 Ways to Add CSS Styles for a Web Page

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS / HTML
  • 3 mins read

In this tutorial, I will show you 3 ways to add CSS styles for a web page in HTML.

1. Using <link> Element with rel Attribute

The attribute for a link element that links to an external file is rel (relationship) attribute with a value of "stylesheet", and the href attribute that locates the file. As you learned in the previous chapter, href attributes are usually coded with a URL that is relative to the current file. As a result, the relative URL in the following example goes down one folder and locates a file named main.css:

<head>
     <link rel="stylesheet" href="styles/main.css">
</head>

2. Using <style> Element to Embed

You can embed a CSS style sheet in the HTML for a page. This is referred to as an embedded style sheet. When you embed a style sheet, the CSS rule sets are coded in a style element in the head section of the HTML. In the following example, it will set a rule for the body element and another for the h1 element:

<head>
  <style>
     body {
	   font-family: Arial, Helvetica, sans-serif;
	   font-size: 87.5%;
	 }
	 h1 {
	   font-size: 250%;
	 }
  </style>
</head>

3. Using Inline style Attribute

You can use inline styles within an HTML document as shown in the below example. When you use an inline style, you code a style attribute for the HTML element with a value that contains all the CSS rules that apply to the element. For instance, the inline style in the following example applies two CSS rules to the h2 element:

<h2 style="font-size: 500%; color: red;">Fox Infotech</h2>

The Sequence in Which The Styles Applied

  1. Styles from an external style sheet
  2. Embedded styles
  3. Inline styles

Notes on Adding CSS in HTML

  • When you use external style sheets, you separate content (HTML) from formatting (CSS). That makes it easy to use the same styles for two or more web pages.
  • If you use embedded styles, you have to copy the styles to other HTML documents before you can use them a second time.
  • If you use inline styles to apply styles, the formatting is likely to get out of control.
  • If more than one rule for the same property is applied to the same element, the last rule overrides the earlier rules.
  • When you specify a relative URL for an external CSS file, the URL is relative to the current file.
  • You can use the media attribute of a link element to specify the medium that the style sheet is for. This lets you use different style sheets for different media. Since the default is the screen, you don't have to use this attribute for a normal page.

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles/main.css">
  <style>
     body {
	   font-family: Arial, Helvetica, sans-serif;
	   font-size: 87.5%;
	 }
	 h1 {
	   font-size: 250%;
	 }
  </style>
</head>
<body>
    <h1>HTML Add CSS</h1>
	
    <h2 style="font-size: 500%; color: red;">Fox Infotech</h2>
</body>

</html>

Output

As shown in the featured image of this article.

See also: