A “selector” is the instruction in a CSS rule set that tells the browser what elements to ‘select’ for styling. Look at the two examples below:

.box {
	background-color: red;
}

form textarea {
	background-color: blue;
}

In each of those examples, the selector is the part of the rule set that appears before the opening curly brace. “.box” is the first selector and “form textarea” is the second selector.

Selectors Defined with Examples

Here is a brief definition of each type of selector, with examples:

Universal Selector
This selector consists of the asterisk character, like this:

* {
	background-color: red;
}

When used on its own like above, this selects every element on the page.

Element Type Selector
Also called just the “type selector”, this selector matches HTML elements by tag name. Two examples:

h2 {
	background-color: red;
}

div {
	background-color: red;
}

Class Selector
This selects an element that matches a class name defined in a class attribute in the HTML.

.element {
	background-color: red;
}

This is easily my favourite selector, and all good CSS developers should use it abundantly. You can put multiple classes separated by spaces on a single class attribute, which makes this selector quite powerful.

ID Selector
This selects an element that matches an id defined in an id attribute in the HTML.

#element{
	background-color: red;
}

Descendant Selector
This selector is defined with a space character separating two selectors, and represents a child element, but not just immediate children, further nested ones as well.

.parent .child {
	background-color: red;
}

Attribute Selector
This selector targets an element based on an HTML attribute and/or attribute value. Both examples below are valid attribute selectors:

div[style] {
	background-color: red;
}

input[type="text"] {
	background-color: red;
}

The first example targets any <div> element that has a “style” attribute. The second example targets any <input> element that has a “type” attribute with a value of “text”.

Child Selector
This selects an element based on it being an immediate child of another element:

.one > .two {
	background-color: red;
}

So this will not style a “.two” element unless it is an immediate child of a “.one” element. It can’t be nested inside another element, it has to be an immediate child element. And only the child is styled, not the parent.

Adjacent Sibling Selector
This selector, which uses the plus sign, targets elements that are “adjacent” to each other, or immediate siblings, and they must have the same parent element.

h2+p {
	background-color: red;
}

General Sibling Selector
This uses the tilde character and is exactly the same as the adjacent sibling selector except the elements don’t have to be immediate siblings.

h2~p {
	background-color: red;
}

Pseudo-class
While technically falling under the category of “selectors”, these are not normally referred to as “selectors”, but just pseudo-classes. These select an element based on a state the element is in. Here are a few examples:

a:visited {
	background-color: red;
}

input:focus {
	background-color: red;
}

Pseudo-element
Again, not normally referred to as a selector, these actually represent elements in the HTML page that are not really part of the rendered HTML:

p:first-letter {
	background-color: red;
}

p:before {
	content: "";
	background-color: red;
}

The “:before” and “:after” pseudo-elements are unique from other pseudo-elements in that they must be used along with the content property. For more on these, see my article on Smashing Magazine.

If you enjoyed this article, you might also like a post I wrote defining a number of different CSS Terms.

Related posts:

1. CSS3 Attribute Selectors: Substring Matching
2. Things Worth Noting About CSS Attribute Selectors
3. Browser Support for CSS3 Selectors

Let’s look at how shorthand works with some common examples, and I’ll try to explain some of the quirks associated with CSS shorthand.

A Shorthand Example

Declaring a background image is quite common in CSS. A background declaration in shorthand looks like this:

.element {
	background: #fff url(../images/bg-image.png) no-repeat fixed 20px 20px;
}

To understand what’s happening in this shorthand declaration, here is the exact same CSS using longhand:

.element {
	background-color: #fff;
	background-image: url(../images/bg-image.png);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 20px 20px;
}

You can see already why most CSS developers prefer shorthand notation over longhand — the first example condenses five lines of CSS into one.

Simple Shorthand Declarations

Some shorthand declarations work in a very simple way. The example I showed you above with the background property is one of the more complex types (more on that below). But other shorthand declarations are quite easy to understand and work with.

The margin and padding properties are good examples of properties you’ll use often in their shorthand notation. And they’re not difficult to understand:

.element {
	padding: 20px;
}

In this example, although I’ve left out three other values, those values are assumed to be equal to the one value shown. So with this code, all four sides of the targeted element will have 20px of padding.

We can also do this:

