CSS Internal

March 09, 2008

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 #8dc919}
  •     </style>
  •   </head>
  •   <body>
  •     <p>1st pragraph ...</p>
  •     <p>2nd pragraph ...</p>
  •   </body>
  • </html>

Display:

1st pragraph ...

2nd pragraph ...

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.