Applying CSS to HTML Document

There are three ways you can apply CSS to an HTML document. It is recommended to use external method.

Method 1: In-line (attribute style)

One way to apply CSS to HTML is by using the HTML attribute style.

For example,

<body style="background-color: #ff0000;">

2. Method 2: Internal (tag style)

Another way is to include the code using the HTML tag <style>.

For example,

<style type="text/css">
 body {background-color: #ff0000;}

Method 3: External (link to style sheet)

The recommended method is to link to a external style sheet. An external style sheet is simply a text file with the extension .css. For example, create style sheet named style.css in the folder named style.

Now, you have to create a link from the HTML document to the style sheet (style.css). Such link can be created with one line of HTML code:

<link rel="stylesheet" type=text/css" href="/style/style.css" />

The line of code must be inserted in the header section of the HTML code - between the <head> and </head> tags.

 <title>My document</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" />

This link tells the browser that it should use the layout from the CSS file when displaying the HTML file. Several HTML documents can be linked to the same style sheet. In other words, one CSS file can be used to control the layout of many HTML documents.