Applying CSS in HTML documents
There are three ways that you can use CSS in an HTML document. These methods are all described below. We recommend that you focus on the last of the three options.
Method 1: In-line (style attribute)
One way of inserting CSS to a HTML document is with the attribute style. In the above example with the red background, building site, it can be as follows:
<html>
<head>
<title> Example </ title>
</ head>
<body style="background-color: #FF0000;">
<p> That is a red page. </ p>
</ body>
</ html>
Method 2: In-document (tag-style)
Another way is the CSS code in the HTML with <style> tag involved, for example:
<html>
<head>
<title> Example </ title>
<style type="text/css">
body (background-color: # FF0000;)
</ style>
</ head>
<body>
<p> That is a red page. </ p>
</ body>
</ html>
Method 3: External (referring to a stylesheet)
The recommended method is to use a so-called external stylesheet to refer to. In all examples of this tutorial we will apply this method. An external stylesheet is simply a text file with the extension ".Css". Like any other file, you can keep a stylesheet on your web server or your hard drive.
Let's say your stylesheet called style.css is located in the folder "style". The trick in the whole thing is to refer from the HTMLÂ document (default.htm) to the stylesheet (style.css). Such a reference can be used with a line of HTML code that looks like that:
<link rel="stylesheet" type="text/css" href="style/style.css" />
You see, the path to our stylesheet is using the href attribute specified. The line of code must be written in the header of the HTML document, between the <head> and </ head> tags. It should be inserted like this:
<html>
<head>
<title> My Document </ title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</ head>
<body>
...