 |
|
|
||
Browser View:
|
| <STYLE> <!-- A:active { color:#0000FF; text-decoration; } A:hover { color:#FF0000; text-decoration: none; } //--> </STYLE> |
Browser View:
Example Link
(Place your mouse over the link to view this example.)
The above code will display all of your
links in a specific style.
Notice the code is placed within the comment tags? Comment
tags look like this:
<!--your text-->
The comment tags are used to prevent older browsers that don't
support style tags from displaying the CSS codes within their
page.
The great thing about embedding style codes is that you can
create your own classes of code. What this means is that you
can specify different styles throughout your page and then
call them within your page.
For example, you can add a class of code to a paragraph selector
like this:
| <STYLE> <!-- p.padding {padding-left: 5px; padding-right: 5px; font-family: Arial; font-size: 10px;} //--> </STYLE> |
Notice the text highlighted in bold?
This is a class name I made up. You can call it whatever you'd
like. Simply add .yourtext following your selector.
To put this style into action or call it, simply place
the following code within your HTML where you would like the
style to be used:
| <p class="padding"> |
Keep in mind, the text you place after
your CSS selector (.yourtext) must be the same name
as the code you place to call the style.
For example, if your class code looks like this:
p.text
the code you use to call the style will look like this:
<p class="text">
See how that works?
The linking CSS method involves creating
a file that defines specific styles. This CSS file can be
used throughout your entire web site to specify everything
from body styles and headings to paragraphs and HTML tables.
This file might look something like this:
| BODY {font-family: Arial; font-size: 12px;} H1 {font-family: Georgia; font-size: 16px; font-weight: bold; color: blue} P { font-weight: normal; color: blue} |
This file should be saved as style.css
and uploaded to your server where you store your HTML files.
When using a style sheet, you must place a link to your style.css
file within your HTML between your <HEAD> and </HEAD>
tags like this:
| <html> <head> <title>Your Page Title</title> <link rel=stylesheet href="http://www.yourdomain.com/style.css" type="text/css"> </head> <body> Page Content </body> </html> |
You can link to your style sheet within
as many of your pages as you would like. This will give you
the ability to update all of your pages at one time, simply
by changing the styles within your style.css file.
 |
|
Next |
An
Introduction to Cascading Style Sheets
Creating
a Basic HTML Page
Using
Cascading Style Sheets (CSS) to Specify Web Page Formatting
Manipulating
Bulleted and Numbered Lists with Cascading Style Sheets (CSS)
Formatting
Hyperlinks with Cascading Style Sheets (CSS)
Creating
Tables within a Web Page with Cascading Style Sheets (CSS)
Cascading
Style Sheets (CSS) Classes and ID's
Cascading
Style Sheet Codes Chart - Property Index
 |
 |
 |
Advertise
With Us!
:
An Introduction to Cascading Style Sheets
