[Beginner] Classes - Weborum Webmaster Forum

Welcome Guest, Register to Remove this Message!

[Beginner] Classes, Applying classes in CSS

Options

Joe

Feb 7 2004, 05:05 PM

Post #1

* legend *
Group Icon

Group: Moderators
Posts: 5165
Joined: 31-January 04
From: The Valleys
Member No.: 8

nope, this isnt anything to do with the ones you had in schools

classes in CSS is a way to add 2 different styles to the same tag, from this little tutorial hopefully you will understand what i mean.

CODE

<head>
<style type="text/css">
a:link {
color: #000000;
font-weight: bold;
}

a.different:link {
color: #FFFFFF;
font-weight: normal;
}
</style>
</head>

now you will see in here there are two different link colours and font weights, by adding classes we can create two different styles of links

in your body section where you want your links to appear, for those links you want to make black and bold (a:link) you use the normal a href code
<a href="link.html" target="_blank">link here</a>

but for the link that you want to be white and normal size font you add the class to the a href like so:
<a class="different" href="link.html" target="_blank">another link here</a>

and now you will see that this is a different type link to the one above. you can add classes to all tags but you must remember to specify the classes on the actual tags in the body of your page

I hope you understand the use of classes, if not then please dont hesitate to post a question here.

Joe

This post has been edited by joe2kiss: May 18 2004, 09:34 AM

--------------------

