Chap 1: 12-12; Chpt 2: 13-13
The purpose of style sheets is to separate the semantics and content from the design.
There are three types of style sheets:
- Internal CSS’s that affect the entire webpage
- External CSS’s that affect the entire website
- Inline CSS’s that affect the particular section of a Web page. This is not recommended, because it doesn’t effectively separate the content and the design
Internal Style Sheets: The Set-up
The <style> tags are (typically) located in the head of the HTML document:<html>
<head>
<style>
body {background-color: white}
h1 {color: red}
font {font-family: "Arial"; color: blue}
</style>
</head>
<body>
<h1>WORLD CUP 2010!!!!</h1>
<font>GOAAAAAAAAAAAAAAAAAAAAAAAALLLLL !</font><br/>
</body>
</html>
It will look like this (click the spoiler button to see):
External: The set-up
An external style sheet is the most common way to include CSS. Instead of the <style></style> tags shown above we link to the external file mystyle.css which is in a folder named css
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
please keep in mind. the same relative linking used for images is necessary as used with images
Inline Set-up
The code is inserted into the body each time it is used. This is more or less impractical. While it MAY save coding time, a simple copy/paste works just as well, especially if it is used less often. Here is an example of a inline ccs that has to be repeated each page is resides:
<strong style ="font-family: Verdana, Geneva, sans-serif;color: #800000;"> "Creating a community of avid readers, one video at a time<sup>©</sup>"</strong>
Results in (click the spoiler button to see):
Go to the following tutorial sites and take your pick.. both are pretty self explanatory. When you are satisfied you understand things, you can go on to the lesson on Java Script.