IntroDuction to Css
Embedding Styles
Inline Styles
Inline styles can be applied direclty to elements in the HTML code using the style attribute. However, inline styles should be avoided wherever possible because the styles added to the HTML markup. This defeats the main purpose of CSS, which is to apply the same styles to as many pages as possible across your website using external style sheets. Say if you needed to make changes to your site, with inline style sheets you would need to change multiple pages rather than one CSS file.
An example of an inline style would be:
<body>
<p style="font-family: arial, helvetica, sans-serif; margin: 1em; padding: 1em; background-color: gray; width: 10em;"> Lorem ipsum dolor sit amet, consectetuer
</p>
</body>
Header Styles
Header styles resemble very closely to Inline styles, once again it is advised to avoid Inline styles because the styles are added to the HTML markup. Their are cases in which the Header style might be the preffered option, such as a CSS rule that is specific to one page within a website. To embed CSS directly into a web page, use the STYLE tag, and set the type to 'text/css':
<style type="text/css">
/* CSS goes here */
</style>
The style element is placed within the document head. Here is a template HTML file showing where the above style element fits. You can copy and paste this into your editor as a convenient way to experiment with CSS style sheets:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> replace with your document's title </title>
<style type="text/css"> body { color: black; background: white; } </style>
</head>
<body> replace with your document's content
</body>
</html>
External
One of the most useful features of CSS is the ability to share the same styles across many pages, so that all pages can be changed by modifying a single file. To do that, you will need to keep the CSS in a separate file. This also allows you to keep the clutter out of your document, and helps avoid several other problems, so even if you only intend to use the CSS on one page, you may want to include it in an external file anyway.
To use an external file, you would usually name the file something.css (choose an appropriate name), and then use the LINK tag to tell the page to use it. Inside the head of a document put this:
<head>
<link rel="stylesheet" type="text/css" href="something.css">
</head>
Note that external CSS should only ever be included in the head of your document, unless you use inline style attributes on individual elements.
Homework
For your homework download the zip file and follow the instructions given within.