CSS
CSS (Cascading Style Sheets) allows web authors to apply styles to their web pages. More importantly, CSS enables them to do this independently of the HTML that makes up each web page.
Therefore, as a web author, you can code your HTML without having to be concerned with what each HTML element is going to look like. You can change the look later using CSS.
You'll find a wealth of information about CSS right here on Quackit. Read the CSS Tutorial, learn all the CSS properties that you can use, or just go straight to the code for some good old "cut & paste"!
What You Should Already Know
Before you continue you should have a basic understanding of the following:
* HTML / XHTML
If you want to study these subjects first, find the tutorials on our Home page.
What is CSS?
* CSS stands for Cascading Style Sheets
* Styles define how to display HTML elements
* Styles were added to HTML 4.0 to solve a problem
* External Style Sheets can save a lot of work
* External Style Sheets are stored in CSS files
CSS Demo
An HTML document can be displayed with different styles: See how it works
Styles Solved a Big Problem
HTML was never intended to contain tags for formatting a document.
HTML was intended to define the content of a document, like:
<*h1>This is a heading<*/h1>
<*p>This is a paragraph.<*/p>
When tags like <*font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.
In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.
All browsers support CSS today.
CSS Saves a Lot of Work!
CSS defines HOW HTML elements are to be displayed.
Styles are normally saved in external .CSS files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
Inline Style Sheets
Inline style sheets is a term that refers to style sheet information being applied to the current element. By this, I mean that instead of defining the style once, then applying the style against all instances of an element (say the
tag), you only apply the style to the instance you want the style to apply to. Actually, it's not really a style sheet as such, so a more accurate term would be inline styles.
Example
Normal HTML
Using inline style sheets
Using inline styles is not as powerful as embedded style sheets, imported style sheets, or linking to an external style sheet. To specify style information for more than one element, you should embed a style sheet in the header of the HTML document. Better yet, you should define styles in an external style sheet, then link to that style sheet. You then can apply the style across mulitple HTML documents.
Embedded Style Sheets
Embedded Style Sheets refer to when you embed style sheet information into an HTML document using the style element. You do this by embedding the style sheet information within <*style>...<*/style> tags in the head of your document.
Example
Place the following code between the <*head>...<*/head> tags of your HTML document:
External Style Sheets
An external style sheet is a separate file where you can declare all the styles that you want to use on your website. You then link to the external style sheet from all your HTML pages. This means you only need to set the styles for each element once. If you want to update the style of your website, you only need to do it in one place.
Example
1.Type the following into a plain text file, and save with a .css extension (i.e. external_style_sheet.css).
2.Add the following between the <*head>...<*/head> tags of all HTML documents that you want to reference the external style sheet. CSS Background Color Set the background color with the CSS equivalent to HTML's bgcolor.
Now, all of your HTML documents will use the styles from your external style sheet resulting in a consistent look and feel. If you want to change anything, you only need to update the external style sheet.
CSS bgcolor
You may be familiar with the HTML bgcolor attribute. This attribute (which is now deprecated) allows you to set the background color of HTML elements such as the TABLE element or the BODY element.
Although there is no CSS bgcolor property or attribute, there is the CSS background-color property. background-color is the CSS equivalent to the HTML bgcolor attribute. Actually, the CSS background-color property is more powerful than the HTML bgcolor attribute - it can be applied to any element.
Example
CSS leading
If you're a desktop publisher, you would be familiar with the term "leading". Applying leading to a paragraph of text adds space in between each line.
Fortunately you can use CSS to apply leading. The trick to remember is that there isn't actually a CSS 'leading' property. CSS has called it line-height.
To apply leading (or line-height) in CSS
The above line-height declaration would result in body text with the following leading:
CSS align
You may be familiar with the HTML ALIGN attribute which can be used with tags such as TABLE, TD, IMG. This attribute allows you to align elements horizontally. HTML also has a VALIGN attribute for aligning elements vertically.
There isn't actually a CSS ALIGN or CSS VALIGN property. Instead, CSS has the text-align which applies to inline content of block-level elements, and vertical-align property which applies to inline level and table cells.
CSS text-align example
The CSS text-align property applies to the contents of the block-level element - it doesn't need to be text. For more information on usage, see the text-align property page.
CSS vertical-align example
Note that at the time of writing, browser support for vertical-align was limited. For more information on usage, see the vertical-align property page.
CSS Table Width
Even if you use CSS exlusively to control your layouts, there may be times where an HTML table is still required (for example, to present tabular data). You can still use CSS to control the table width, borders, background and other properties.
To use CSS to control the table width, use the CSS width property. For example:
If you're using an external style sheet for your CSS, table width can be declared there too - just call its class. For example:
CSS Hyperlinks
You can use CSS to change the appearance and behavior of hyperlinks.
To do this, you can use the following selectors/pseudo-classes:
* a
* a:link
* a:visited
* a:hover
* a:active
These selectors/pseudo-classes represent the 'anchor' element (specified using the HTML 'a' tag) and its various states.
Examples
Some nice effects can be achieved by using the text-decoration property in conjunction with the color property.
Here's an example of the code that you might insert into a style sheet to achieve the desired effect.
Note that the a:hover must be placed after the a:link and a:visited rules, since otherwise the cascading rules will hide the effect of the a:hover rule. Similarly, because a:active is placed after a:hover, the active color (red) will apply when the user both activates and hovers over the 'anchor' element.
Hyperlinks with no underline.
It can confuse your users if your hyperlinks aren't underlined. A more usable solution would be only to apply this behaviour to hyperlinks only when users hover over them.
Cursor effects
Try it yourself !
CSS Reference
