Welcome to the Community Resource!
Blog Alerts: Register Today! | Categories:
Now Reading: CSS and HTML classes explained | Jump To Comments


Avatar

You'll need to know this if you're going to use the trick I described below for rollover images, othewise the settings you define for your links will apply to all of your links across the blog.



In your template code, you'll notice at least two types of link definition - one is just the normal:



a:link {



and there's another:



a.menu:link {



Well, the second one, a.menu, has made a 'menu' class for the links. Think of it as your 'label' or 'name', and then later on, you can call on whichever one you want by using the name. You name the class with CSS, and you call on it with HTML later on.



So, an example...



a link { color: #black; text-decoration: none; } // this defines the

colour (black) and the text decoration (none) for normal links



a.menu:link { color: #red; text-decoration: underline; } // this

defines the colour (red) and the text decoration (underlined) for

links in the menu



So you've set these both. Now you want to place your links and call on

them. To call on the normal style link, you just use;



< a href="www.blah.com"> link < /a>



And to call on the menu style link, you use;



< a class="menu" href="www.blah.com"> link < /a>



So the first link will be black and not underlined, and the second

link will be red and underlined.



You can call your classes whatever you want - the example I used is

taken from the blog template code, where they've called the second

class 'menu' because it's specifically for links that appear in the

menu column, so they're easily identified.



So, if you're creating a set of definitions (that is, if you're saying that a particular area of your blog is to have certain style rules applied to it), then use classes and name them appropriately to make them easy to track!

By Welsh Pixie on Friday, September 21, 2007 | Comments: <%EntryCommentCount%>







© 2003 - 2007 EFx2Blogs | Privacy Policy | Terms Of Service | Credits | Design Modifications By: LazyBoy