External styles
External styles can be used in multiple HTML documents.
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>