.element {
	padding: 20px 10px;
}

In this example, we are declaring the top and right padding explicitly. The bottom and left padding, although not declared explicitly, will assume the same values as top and right — in that order. So the box will have 20px of top and bottom padding, and 10px of right and left padding.

And again, the long-hand equivalent of the example above would look like this:

.element {
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
}

Margins and CSS3′s border-radius property work exactly the same way, except with border-radius we’re dealing with corners instead of sides.

The More Complex Shorthand Declarations

Other shorthand declarations are a little more complicated, but with a few small exceptions, shouldn’t really cause you too many problems once you get the hang of them. The background shorthand declaration I showed you earlier is one example of these.

Other shorthand properties that may trip you up at times include:

• list-style
• font
• border
• outline

CSS3 features that use shorthand using the more complex style of notation include:

• animation
• border-image

So what is it that makes these other shorthand properties more difficult to understand? Well, because these properties accept different types of values (sometimes keywords, sometimes units, etc.), leaving out certain values in a shorthand declaration will often have unexpected results.

Here’s an example using background:

.element {
	background-color: blue;
	background: url(../images/bg-image.png) no-repeat;
}

With the code above, you would expect that the targeted element would have a non-repeating background image set over a blue background. But that will not happen unless we reverse the order of the properties. Because we’ve used background shorthand, this causes all the values associated with the background property to be reset to their initial, or default, state. In this case, the background color becomes “transparent”, overwriting the “blue”.

Avoid Getting Tripped Up

So it’s important to understand that anytime you use one of these more convoluted shorthand declarations, all omitted values associated with that shorthand declaration will be reset to their defaults.

Normally this is not a problem, because with properties associated with backgrounds, lists, padding, etc, those properties aren’t inheriting their values from parent elements. The only place where I have found this can cause headaches is in association with the font shorthand property.

That’s why I did this old screencast (which is a bit out of date now) and created this cheatsheet that discusses some of the problems you might run into when using the shorthand font property. Basically, we expect certain typographical properties to inherit from their parents. But when we use font in shorthand, all the properties associated with that declaration are reset to their initial state, thus losing that natural inheritance.

Another thing that can happen with font shorthand and some other shorthand declarations is that if you omit a mandatory value, the entire line will be ignored by the browser. This is another thing to keep in the back of your mind in case you’re scratching your head wondering why a certain CSS property isn’t having any effect.

Conclusion

Overall, I highly recommend using shorthand whenever you can. The only one that I avoid like the plague is font. I’m perfectly content to use longhand for those, and I think many feel the same way.

It does help to use longhand when you’re first starting out, to get to know each of the individual properties. But for the most part you’ll stick to shorthand once you’ve got a good handle on the syntax for the property you’re using.

Related posts:

1. Should You Ever Use Longhand for Padding and Margins in CSS?
2. What’s the Difference Between Margins and Padding?

Using A Unique Link Class

Probably the most common and easiest way to do this is by simply applying a different class with appropriate styles on the current page link. So in your HTML you would see something like this:

<ul class="nav">
	<li><a href="index.html">Home</a></li>
	<li><a href="about.html">About</a></li>
	<li><a href="services.html">Services</a></li>
	<li><a href="products.html" class="current">Products</a></li>
	<li><a href="contact.html">Contact</a></li>
</ul>

The CSS would then require something like the following:

a:link, a:visited {
	color: blue;
}

a.current:link, a.current:visited {
	color: white;
	background-color: blue;
}

Now all links with a class of “current” will have white text on a blue background, while all other links will have just blue text.

The only thing you have to make sure of is that the location of the class gets changed depending on the page you’re on. For example, the HTML shown above would appear on the “Products” page, but on the “Contact” page the “current” class would be moved to the “Contact” link.

Adding a Class to the <body>

This next method is a lot messier, but is an option if you don’t mind more HTML. You can add a unique class to the <body> tag and then have a different class for each link. The body class would change depending on what page the user was viewing. So on the “About” page, your <body> tag would look like this:

<body class="about">

The HTML for your links would look like this:

<ul class="nav">
	<li><a href="index.html" class="home">Home</a></li>
	<li><a href="about.html" class="about">About</a></li>
	<li><a href="services.html" class="services">Services</a></li>
	<li><a href="products.html" class="products">Products</a></li>
	<li><a href="contact.html" class="contact">Contact</a></li>