[http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more...
[http://www.rough-draft.co.uk/] My NEW webdesign portfolio.

Read my Weblog.

Joe

May 17 2004, 10:28 PM

Post #2

* legend *
Group Icon

Group: Moderators
Posts: 5165
Joined: 31-January 04
From: The Valleys
Member No.: 8

Lets add some classes to containers

again, you can either specify the CSS inside the head of the document or you can apply the CSS by using the style="" attribute, i will cover both in this tutorial

CODE

<html>
<head>
<style type="text/css">
div.large {
width: 400px;
border: 1px solid black;
font-family: Arial;
font-weight: bold;
}

div.small {
width: 50%;
border: 0px;
font-size: 18px;
}
</style>
</head>

<body>

<div class="large">
any content inside here will be Arial font and bold. The container will have a 1pixel black border and will stretch no further that 400px
</div>

<div class="small">
all content in here is going to be the default font since we have not specified any but will be 18px in size. The container will have no border and will always stay 50% of the screens resolution
</div>
</body>
</html>

Now lets use the style="" attribute to apply the same CSS code

CODE

<div style="width: 400px; border: 1px solid black; font-family: Arial; font-weight: bold;">
any content inside here will be Arial font and bold. The container will have a 1pixel black border and will stretch no further that 400px
</div>

<div style=" width: 50%; border: 0px; font-size: 18px;">
all content in here is going to be the default font since we have not specified any but will be 18px in size. The container will have no border and will always stay 50% of the screens resolution
</div>

now you see how the same CSS has been applied.

Giving classes to certain tags can help when you have large amounts of text and you want certain parts to be different than others

<body style="font-family: Verdana; font-size: 12px;">
All text on this page now will be Verdana font 12pixels in size, if you had your stylesheet linked to all pages and you weren't using style="" then you would have alot of unnessecary coding. Lets give all pages different formatting;

We have linked to our stylesheet like so;
<link rel="stylesheet" type="text/css" href="style.css" />

If you don't understand linking to an external stylesheet refer to this tutorial.

in our style.css page we will give each body of each HTML page a class

CODE

body.one {
background-color: #000;
font-family: Verdana;
font-size: 12px;
}

body.two {
background-color: #FFF;
font-family: Arial;
font-size: 16pt;
}

body.three {
background-color: red;
font-weight: 200;
padding: 2px;
}

now we must remember to link to the stylesheet in each of our HTML page and then we also call the classes into each tag.

<body class="one">
<body class="two">
<body class="three">

the body tag with the class="one" will have:
background-color: #000;
font-family: Verdana;
font-size: 12px;

the body tag with the class="two" will have:
background-color: #FFF;
font-family: Arial;
font-size: 16pt;

the body tag with the class="three" will have:
background-color: red;
font-weight: 200;
padding: 2px;

Giving classes can remove much unnessacary code and adding many different styles to tags

Remember, anything you don't understand or want explaining in more detail just ask

This post has been edited by joe2kiss: May 18 2004, 06:40 PM

--------------------

[http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more...
[http://www.rough-draft.co.uk/] My NEW webdesign portfolio.

Read my Weblog.

Joe

May 18 2004, 08:13 PM

Post #3

* legend *
Group Icon

Group: Moderators
Posts: 5165
Joined: 31-January 04
From: The Valleys
Member No.: 8

applying a class to span tags

when writing much text, you may want to hightlight an important section of text by making it underlines/bold or whatever formatting you feel would catch the users attention

using CSS (classes) to do this may be a good idea, it saves on writing out many style="" tags and attributes on each section of text you want people to read

CODE

now by looking at this code you will notice we have 2 different classes, heading and important, lets add this into our text

QUOTE

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah <span class="heading">heading here</span> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah <span class="important">important text here that you want peolpe to see</span> blah blah blah blah blah blah blah blah blah </span>

now you see that your heading will be 18pixels in size and your important text will be underlined and bold, now our styles are in the CSS you can call the styles into other sections of text aswell, as many times as you like

This post has been edited by joe2kiss: May 18 2004, 08:14 PM

--------------------

[http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more...
[http://www.rough-draft.co.uk/] My NEW webdesign portfolio.

Read my Weblog.

Justin Case

May 20 2004, 04:50 PM

Post #4

Junior Member

Group: Banned
Posts: 204
Joined: 1-February 04
From: Finland
Member No.: 9

defining the element isn't necessary

CODE

.classname {
/* properties */
}

alternatively, you can define a list of elements that the class applies to

CODE

element1.classname, element2.classname {
/* properties */
}

--------------------

Chodehåkama Schneider

Joe View Member Profile	May 20 2004, 05:25 PM Post #5
* legend * Group: Moderators Posts: 5165 Joined: 31-January 04 From: The Valleys Member No.: 8	that would make element1.classname, element2.classname { have the same properties, the purpose of this tutorial is to show how to give different tags different properties in CSS i am aware that you do not need to define a tag but for the purpose of this tutorial i was using one, as you can see this is aimed at beginners, it is sometimes easier to remember specifying the tag also -------------------- [http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more... [http://www.rough-draft.co.uk/] My NEW webdesign portfolio. Read my Weblog.

Josh View Member Profile	May 20 2004, 05:31 PM Post #6
Facetious Group: Members Posts: 2402 Joined: 3-February 04 From: NC Member No.: 12	You're right joe, but it still does the same thing without the tag name in front of it. -------------------- Vertex-Games.com - Free Addicting Games \| Fun Addicting Games

leo

May 20 2004, 05:48 PM

Post #7

Professional newbie
Group Icon

Group: Admin
Posts: 7238
Joined: 8-October 03
From: in the backroom counting up your visitors
Member No.: 4

QUOTE (joe2kiss @ May 20 2004, 05:25 PM)

{[/i] have the same properties, the purpose of this tutorial is to show how to give different tags different properties in CSS

spot on

i guess it's a matter of preference but i dont use element1.classname, element2.classname {
ever, it makes it all too confusing and will cause your pseudo classes to not work properly if you either have a lot or have complicated ones, which i do

--------------------

Get Tough - Take photoshop by the horns - photoshop tutorials
whatcounter.com - free hit counter - quality stats about your website rivalled by nothing else.
TinyShortURL - Free URL shortening service
myIp.weborum.com - What's my IP ?
sms.weborum.com - Free US sms messages for Weborum members

Justin Case

May 21 2004, 01:26 PM

Post #8

Junior Member

Group: Banned
Posts: 204
Joined: 1-February 04
From: Finland
Member No.: 9

hi Joe,
I was just showing alternatives.

QUOTE

that would make element1.classname, element2.classname { have the same properties, the purpose of this tutorial is to show how to give different tags different properties in CSS

It could be handy if you need to do something like h1.classname, h2.classname etc. to give all headings, with a certain class name, a certain style.

QUOTE

i am aware that you do not need to define a tag but for the purpose of this tutorial i was using one, as you can see this is aimed at beginners, it is sometimes easier to remember specifying the tag also

I didn't tell that to you, but for those reading this tutorial. Beginners also deserve to know that so they don't go specifying the same styles over and over again for fifteen different elements.

--------------------

Chodehåkama Schneider

Joe View Member Profile	May 21 2004, 03:06 PM Post #9
* legend * Group: Moderators Posts: 5165 Joined: 31-January 04 From: The Valleys Member No.: 8	i agree it is handy if you want to give different tags some of the same attributes, but that will be talked about in more detail in another tutorial which is why i wanted to keep it out of this one i agree, beginners do not want to specify many different attributes, but it is handy to know you can do it this way, if someones building a small site with not much CSS then this would be the way to do it, its when you start getting masses of CSS that it comes in handy -------------------- [http://www.joe2torials.com/] Your guide to (X)HTML, CSS, PHP, ASP, Photoshop, Web Management, Accessibility, Standards, Semantics and much more... [http://www.rough-draft.co.uk/] My NEW webdesign portfolio. Read my Weblog.

« Next Oldest · CSS tutorials · Next Newest »