Which of these you use depends on what you are trying to do and, to some degree, how sloppy you are willing to be with your code.
<p>This is an unstyled paragraph.</p>
<p style="font-size: 24px; line-height: 130%">This is a paragraph with in-line styling.</p>This is an unstyled paragraph.
This is a paragraph with in-line styling.
The problem with this method is that, if you want to make a change to all the paragraphs in your document, you have to go through every <p> tag and change it individually—a huge waste of time.
<html>
<head>
<title>
CSS Example
</title>
<style type="text/css">
p
{
font-size: 24px;
line-height: 130%;
}
</style>
</head>
<body>
<p>This paragraph is styled by the CSS tags in the head of the document.</p></body>
</html>
This paragraph is styled by the CSS tags in the head of the document.
The advantage of this is that one tag will style every paragraph in the whole HTML document.
<html>
<head>
<title>
External CSS Example
</title>
<link rel="stylesheet" href="example.css" type="text/css" />
</head><body>
<p>This paragraph is styled by an external style sheet linked to in the head of the document.</p></body>
</html>
This paragraph is styled by an external style sheet linked to in the head of the document.
The advantage of this is that a single external style sheet will style every paragraph in an entire Web site - so you can change the appearance of thousands of pages by just altering one document.
To set up an external style sheet, you create a separate document which contains only the style declarations without the opening and closing <style> tags:
This link goes in the head of any HTML documents that you want to have this style.
To keep your site organized, you should set up a folder for all of your site's style sheets and title it "css" (just like you placed your images into an "images" folder) and include the css folder's name in the stylesheet path:
All of the individual style elements for a site (or a section of a site) can go into a single CSS document. The CSS document for the Webwork site that you are on now looks like this:
Note in above example that:
is how comment tags are indicated in CSS code.
If an element is styled in more than one place, the style attributes cascade in a specific order.
If you have added CSS to <p> tags in an external CSS document and you have also added CSS to <p> tags in an internal style sheet (in the head of the doc) and you have also added inline style tags to specific <p> tags, the style tags closest to the element will override the other ones.