</ul>

Then in your CSS you would have the following:

a:link, a:visited {
	color: blue;
}

body.home a.home:link,
body.about a.about:link,
body.services a.services:link,
body.products a.services:link,
body.contact a.contact:link {
	color: white;
	background-color: blue;
}

This includes a separate selector for each nav item. So although the different unique link classes will appear in the HTML on every page, the unique “current page” styles will only take effect on the page that has the matching <body> class.

Final Notes

A few things can be noted about the technique outlined here:

• If you are using PHP (or some other back-end language), you can generate the classes dynamically based on the current page
• Although I’m applying the unique classes to the link elements, you can use the <li> elements if you want
• I’ve seen people use a class of “active” instead of the class of “current” that I’m using here; I think “current” (or something else other than “active”) is better because CSS already has a pseudo-class called :active that means something completely different, so that might be confusing for beginners
• I suppose you could use the :nth-child() pseudo-class to target the current link by number in the list, but that seems a little convoluted and not very convenient or maintainable
• If you want to do this on a WordPress site, this article covers that topic

Related posts:

1. Using CSS3 Text Shadow for Active Link States
2. Scoped Styles in HTML5
3. What’s the Best Way to Add CSS to a Web Page?

Two of the most common selectors used in CSS are the “class” selector and the “ID” selector. There are many others, but this post will focus on these two, and I’ll describe the difference so you’ll know the potential effects of using either of these selectors.

The ID Selector is Very Specific

An ID is defined in your HTML like this:

<div id="element">
<!-- stuff goes here... -->
</div>

And in your CSS you can target the element, and apply styles to it, like this:

#element {
    background: blue;
}

CSS styles are applied based on rules relating to the cascade and specificity. Because this is a post aimed at CSS beginners, I’m not going to go into the gory details of those subjects. If you want to delve into this, there’s a nice article on Smashing Magazine by Inayaili de Leon that might be worth a peek.

The specificity of a selector can have a profound effect on the future maintenance and debugging of your CSS code. So, with that in mind, do realize that if you choose to use the ID selector, you may end up causing specificity issues that will force you later in development to use even stronger selectors. This could easily get out of hand and cause your stylesheet to be less maintainable and bloated.

Styles in a CSS file are supposed to “cascade”. So, theoretically, this should allow styles declared later in your stylesheet to override styles that are declared earlier. But because of more specific selectors (like IDs), this doesn’t happen as often as we’d like.

For example, if you had the following HTML:

<div id="element" class="element">
<!-- stuff goes here... -->
</div>

And CSS:

#element {
    background: blue;
}

body div.element {
    background: green;
}

Even though the body div.element selector appears after the #element ID selector, and despite the fact that the “body” element is included as part of the selector, the background of the element will be blue — not green — because the ID selector is more specific than the second selector, and the natural cascade has been overridden.

It may seem at first glance to be an advantage to have a very specific selector. But in the long run, this is not a good thing. Also, because an ID has to be unique and must only appear once per HTML page, you can’t reuse the styles on an ID selector, so your stylesheet will be much larger if you end up using a lot of IDs.

Class Selectors are Much Easier to Work With

Classes are applied in HTML like this:

<div class="element">
<!-- stuff goes here... -->
</div>

And you target the element in your CSS like this (which, I’ve already demonstrated in the previous section, really):

.element {
    background: blue;
}

Class selectors are, in my opinion, highly underrated and a much cleaner and easier to use option for applying styles to elements. There are a number of reasons for this.

Classes can be reused (you’re not limited to a single class per page, like IDs). This allows you to avoid repeating styles unnecessarily. You can also include multiple classes using a single attribute, like this:

<div class="element class2 class3">
<!-- stuff goes here... -->
</div>

You also have the option to chain your classes using selectors like .element.class2.class3 (notice no spaces between the classes). While this is possible, you should know that this method is buggy in IE6, which is why these types of chained class selectors have been largely avoided for so many years.

And best of all, class selectors are not extremely specific. So a class of .element will override the less specific element selector (e.g. a plain span or div selector), but it will not override other classes — unless it appears after those classes in the CSS.

