Applying CSS styles

External styles

External styles can be used in multiple HTML documents.

File composition

Creates an external CSS file and defines styles within that.

Note : The STYLE element is not used in external CSS file.

/* CSS file inside */

h1 { color: red; }
p { line-height: 120%; }
#container { background-color: #c0c0c0; }
.photo { border: 1px green solid; }

The external CSS file can be linked to the HTML documents by using the following LINK element.

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

<html>
<head>
<title>TAG index</title>
<link rel="stylesheet" type="text/css" href="example.css">
</head>
<body>



</body>
</html>

The multiple external CSS file can also be linked to the HTML document.

<html>
<head>
<title>TAG index</title>
<link rel="stylesheet" type="text/css" href="body.css">
<link rel="stylesheet" type="text/css" href="list.css">
</head>
<body>



</body>
</html>

Internal styles

Internal styles can be used in a single HTML document.

Place the STYLE element into the HEAD element and defines styles within that.

<html>
<head>
<title>TAG index</title>

<style type="text/css">

h1 { color: red; }
p { line-height: 120%; }
#container { background-color: #c0c0c0; }
.photo { border: 1px green solid; }

</style>

</head>
<body>



</body>
</html>

In-line styles

In-line styles can be used in a single element.

Place the style attribute into the element and defines styles within that.

<html>
<head>
<title>TAG index</title>
</head>
<body>

<div style="background-color: #c0c0c0;">

<h1 style="color: red;">Heading</h1>
<p style="line-height: 120%;">Short paragraph.</p>
<img src="example.jpg" alt="Photo" style="border: 1px green solid;">

</div>

</body>
</html>