Web Design & Development
[ Web Design & Development Topics ]
Lets start out by seeing what it can do:
Cascading style sheets (CSS) are tools used for formatting Web documents. Style sheets merge with html to format Web documents. The style rules are kept in from the body of the html document but tranform the appearance of that html document when they are linked to it. CSS was developed by the World Wide Web Consortium (W3C).
Important note: Cascading Style Sheets don't necessarily look the same in all browsers, particularly on pre 4.x browsers, when CSS became more commonplace.
CSS is a core technology of dynamic html (Dhtml) which also include html, the document object model (DOM), and scripting languages like Javascript. Working together, these technologies allow for the manipulation of Web content and the creation of dynamic pages.
Basically, a style sheet is any rule or sequence of rules that affect the appearance of the document. It works like a word processor template.
First off, there are a number of ways to design with CSS.
Here we will primarily talk about linked or external as that is the most common. By using this method you are able to call out to your CSS specifications from a number of pages instead of just one. However, I will cover the other two quickly.
You can add inline styles by using the style attribute to insert a style rule directly into an html tag. Inline styels are useful when you need a single instance of a particular style. Inline styles, by the way, superceed those specified using embedded or linked methods. For example:
<h1 style="color: red"> would create the following:
header1
If you want to use the style in numerous areas however this method can become cumbersome.
Embedded style sheets are placed within the head section of a document and influence everything in that current document.
Here is a sample of what it could look like:
<style type="text/css">
h4 {font-size: x-large; text-decoration: line-through; color: #cc0088}
h5 {font-size: large; text-decoration: none; color: blue}
</style>Note: You should place the style sheet rules within html comment tags, particularly for older browsers.
If I want the same stuff to apply to more than one element I could write it like this:
<style type="text/css">
h1,h2,h3,h4,h5,h6 {font-family: Arial, Verdana, sans-serif}
h4 {font-size: x-large; text-decoration: line-through; color: #cc0088}
h5 {font-size: large; text-decoration: none; color: blue}
</style>
Well, first we need to create a style sheet like the one sampled in this area. The file needs to end in .css to be recognized as a style sheet. Here we specify what we want our "look" to be. For example, if we want header 1 to be Verdana 14 pixel bold we would type:
H1 {font-family: Verdana, Arial, sans-serif; font-size: 14px; line-height: normal; font-weight: bold; color: #000000; text-decoration: none}
After we have the style sheet set up we need to call to it from our html document. If we have a default style set up like the above then we don't have to do anything special. Our browser will assume all of our header 1 items will use the above settings.
However, in some cases we may want to have various "looks" for one element. I want different looks for my links, for example. Thus I make a number of lines in my CSS file to tell it about the different appearances I want to accomplish:
.link {font-family: Verdana, Arial, sans-serif; font-size: 12px; line-height: normal; font-weight: normal; color: #ff6600; text-decoration: none}
.link:hover {font-family: Verdana, Arial, sans-serif; font-size: 12px; line-height: normal; font-weight: normal; color: #ff6600; text-decoration: underline}
.navsection {font-family: Arial, Verdana, sans-serif; font-size: 13px; line-height: normal; font-weight: bold; color: #0e0a78; text-decoration: none}
.navsection:hover {font-family: Arial, Verdana, sans-serif; font-size: 13px; line-height: normal; font-weight: bold; color: #0e0a78; text-decoration: underline}
.navsubsection {font-family: Arial, Verdana, sans-serif; font-size: 11px; line-height: normal; font-weight: bold; color: #0e0a78; text-decoration: none}
.navsubsection:hover {font-family: Arial, Verdana, sans-serif; font-size: 11px; line-height: normal; font-weight: bold; color: #0e0a78; text-decoration: underline}
These are called "classes" of styles. I can call them whatever I want although the name does need to start with a period.
First I make a CSS file that I want my pages to use. This file ends in .css as an extension. For example I could make a file called anne.css that had information something like this:
body {font-family:arial; color:blue}
h1,h2,h3,h4,h5,h6 {color:green}
I have to tell my html document to call out to the CSS specifications. To do this I add a header line that tells it where the CSS is:
<link rel="stylesheet" href="anne.css" type="text/css" />
Any HTML document with the line above will use the styles I specified in the file anne.css.