Your Guide to Professional |
HTML Tips HTML Codes Web Development |
Web Design
Tips JavaScript Codes 216 Web Safe Colors |
CSS
Tutorial JavaScript Tutorial ASCII Character Codes |
| Web Site Development | HTML Codes | HTML Tips | Web Design Tips | Javascript Snippets | 216 Safe Colors | Symbols | CSS Tutorial | JavaScript Tutorial | |
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 |
Note: This tutorial is by Shelley Lowery. For additional tutorials to assist you in web design and much more, click here to sign up for our free membership club. You will instantly receive a wealth of quality information, such as dozens of video tutorials, several informative ebooks, utilities to assist you in creating buttons, tables, meta tags, and more. Best of all, it's completely free. |
An Introduction to Cascading Style
Sheets
Creating a Basic HTML Page
Embedding Cascading Style Sheets
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
Cascading Style
Sheets Tutorial: An Introduction to Cascading Style Sheets
JavaScript
Tutorial: An Introduction to JavaScript
Web
Development: A step by step guide to developing a successful Internet
business
HTML
Codes Chart: Copy and paste HTML codes for your web page
HTML Tips:
Copy and paste special effect HTML codes for your web page
Web Design
Tips: Tips, tricks, and special effect codes for your web page
JavaScript
Code Snippets: Copy and paste special effect JavaScript codes for your
web page
216
Web Safe Color Chart: Hexadecimal and RGB Color Codes for your web page
ASCII Character
Codes Chart: American Standard Code for Information
Interchange character codes chart