CSS Classes and ID’s
CSS 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 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 previous example, 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">
<u><H1>This Is Content</H1></u>
<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">
<u><H1>This Is Content</H1></u>
<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.
This concludes the CSS Classes and IDs tutorial. In the next lesson, you will learn about CSS Tables.