Guide to classes and id's in HTML & CSS

Posted on Tue, 2010-01-26 17:09

Classes

A class can be applied to any HTML element to allow you to easily target it using CSS to add styling and change the way it is presented to the user. In CSS classes are selected using a full stop followed by the name of the class.

HTML

<?php<div class="classname">
  <p>This is some text in a paragraph tag.</p>
</div>?>

CSS

<?phpp { font-size: 12px; }
.classname { border: 1px solid #ddd; }
.classname p { font-size: 14px; }?>

This would display like this:

This is some text in a paragraph tag.

The original p selector in the CSS is overwritten by .classname p, so the font size of any p tag within a parent with a class of classname will be 14px.

If you were to have two paragraph tags within the div but wanted them styled slightly differently, then you could add a class to one of the paragraph tags.

HTML

<?php<div class="classname">
  <p class="large">This is slightly larger text.</p>
  <p>This is some text in a paragraph tag.</p>
</div>?>

CSS

<?phpp { font-size: 12px; }
.classname { border: 1px solid #ddd; }
.classname p.large { font-size: 14px; }?>

This is slightly larger text.

This is some text in a paragraph tag.

As you can see the first paragraph is larger than the second paragraph. This is because the second paragraph is picking up the default font-size that we specified in the CSS file. The first paragraph is using a larger font size due to the CSS rule .classname p.large.

Classes can be reused as many times as you like in an HTML document. If you have a constant style that you wish to apply on elements through the page, you can create a single CSS class and reuse it.

Id's

Id's can be styled in much the same way a class can, but rather than using a full stop as a selector, we use the hash tag (#). Unlike CSS classes though, an Id can only be used once per page. The benefit of using Id's is that you can link to them with anchor tags.

HTML

<?php<div id="tut_header"><p>Site name</p></div>
<!-- Insert random HTML -->
<p><a href="#tut_header">Back to header</a></p>?>

So if you had a long page of content, clicking the link will make the page move up so that the div with the id tut_header will be the top most point. Using ids can be useful for creating 'Back to Top' buttons.

Comments

Sven

Wed, 2010-02-17 12:07

Thanks for sharing you knowledge on CSS.

I have a site with a CSS "template", but it does not work well with "a name" tags. If the page is called like this "http://mysite.com/index.php#section4" then everything before that is cut of and the section is "lifted" to the top. I have tried with "div id", but with no luck.

It is very annoying and ruins the site :(
Any suggestions on what I can do to fix this?
Any help would be greatly appreciated.

admin

Thu, 2010-02-18 10:21

@Sven, when using anchors the page will scroll to the ID defined in the URI. If the scrollbar isn't showing up properly and you are losing everything above it, there is something wrong with your CSS.

Sven

Thu, 2010-02-18 17:37

@James

Thank you for taking the time to reply.

I surely have made an error with CSS, but I do not know where. My CSS "template" look like this (and the anchor are in the main part:

+++++++++++++++++++++++++++++++++++++++++++++
+ TOP +
+++++++++++++++++++++++++++++++++++++++++++++
+ TOP 2 +
+++++++++++++++++++++++++++++++++++++++++++++
+ + + +
+ + + +
+ MAIN + LEFT + RIGHT +
+ + + +
+ + + +
+++++++++++++++++++++++++++++++++++++++++++++
+ FOOTER +
+++++++++++++++++++++++++++++++++++++++++++++

If you or someone else want to take a look and point me in th right direction, the site is here (I don't want to "spam" your site so I have added an extra space):
knut .com/lover_og_regler/barneloven.html

admin

Thu, 2010-02-18 19:11

@Sven, I have had this problem before. In your CSS file "stil3.css" you need to remove the overflow: hidden; line from #wrapper (line 142).

Sven

Fri, 2010-02-19 00:28

@James

Oh, this is GREAT, it works now! Thank you so much for taking time to solve this mystery for me. Appreciate it.

Now I just hope that I do not break anything by removing it from my CSS ;)

NB
I have subscribed to your RSS so "I'll be back"

Sven

Fri, 2010-02-19 23:28

In case somebody googles this page for solution to the same problem: the anchors are now working fine (thanks to James) but there is a huge empty space below the footer.

It seems that a lot of people out there also have the same problem, but I can find no complete fix.

Maybe the best thing to do is to upgrade the whole CSS completely?

Create a basic ...

Fri, 2010-04-02 14:52

[...] on from the Guide to classes and ids in HTML and CSS, we will create this basic 2 column [...]