WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » ID and Class

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted ID and Class Mon Nov 08, 2010 9:59 pm

Unknown Data

Unknown Data
Registered Member
Registered Member
ID and Class
Learn CSS - part 9


The attributes class and ID
By using these to attributes can we specify special properties for selected elements.

Class is normally used if we want to create two (or more) different elements with it's own speciel properties.
ID is used to specifie one unique element property. There must not be two items with the same ID.

Using the class
Let's suppose that we have two departments in a company, department x and y. All links referring to the section x must be red and all links to department y must be yellow.
By using the class element, will our HTML source look like this.
Code:
<html>
<head>
<title>Class</title>
<link rel="stylesheet" type="text/css" href="styleshetclass.css" />
</head>
<body> 
<a href="#" class="x">Link to X nr.1</a>
 
<a href="#" class="x">Link to X nr.2</a>
 

<a href="#" class="y">Link to Y nr.1</a>
 
<a href="#" class="y">Link to Y nr.2</a>
 
</body>
</html>
The associated stylesheet looks like this:
Code:
a {
color: #000000;
}

a.x {
color: #CC0000;
}
 
a.y {
color: #FFFF00;
}
The untouched links will stay black as the default.

Using the ID
I choose to use the example from before. But here are we changing some colors and using the ID instead of the class.
Code:
<html>
<head>
<title>ID</title>
<link rel="stylesheet" type="text/css" href="stylesheetid.css" />
</head>
<body>
<a href="#" id="x">Link to X nr.1</a>
 
<a href="#" id="x">Link to X nr.2</a>
 

<a href="#" id="y">Link to Y nr.1</a>
 
<a href="#" id="y">Link to Y nr.2</a>
 
</body>
</html>
The associated stylesheet looks like this:
Code:
a {
color: #FFFF00;
}

a#x {
color: #33FF00;
}
 
a#y {
color: #FFCC00;
}

You surely have noticed that it's exactly the same as using the class element.

Well let's move further to the next tutorial - DIV and span.

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

http://woops.dk

View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » ID and Class

Permissions in this forum:
You cannot reply to topics in this forum