Using Classes with HTML & CSS

tooltiperror

Super Moderator
Reaction score
231
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>
25gruk2.png

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

  • classes.txt
    298 bytes · Views: 379
  • header.txt
    229 bytes · Views: 357

GooS

Azrael
Reaction score
154
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
Reaction score
448
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
Reaction score
231
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.

      The Helper Discord

      Members online

      No members online now.

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top