Tutorial Using Classes with HTML & CSS

Discussion in 'Webmaster Tutorials and Resources' started by tooltiperror, Sep 19, 2010.

  1. tooltiperror

    tooltiperror Super Moderator Staff Member

    Ratings:
    +233 / 0 / -0
    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>
    
    [​IMG]

    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.
     

    Attached Files:

    • Like Like x 1
  2. GooS

    GooS Azrael

    Ratings:
    +153 / 0 / -0
    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.
     
    • Like Like x 1
  3. UndeadDragon

    UndeadDragon Super Moderator Staff Member

    Ratings:
    +450 / 0 / -0
    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.
     
  4. tooltiperror

    tooltiperror Super Moderator Staff Member

    Ratings:
    +233 / 0 / -0
    It's not here to teach you CSS, it's here to teach you classes :)
     

Share This Page