Applying CSS
There are three ways to apply CSS (Cascading Style Sheets) to HTML.
In-line
In-line styles are plonked straight into the HTML tags using thestyle attribute.
They look something like this:
This will make that specific paragraph red. But, if you remember, the best-practice approach is that the HTML should be a stand-alone, presentation free document, and so in-line styles should be avoided wherever possible.p style="color:red">text</p>
Internal
Embedded, or internal styles are used for the whole page. Inside thehead tags, the style tags surround all of the styles for the page.
This would look something like this:
This will make all of the paragraphs in the page red and all of the links blue. Similarly to the in-line styles, you should keep the HTML and the CSS files separate, and so we are left with our saviour...<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS Example</title> <style type="text/css"> p {color: red;} a {color: blue;} </style> ...
External
External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like:If this file is saved as "web.css" then it can be linked to in the HTML like this:p {color: red;} a {color: blue;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS Example</title> <link rel="stylesheet" type="text/css" href="web.css" /> ...
