| 2006/06/24 01:29:06 PDT by Vivian Edited at 2006/06/24 23:28:05 PDT |
This is an overview of the important points covered in the "Introduction to CSS" lecture.
Cascading Style Sheets (CSS) - World Wide Web Consortium (W3C) Standard
HTML is used to provide the structure of a webpage.
CSS is used to control the overall appearance and style of it.
HTML structural tags -
<p>, <body>, <ul>, <ol>, <li>, <a>, <h1>-<h6>, <table>, <tr>, <td>, <th>
Tags that you should NOT use in the HTML document -
<center>, <font>, <u>
If you have these tags, please use CSS instead.
------
Format of the Cascading Style Sheet:
selector {
property: value;
property: value;
}
Notes:
1. In CSS you use the curly brackets { } instead of the angle brackets used in html < >.
2. To separate between the "property" and the "value" use a colon.
3. To separate between different properties, use a semi-colon.
The selector is name of the structural tag you are dealing with. (p, body, ul, table, a)
The property is the visual element you want to change. (font-family, color, text-decoration)
The value is the specification. (italic, bold, blue, green, "Comic Sans MS", Arial)
example:
body {
background-color: #607B8B;
font-family: "Trebuchet MS", Verdana, sans-serif;
}
Reminders:
1. When specifying colors, use the hexadecimal color codes like I have done in the example above. This way, you are not limited in your choices. Don't forget to inlude the pound sign (#).
2. When specifying font-family, any values consisting of more than one word should be placed in quotation marks (" "). Include a back-up font option in case computers do not have the first font. (Use commas to separate.) Also, provide a generic font family (sans or sans-serif) in case people don't have any of your fonts.
------
Embedded Style Sheet:
When to Use: This is useful if you only want to change the appearance of one page.
Embedded style sheets are placed inside of the HTML document, inside the <head> tag.
This is the tag you need to use to embed the style sheet:
<style type="text/css"> /* your CSS goes here */ </style>
All of the CSS should be included inside these style tags.
Example:
<style type="text/css">
body {
background-color: #63B8FF;
color: #CD2626;
}
h1 {
color: #FF5721;
}
a:link, a:visited, a:hover {
color: #CD0000;
background-color: #63B8FF;
text-decoration: none;
}
</style>
--------
External Style Sheet:
When to Use: This is useful when you want multiple pages to have the same visual apperance. Instead of having to copy and paste the same style sheet into each individual page, you can make one style sheet and link all of the pages to it.
This is the tag you need to use to link to an external style sheet:
<link rel="stylesheet" href="filename.css" type="text/css" />
Note:
1. For external style sheets, they must be saved as a ".css" document rather than a ".html" document.
2. Don't forget to change the "filename.css" to whatever you saved your stylesheet as.
Important: In the external style sheet, do not include the <style type="text/css"> and </style> tags. There should be NO Xhtml tags of any kind in this document.
What's up yo?
Ah...gotta love that minty freshness. ;p