Updated Feb 13, 2010 - Posted Mar 23, 2009
-
CSS internal
Internal styles
When applying internal CSS you put all your CSS rules in the <head>...</head> part of your HTML document and enclose it with <style type="text/css">...</style> tags. A rarely used method, though it sometimes has its uses such as testing stuff on a single page.
Internal CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Internal CSS styles</title>
<style type="text/css">
p {border:2px solid lime}
</style>
</head>
<body>
<p>1st pragraph ...</p>
<p>2nd pragraph ...</p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Internal CSS styles</title>
<style type="text/css">
p {border:2px solid lime}
</style>
</head>
<body>
<p>1st pragraph ...</p>
<p>2nd pragraph ...</p>
</body>
</html>
Output
Usage guidelines
1. Avoid if possible
Really there's not much point using internal CSS styles. You might as well take all those CSS rules and put them into an external .css file so it can be re-used in other pages. This will be covered in the next chapter.