This is great for maintenance and debugging of your CSS, because when you add new classes to your CSS, you won’t be scratching your head wondering why the styles don’t take effect right away.

Final Notes

So my advice is: Don’t use IDs as CSS selectors unless you have really good, practical reasons for doing so. Use classes abundantly and allow the natural cascade to work its magic.

This doesn’t mean you won’t use IDs. You will still need IDs for in-page links (i.e. fragment identifiers), and for JavaScript and jQuery hooks.

You might think: What if there’s an element on the page that already has an ID (for non-CSS reasons), and it’s an element that you absolutely know is going to be unique and won’t have repeated or reusable styles? Well, in my opinion, even in this case, there is no reason to use the ID selector in your CSS, and you should still use a class instead.

If you take each one as a stand-alone selector, regardless of all other styles and selectors, there is no difference between #element and .element. But when you factor in the negative effects of an ID selector (the non-reusability, the high specificity, the detriment to the cascade), I think the class selector is much more powerful and should be an overwhelming choice.

Finally, if you want to get into some more good reasons to use classes heavily, you can check out my recent Smashing Magazine article covering Object Oriented CSS.

Related posts:

1. What’s the Difference Between “:before” and “::before”?
2. What’s the Difference Between Margins and Padding?
3. The Difference Between “Block” and “Inline”

In my opinion, this is one of those areas that, once understood correctly, can help beginners to take their CSS skills to the next level.

Block-level Elements

A block element is an element that has, but may not be limited to, the following characteristics:

• Without a set width, expands naturally to fill its parent container
• Can have margins and/or padding
• Without a set height, expands naturally to fit its child elements (assuming they are not floated or positioned)
• By default, will be placed below previous elements in the markup (assuming no floats or positioning on surrounding elements)
• Ignores the vertical-align property

So, for a block element, it’s not necessary to give it a set width or to give it a width of 100% if you want it to fill its parent horizontally. In fact, doing either of those things may cause maintainability issues or other undesirable problems.

And, as the fourth item in the above list indicates, it’s also not necessary to “clear” a block element; assuming no floats are affecting the block element, it will be cleared automatically and will start on the next “line” in the page’s output.

Examples of Block Elements:
<p>, <div>, <form>, <header>, <nav>, <ul>, <li>, and <h1>.

Inline Elements

An inline element has, but may not be limited to, the following characteristics:

• Flows along with text content, thus
• Will not clear previous content to drop to the next line like block elements
• Is subject to white-space settings in CSS
• Will ignore top and bottom margin settings, but will apply left and right margins, and any padding
• Will ignore the width and height properties
• If floated left or right, will automatically become a block-level element, subject to all block characteristics
• Is subject to the vertical-align property

The easiest way to picture an inline element is to think of it as a box that acts like text. What happens, for example, to text that’s not separated by other elements? It flows one letter after the other. If you put an inline element next to text, it will flow next to that text just like another piece of text.

Examples of Inline Elements:
<a>, <span>, <b>, <em>, <i>, <cite>, <mark>, and <code>.

Other Notes

You’ll notice that the examples of both block and inline elements are quite revealing: The block examples are structural elements, while the inline elements are text-based. This is an easy way to remember which is which, although at first you will sometimes be confused.

Generally speaking, you can put any block element inside another block element. You can also put any inline element inside a block element, as well as any inline element inside any other inline element. But you cannot put a block element inside an inline element — with (I believe) one exception: You can wrap an <a> element around any content, whether it be block eleemnts, or inline elements, or a mixure of both.

You have the option to change any block-level element to an inline element, and vice-versa, using the display property. So keep that in mind if you need to do this. But don’t use the wrong element for the wrong purpose. An SEO guy once told me to put an <h2> element inside of a paragraph, and style it to look like regular text, because he wanted an SEO boost. Not a good idea, that’s what <em> is for.

One final thing to note is that, although from a CSS perspective block and inline do exist, from an HTML5 perspective, the different types of elements have been re-categorized, so that they’re more specific. You can read about these content models in the WHATWG HTML5 spec.

Bonus Tip: Replaced Elements

At the beginning, I said that block and inline were just two types of content. Generally speaking, those are the two primary kinds, and you won’t have to worry too much about any other kinds.

