Tutorial Using Classes with HTML & CSS

tooltiperror

Super Moderator
Staff member
This tutorial is aimed at teaching you how to use Classes with HTML & CSS in order to produce different kinds of styles, and ultimately create your own stylized tags. You can use the knowledge you acquire in this tutorial to use things like 'span' tags and associate them with CSS to create styles within your page.

Requirements:
- Basic Knowledge of HTML & CSS
- An HTML Editor (Online & Real Time)

Alright, here's an example. We have this snippet of CSS in our document.

Code:
<html>
	<head>
		<style type="text/css">
			p
			{
				color:red;
			}
		</style>
	</head>
	<body>
		<p>I am red!</p>
	</body>
</html>
Of course, it would produce these results.

I am red!

However, let's say we wanted to have some paragraphs be red, and some be blue. Then we have a problem. We would need to do something like this, and just use individual styles for each instance of the <p> tags, like this.

Code:
<html>
	<head>
	</head>
	<body>
		<p style="color:red;">I am red!</p>
		<p style="color:blue;">And I am blue.</p>
	</body>
</html>
I am red!

And I am blue.
Of course, doing this will become time consuming, and rather obnoxious. Especially because we may have many more things than just text color, we could be making <div> tags that have drop shadows and curved borders and a lot of other complicated things. Luckily, there is an answer to our prayers, and that is classes. Let me start with the syntax for classes in CSS.

Code:
	tag.classname
	{
		attributes;
	}
You can then assosciate an instance of a tag with the class like this.

Code:
	<tag class="classname">Ahoy, World!</tag>
It's easier to understand with an actual example. Here is the "I am Red" and "I am Blue" example from above using classes.

Code:
<html>
    <head>
        <style type="text/css">
            p.red
            {
                color:red;
            }
            p.blue
            {
                color:blue;
            }
        </style>
    </head>
    <body>
        <p class="red">I am red!</p>
        <p class="blue">And I am blue.</p>
    </body>
</html>
I am red!

And I am blue.

Now, this becomes incredibly useful with things like, as I mentioned above, stylized <div> tags (props to the cssdesk for the tags).

Code:
<html>
	<head>
		<style type="text/css">
		div.fancydiv
		{
			background-color: #fff;
			margin: 0 auto;
			width: 200px;
			padding: 100px;
			text-align: center;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
			-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
			box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
		}
		</style>
	</head>
	<body>
		<div class="fancydiv">This is quite a fancy div.</div>
	</body>
</html>

I hope this tutorial has showed you how to use classes with CSS and HTML. They're pretty simple, and this is just a basic tutorial, but it should show you pretty clearly how to use them. Here's some other things you can use them for.

I've attached several examples of using classes, including examples of the WC3C fancy User Titles and how they themselves use classes.
 

Attachments

GooS

Azrael
Looks nice :)

You should extend it a bit with, don't really know what to call it, sub-selectors for nesting. So that all paragraphs under a specific section gets styled in its own way.

Code:
#header p{
  color: #f00;
}
#content p{
  color: #00f;
}

<div id="header">
  <p>This is a header paragraph</p>
</div>
<div id="content">
  <p>This is a content paragraph</p>
</div>
and perhaps base-selectors, so there's no need for redeclaring every attribute for each class.

Code:
p{
  font: normal normal 14pt Verdana, sans-serif;
  text-decoration: underline;
  color: #ccc;
}
p.red{
  color: #f00;
}
p.blue{
  color: #00f;
}

<p>This is a base p paragraph</p>
<p>This is a red p paragraph</p>
<p>This is a blue paragraph</p>
This is a base p paragraph
This is a red p paragraph
This is a blue paragraph

And lastly some multiple selector funtime, good for spriting and some other stuff.
Code:
#linkbar.link{
  background: url(image.png);
  background-repeat: no-repeat;
}

#linkbar.link.mainlink{
  background-position: Xpc Ypx;
}
<div id="linkbar">
  <div class="link mainlink"></div>
</div>
So that only background-position has to be redeclared for each sub-selector of background.link.
 

UndeadDragon

Super Moderator
Staff member
To me it looks like this tutorial has a huge gap in it. For example, it goes from "color: red" to full CSS3 drop shadows and such.
 

tooltiperror

Super Moderator
Staff member
It's not here to teach you CSS, it's here to teach you classes :)
 
General chit-chat
Help Users
  • No one is chatting at the moment.
  • Ghan Ghan:
    Test!
  • tom_mai78101 tom_mai78101:
    I must be in a test server.
  • tom_mai78101 tom_mai78101:
    Nice, Twitter tweets embedding now works
  • Wizard Wizard:
    Yup.
  • Ghan Ghan:
    Excellent.
  • Ghan Ghan:
    @tom_mai78101 Hello there.
  • Ghan Ghan:
    Tagging works in the chat too.
  • tom_mai78101 tom_mai78101:
    @Ghan Missed it.
  • Wizard Wizard:
    Still fixing things here and there. Added widgets to the portal, will make it match the ones here on the forum index tomorrow.
  • Ghan Ghan:
    The venerable World Editor Tutorials site has been converted to HTTPS at last.
  • jonas jonas:
    cool
  • jonas jonas:
    and I can even edit my messages, nice
  • seph ir oth seph ir oth:
    GENERAL CHIT CHAT, YOU ARE A BOLD ONE
  • Ghan Ghan:
    Hello there
  • The Helper The Helper:
    this new chatbox is great and the forum software update is great too
    +1
  • The Helper The Helper:
    upgrade has fixed forum registration spam problem
  • tom_mai78101 tom_mai78101:
    Something tells me we might be able to customize the chatbox a bit, considering that there's a gap under every message.
  • Wizard Wizard:
    Going to deploy a fix soon, just had to take some time for myself this weekend.
  • Varine Varine:
    Unbelievable. Time for yourself? How dare you!
  • Wizard Wizard:
    xD
  • tom_mai78101 tom_mai78101:
    Hm, it is now harder to type anything on an Android phone. Pressing Backspace or Enter keys will dismiss the Android keyboard for some reasons.
  • tom_mai78101 tom_mai78101:
    Just noticed there's a delay of at least 2 minutes before each post. Guess I can't post Headline News quickly as I used to.
  • tom_mai78101 tom_mai78101:
    As far as I can tell, there are definitely things I need to get accustomed to first.
  • Varine Varine:
    FCC is cracking down recently

    Members online

    No members online now.

    Affiliates

    Hive Workshop
    Top