Internal CSS is specified once at the beginning of an HTML file, and applies to the entire file. It is used in the following manner:
<html>
<head>
<style type="text/css">
p { border: 1px dotted #000000; }
</style>
</head>
<body>
<p>This paragraph will be surrounded by a thin dotted black border.</p>
</body>
</html>
You should already be familiar with the majority of these HTML elements, however inside of the <head> & </head> tags is an element that might be new to you. This element, <style type="text/css"> & </style> opens and closes a block of internal CSS. All of your CSS should go between these two tags, using the standard CSS syntax that we discussed previously.
With internal CSS you may see HTML style comments inside the style tags, which can be added for the purpose of hiding the CSS code from old browsers that do not support CSS. These are optional. Below is an example:
<style type="text/css">
<!--
p { border: 1px dotted #000000; }
//-->
</style>
Inline CSS does not clutter up your actual HTML, nor does it cause unnecessary repetition within a file. It is a good option if you want to style a single file, but not a good option if you want the same style to be maintained over multiple files.