CSS Tutorial: Cascading Style Sheets (CSS) Classes and ID's
Classes and ID's are used much the same way in CSS. However,
classes are often used to identify groups of selectors, while ID's are used
to identify one selector or element. Class is used for plain HTML documents,
while ID's are usually used for documents that contain JavaScript or Dynamic
HTML (DHTML).
A class is created, as explained above, with the use of a period and a codeword
for the class. An ID, however, is denoted with the # symbol, followed by
the codeword. So, using our example above, if you wanted to use an ID instead
of a class, you would change .leftcolumn to #leftcolumn.
You can use either classes or ID's with just about any HTML tag. It can be
used with the <i></i>, <u></ul> and
<p></p> and many others. Furthermore, even if you use tables
in your HTML, you can define how those tables behave using classes and ID's
in CSS as well, however, that is more advanced.
Linked Style Sheets
Thus far, we have covered how to use embedded CSS. Embedded
CSS goes directly into the <head></head> tags of the HTML code.
However, one of the wonderful things about CSS is that it can help you to
quickly create or change web pages. In this case, you really need to use
a separate CSS document along with your HTML document.
For instance, you wouldn't want to place the CSS within the HTML document,
as if you need to make any changes to your design, you would have to change
every single HTML document on your web site to make them all look the same.
For this reason, you will be much better off creating a Cascading Style Sheet
(CSS) file and then link to it within your web pages. This will enable you
to change your background color, link colors, or whatever you'd like simply
by changing the code within your CSS file. The changes you make will
automatically affect all of your web pages.
Linking to a Cascading Style Sheet within a Web Page
Linking your web pages and CSS pages together is incredibly
easy. Let's start with the HTML. The HTML document that we started with
was:
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<DIV class="rightcolumn">
<H1><u>This Is
Content</u></H1>
<p>This is content that others will be able
to see when they visit your webpage. When content is pasted in, it won't
have any formatting. It will just be text that reads from left to right,
in one long paragraph. It should have a heading, followed by the actual content.
</p>
<p>In this section, you will learn how to
<b><i>format</i></b>
the text so that it is easier to read and understand. Use any article or
content that you have written, and simply copy and paste it into the HTML
document that you have created.
</p>
</DIV>
</body>
</html> |
Now, in the <head></head> tag, we want to link to the style sheet
by adding the following:
| <link type="text/css"
rel="stylesheet" href="mycss.css"> |
The above code will look something like this within your HTML code:
<html>
<head>
<title>Your Page Title</title>
<link type="text/css" rel="stylesheet"
href="mycss.css">
</head>
<body>
<DIV Class="leftcolumn">
<a href="link1.html>Link 1</a><br>
<a href="link2.html>Link 2</a><br>
<a href="link3.html>Link 3</a><br>
<a href="link4.html>Link 4</a><br>
</DIV>
<DIV class="rightcolumn">
<H1><u>This Is
Content</u></H1>
<p>This is content that others will be able
to see when they visit your webpage. When content is pasted in, it won't
have any formatting. It will just be text that reads from left to right,
in one long paragraph. It should have a heading, followed by the actual content.
</p>
<p>In this section, you will learn how to
<b><i>format</i></b>
the text so that it is easier to read and understand. Use any article or
content that you have written, and simply copy and paste it into the HTML
document that you have created.
</p>
</DIV>
</body>
</html> |
For our example web page, that is all of the HTML we
need. Now, we need to make our style sheet. All the style sheet requires
is the elements that pertain to the HTML document. Unlike HTML, a style sheet
does not require any special tags at the beginning or end of the document
to indicate a beginning or ending - it simply needs the elements that pertain
to your web page.
Also note, you do not have to tell the web browser what
it is seeing. Since the CSS isn't embedded, you don't need to include the
following tag:
| <style type= "text/css"
title="mycss" media="all"> |
However, if you would like to define the title of the
style sheet and the media that should dictate how your pages are displayed,
you can also choose to include it.
Finally, here is our finished style sheet to go along with the finished HTML
document above:
body { background-color: 000000;
color: ffffff;
margin: 100px;
font-family: Arial, Georgia, "Times New Roman", Verdana, Sans-Serif;
font-size: 12px;
Line-height: 160%
}
H1 { color: ff0000; font-family: Arial, "Times New Roman"; }
ul {list-style-image: url (images/bullet.gif)}
a: link {color: #008000; text-decoration: none}
a: visited {color: #cccccc; text-decoration: none}
a: active {color: #ff0000; text-decoration: underlined}
a: hover {color: #3300ff; text decoration: underlined}
.leftcolumn { position: absolute; width: 150px; top-margin: 20px; left-margin:
10px; background-color: #009900 }
.rightcolumn { position: absolute; top-margin: 20px; left-margin: 150px;
background-color: #FFFFFF } |
The above text should be placed within any text editor,
and saved as mycss.css - this document and the HTML document, which is named
index.htm or index.html should be uploaded to a web server. That's all there
is to it.
Now that you see how easy using and implementing CSS is, you can have the
ability to create and edit the style of your web pages very quickly.
In the following pages, you will find a CSS property index that will greatly
help you understand what you can do with CSS. Note that these are not the
only possible properties. There are literally thousands of different properties
that can be used in CSS.
 |
 |
Previous |
Next |
 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
Web Development Tutorials
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
|
|
