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.
Alright, here's an example. We have this snippet of CSS in our document.
Of course, it would produce these results.
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.
You can then assosciate an instance of a tag with the class like this.
It's easier to understand with an actual example. Here is the "I am Red" and "I am Blue" example from above using classes.
Now, this becomes incredibly useful with things like, as I mentioned above, stylized <div> tags (props to the cssdesk for the tags).
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.
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.And I am blue.
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.
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.