But there are what are referred to as replaced elements. Basically, these are neither block nor inline. But you might classify them as something closer to inline, but with block-like structure.

I won’t provide a detailed explanation here; you can check out the SitePoint article linked in the previous paragraph for full details. But some examples of replaced elements include:

<img>, <object>, <input>, and <select>.

Conclusion

If you’re just starting out with CSS, understanding the behaviour of block vs. inline elements will go a long way to helping you code sites that are efficient and maintainable and don’t rely on overuse of floats or other undesirable methods.

Related posts:

1. What’s the Difference Between Margins and Padding?
2. What’s the Difference Between “:before” and “::before”?

Some of the benefits of using absolutely positioned elements in your layouts include:

• Aside from a few IE bugs, very good cross-browser support
• Less dependence on floats, which can be problematic
• Less dependence on margins, which can be a bit buggy in older IE

Drawbacks of absolutely positioned elements include:

• The positioned elements are removed from the natural document flow
• Can cause maintenance problems if you have to add other elements near the positioned one

The Basic Syntax

To position an element absolutely, you need to do a few things. Here’s the code, then a basic explanation:

First, some basic HTML:

<div class="box">

	<div class="inner-box">
	<p>dummy content</p>
	</div>

</div>

Now the CSS:

.box {
	position: relative;
}

.inner-box {
	position: absolute;
	top: 20px;
	left: 50px;
}

(In this example, I’ve omitted some values that would otherwise be necessary, like width and/or height.)

First, you need to create what’s referred to as a positioning context. In this case, the positioning context is the .box element. We do this by adding position: relative to that element.

Next, we need to absolutely position the inner element. We do this by setting position: absolute.

Lastly, we tell the browser where exactly we want the inner element to be placed in relation to the outer element. This is done using four possible properties: top, right, bottom, and left. In this example, I’m using two (which is enough). The inner element, by default, starts out in the top left corner of the outer element, then gets positioned 20px down from the top and 50px in from the left.

What Happens if You Don’t Set a Positioning Context?

Absolute positioning doesn’t require a ‘relative’ element (as set on the .box element above). If you absolutely position an element without a positioning context, then the positioning will take place relative to the entire page. (The exception is if you don’t specify any top, bottom, left, or right values. In that case, even if there is no positioning context, the context will automatically become the immediate container element, and the element will still be in flow.)

The lack of positioning context is probably the biggest cause for problems with people new to CSS positioning. A CSS beginner may decide to try setting the position of an element to “absolute”, then after setting top and left values, notice that the element will either get pushed all the way to the left or all the way to the top, or both. And it will be outside of its container element. This might cause a beginner to give up and not ever use that property.

So understanding how the positioned parent affects the absolutely positioned child will help greatly because this is a very useful technique to be familiar with.

Bonus Tip: Sizing Without Width or Height

Here’s a bonus tip that probably not a lot of people know about. You can actually define the dimensions of any absolutely positioned element using the top, left, bottom, and right values alone, without any content in the element and without width or height values.

Here’s an example using the same HTML from above:

.box {
	position: relative;
	width: 400px;
	height: 400px;
}

