10 Great CSS Selectors you must know. Selectors define which part(s) of your (X)HTML document will be affected by the declarations you’ve specified.
Several types of selectors are available in CSS. Note that some of them are not supported in all browsers. Element Selectors The most basic of all selectors is the element selector (you may have heard them called tag selectors). It is simply the name of an (X)HTML element, and—not surprisingly—it selects all of those elements in the document. We’ve used h1 and h2 as selectors. Note: Although this book is about using CSS to style (X)HTML documents, CSS can be used for other types of documents as well (notably XML). Class Selectors So far we’ve been assigning styles exclusively to (X)HTML elements, using element selectors. <h1 class="warning">Be careful! Here, we’ve specified a class of warning to both the h1 element and the p (paragraph) element. This CSS will apply the styles noted in the declaration (a red, bold font) to all elements that have the class name warning. ID Selectors. 5 Ways to Instantly Write Better CSS.
Sure, anyone can write CSS.
Even programs are doing it for you now. But is the CSS any good? Here are 5 tips to start improving yours. 1. Reset Seriously, always use a reset of some sort. It can be as simple as removing the margin and padding from all elements: The Eric Meyer and YUI Resets are awesome, but to me, they just go too far. Oh and please, stop this: It takes more time to process, and what do you think should happen to a radio button when you remove the padding?
2. A Little Quiz Which example would you think is faster to find the margin-right property? Example 1. Css sprites. Advertisement CSS Sprites are not new.
In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load. And if you haven’t heard of CSS sprites before, now is probably a good time to learn what they are, how they work and what tools can help you create and use the technique in your projects. What Are CSS Sprites? The term “sprite” (similar to “spirit,” “goblin,” or “elf”) has its origins in computer graphics, in which it described a graphic object blended with a 2-D or 3-D scene through graphics hardware. Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the hardware controllers.