Archive for id
Find CSS Element Stats with XRAY Bookmarklet
Posted by: | Comments
This bookmarklet is perfect for anybody who spends any time working on web site layouts. XRAY is used to see the box model for any element on a web page. It will dim the area not selected, and give you statistics such as the CSS id or class assigned to it, the interface hierarchy, and the CSS code assigned to that section.
With that said, it is the perfect browser companion for people who pull up a web site and wonder, “how did they do that?” because it tells you everything right there on the web page. It works with Internet 6 and up, and every Webkit and Mozilla-based browser out there today (that includes Safari, Firefox, Camino and more).
To use it, all you have to do is drag the bookmarklet to your bookmarks toolbar. When you are on a site you want to see more about, click the bookmarklet and the semi-transparent XRAY window will pop up with all the information you could ever want. Go give the XRAY bookmarklet for webmasters a test drive yourself (then save it for your own CSS snooping) over at westciv.com/xray/.
Like This Article? Listen to it and more like it on podcast #199 of the Web Hosting Show!
Add me on Twitter! Come follow my daily antics, links, tips and more @mitchkeeler on Twitter!© Mitch Keeler 2010 | Check out my firefox help site and my tech blog too!
ID vs Class in CSS Web Design
Posted by: | CommentsFor anybody who has spent any time working with CSS (cascading style sheets), you have to know there is a lot of confusion when it comes to using an id or a class when compiling your web site layout. Both are selectors, but how should they be used?
What is the ID selector?
The general syntax for an ID selector is:
#idselector {property:value;}
This should really only be used once per web page. For example if I was designing a standard site with the body of the page on one side and the sidebar on the other side, I would use two different ID selectors, one for the body and one for the sidebar. I wouldn’t use the body one twice, because it already covers everything it needs to cover (as far as styling goes) the first time I used it. You can use it to cover a lot of things in one clean sweep, all at once.
What is the Class selector?
The general syntax for a Class selector is:
.classselector {property:value;}
The Class selector is to be used for defining smaller elements within the ID selector. Going back to my earlier example, lets say I wanted to define how my headline tags looked – and my links for that section of the web page. I would then turn around and use a Class selector for each of those. Think of this as the “picky” selector, allowing you to tweak things within the ID selector.
In a nutshell, you should use the ID selector when there is only one occurrence per web page, and the Class selector when there are more than one occurrence per web page. What happens if you do it the “wrong way”, well nothing really – of course learning how to use your web design tools the right way, rather than just to hack it all together, will help with troubleshooting error sand problems down the road.
Bonus: Check out the 60+ CSS Web Design Resources we collected on blog.lunarpages.com!