.inner-box {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

This will cause the inner element to fill the outer element’s content area. Here’s a JSBin with some exaggerated borders, so you can see how this works:

Conclusion

Don’t be afraid of CSS positioning if you don’t understand it at first, or if you run into problems. It’s a useful technique that, when understood well, will help you avoid a number of problems that can occur from having too many floats or too many margin settings.

You can read more on positioning on SitePoint’s reference.

No related posts.

What Are Margins?

Margins in CSS make up the vertical and horizontal areas between elements. If elements have no margins around them, they will bump right up against each other. Some elements have margins by default, so often even if you haven’t added a margin, you may still see one.

Here’s a visual demonstration of CSS margins:

It’s pretty simple. The space outside of, or between, elements is what comprises the margin areas. This area would also be outside of any borders set on elements.

I should point out there there could be other reasons for elements to have space between them — not just margins. But for the purpose of this simple post, we’ll just assume that all the vertical and horizontal space shown in that image is caused by margin settings.

Margins can be set using the margin property (which is shorthand, representing the four margin values for an element) or by the longhand margin-top, margin-right, margin-bottom, and margin-left properties. The order in shorthand is: top, right, bottom, left.

What is Padding?

So what about padding? Well, the padding of an element is the horizontal and vertical space that’s set around the content area of the targeted element. So padding is on the inside of a box, not the outside.

Here’s a visual demonstration of CSS padding:

In this example, there’s a single element with text centered within that element. The centering could be done in a number of ways. We’ll assume it’s done via the CSS padding property. So the padding is the area inside the element that separates the content of the element from the element’s edges. In this example, the element could be a paragraph tag (<p>).

Similar to margins, padding is set using the shorthand padding property, and can also be done using longhand: padding-top, padding-right, padding-bottom, and padding-left.

Summary

So, in brief, margins separate elements from each other and away from page edges, adding space outside of elements. Padding adds space inside of an element, separating the element’s content from the edges of the targeted element.

Related posts:

1. Should You Ever Use Longhand for Padding and Margins in CSS?
2. The Difference Between “Block” and “Inline”
3. What’s the Difference Between Classes and IDs in CSS?

And if you’re developing websites or web apps in any technology-related niche (like web design), then IE6 visitors are probably even lower. For this website, IE6 visitors since January 1, 2011 account for about 0.5% of users, and in the last 30 days, that’s dropped to about 0.3%. You might have similar stats.

For this reason, it’s more than likely that the only CSS hacks you’ll need are for IE7 and IE8. Firstly, if you follow some basic CSS coding principles, then you might very well need no hacks or workarounds for IE7 and IE8. For the design of this blog, I currently have zero very few IE-specific hacks — so it’s obviously possible to get by without relying too strongly on hacks. (Update: I’m no longer supporting IE6 on this site, so that does help greatly).

Nonetheless, many beginners may need ways to target IE7 and/or IE8. Here I outline the best methods for doing so.

Paul Irish’s Conditional Classes

The best method, by far, is the conditional classes technique popularized by Paul Irish. Here’s how you do it:

<!--[if IE 7]>     <html class="ie7"> <![endif]-->
<!--[if IE 8]>     <html class="ie8"> <![endif]-->
<!--[if !IE]><!--> <html>             <!--<![endif]-->

This uses conditional comments to target certain versions of Internet Explorer, and the <html> element receives a custom class name for different versions of IE, and no class name when the browser is not IE.

Then in your CSS, you would target IE7 or IE8 like this:

.element {
	margin-bottom: 20px;
}

.ie7 .element {
	margin-bottom: 10px;
}

.ie8 .element {
	margin-bottom: 15px;
}

Every browser will have a bottom margin of 20px on the element in question, but IE7 and IE8 will have a bottom margin of 10px and 15px respectively.

It’s important to note here that although targeting IE is necessary at times, I strongly suggest you try to find a better way to fix any browser differences, and avoid using conditional classes or any of the hacks mentioned below, if at all possible. Sometimes you just need to rethink your CSS and possibly your markup, and you can avoid this extra code from the start.

CSS Hacks

Another way to target IE7 or IE8 is using hacks.

First, how to target IE7 only. There are probably more than just two ways to do this, but here are two (which is really all you’ll need):

* + html .element {
	margin-bottom: 10px;
}

(Thanks to Anthony for the tip on this first one, above)

The hack is the part of the selector that comes before .element. No other browser will recognize that selector, so the 10px bottom margin will only appear to users of IE7.

Here’s another less memorable method:

*:first-child+html .element {
	margin-bottom: 10px;
}

Yet another way to target IE7 is like this:

.element {
	margin-bottom: 20px;
	*margin-bottom: 10px;
}

The “hack” is the asterisk at the start of the line of CSS that you want to apply to IE7. The only problem here is that this will also apply to IE6. So you should only use this if you know that this hack will look fine in IE6, or if you don’t care what it looks like in IE6. So if you’ve dropped support for IE6, then this should be fine.

From my research on this subject, there does not appear to be a way to target only IE8 (and not IE6, IE7, and IE9+) with a CSS hack. The only way seems to be using a conditional comment.

However, if you’ve dropped support for IE7, then you could use the following:

.element {
	margin-bottom: 20px;
	margin-bottom: 10px\9;
}

The “hack” is the \9 following the value and preceding the closing semicolon. This will target IE8 and below, so you should only use this as an IE8-only hack if you no longer support IE6 or IE7 (because both those versions will apply the style in this hack).

Conditional Comments

Finally, you could separate your CSS for IE7 and IE8 into separate files, using conditional comments, like this:

<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css">
<![endif]-->

<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->

But I do not recommend you use this method. This has two main problems: First, it separates your CSS into three different files, making it much harder to maintain. And second, you’re adding extra HTTP requests in two of the slowest browsers, making your pages load much more slowly.

So my suggestion is to use either the conditional classes or else a simple hack to target IE7 or IE8.

Related posts:

1. What’s the Difference Between Margins and Padding?

If you’re a beginner and you’re developing HTML and CSS using an external stylesheet, you might notice that in some browsers, under some circumstances, the changes you’ve made to your CSS don’t take effect immediately.

Sometimes it’s necessary to do a hard refresh to see the updates take effect. But it’s unlikely that average web users know what a hard refresh is, nor can you expect them to keep refreshing the page until things straighten out.

So how can you ensure that any updates you’ve made to your CSS will take place immediately for all users? Here’s one way to do it:

<link rel="stylesheet" href="style.css?v=1.1">

Notice that I’m pointing to my CSS using the commonly known <link> element. But I’ve also added what’s called a query string to the end of the file name.

The browser will view a file name of style.css as different from a file name of style.css?v=1.1, so it will generally force the browser to update the stylesheet. So, each time you update your CSS on the server, you can incrementally update your version number.

If you’re new to query strings, just know that the part before the equals sign is like a placeholder, and the part after the equals sign is the value put into that placeholder. This will have no effect on the CSS. It will only serve to make the browser think it’s a completely different file.

You could add many types of characters to the query string value, but numbers are a logical way to do it, because then you can just increase the number, and even add decimal places if you want. And of course, if you don’t change the value for a while, the browser will continue to cache (or preserve) the file, and won’t attempt to download it unless other factors force it to, or you end up updating the query string value.

No related posts.

Using HTML’s <link> Tag

This is the best method to use (more details on this at the end of this post). Inside your web page, with the opening and closing <head> tags, you can include the following:

<link rel="stylesheet" href="style.css">

Prior to HTML5, developers were accustomed to adding a “type” attribute to the <link> element, to specify what type of file you were including. But this was never required by HTML validators, nor is it required by any browser or browser version.

Using the @import At-Rule

Instead of using the <link> element, you could alternatively include a reference to a CSS file like this:

<style>
@import url(style.css);
</style>

This method, referred to as an at-rule (this is just one type of at-rule) must be included either within <style> tags inside your document’s <head> element, or else inside your stylesheet (which could be referenced via the <link> element, or via another @import rule).

The @import declaration must appear before any other CSS rules, otherwise it will not work.

Using the <style> Element

You could include CSS anywhere in your web page by putting CSS rules inside <style> tags, like this:

<style>
p {
	margin: 0 0 20px 0;
}
</style>

Although this could be placed anywhere in your HTML document, it’s generally best to put it inside the <head> element, if you choose to use this method.

Using Inline Styles

Another way to add CSS to a web page is to use inline styles. With this method, the styles will only apply to the element on which they appear. Here’s an example:

<p style="color: red; padding: 20px;">Example paragraph text goes here.</p>

Which Method is Best?

Generally speaking, the best method is the first one listed that describes how to use the <link> element. But there could be some instances where one of the other methods would come in handy, so you shouldn’t completely rule them out. I have used all the above methods over the years. The only method that I no longer use is the @import method.

The @import method fell out of popular use for various reasons. First, there was an issue with Internet Explorer that caused the page to temporarily appear unstyled when this method was used in the <head> element. Also, @import was previously a good way to get really old browsers (like Netscape 4) to ignore CSS that they didn’t understand. But this is no longer necessary.

It should also be pointed out that the “Flash of Unstyled Content” does not occur if you use the <link> element, then refer to another file in your CSS via the @import method.

The other two methods I outlined (using the <style> element, and inline styles) should generally be avoided because they are not good for long-term maintenance and re-use of CSS. For example, if you have a bunch of CSS in the <head> of your document, then that CSS will only affect that document. Likewise, with inline styles, the styles will only apply to the elements they appear on.

Related posts:

1. Current Page Link Styles