Archive results for:

CSS Tip: Adjacent Sibling Selector vs nth-child

With CSS, if you need to style a specific child sibling you can use the nth-child selector:

But if you still need to support legacy browsers (IE8), you need to use a :first-child selector and an adjacent sibling selector instead:

CSS Tip: Character Encoding

The first line of your CSS file should have:

The @charset CSS at-rule specifies the character encoding used in the style sheet.

Some say it is not important anymore because  a browser user agent can easily deduce the character encoding, but I have seen on rare occasions where omitting it has produced unsupported issues on  CSS properties on older browsers (i.e. :before).

So better safe, than sorry. 


CSS Tools and Methodologies Presentation

Brad Westfall gave a great presentation on CSS methodologies.  If you want to learn how to write CSS the right way, you need to watch this, really.

CSS Selector Types

A CSS selector is the part of a CSS rule set that actually selects the content you want to style. Let’s look at all the different kinds of selectors available.

The universal selector works like a wild card character, selecting all elements on a page.

The three lines of code inside the curly braces (color, font-size, and line-height) will apply to all elements on the HTML page. The universal selector is declared using an asterisk. Read more ›

Structuring your CSS File

It is a good idea to break your style sheets down into sensible chucks for ease of maintenance.

Start with the most general styles first. These include styles that are applied to the body tag and should be inherited by everything on the site. Next are any global resets we may need, followed by links, headings, and other elements.

Once the general styles are covered, we start to get a little more specific and tackle our helper styles. These are general classes that are used across the site and include things like forms and error messages. We then move onto structural elements like layout and navigation. Read more ›

CSS Inheritance

People often confuse inheritance with the cascade. Although they seem related at first glance, the  two concepts are actually quite different. Luckily, inheritance is a much easier concept to grasp.

Certain properties, such as color or font size, are inherited by the descendants of the elements those styles are applied to. For instance, if you were to give the body element a text color of  black, all the descendants of the body element would also have black text. The same would be  true of font sizes.


Read more ›

CSS Cascade and Specificity

Ever wonder why they are called “cascading” style sheets? CSS allows you to apply several style sheets to the same document, which means there are bound to be conflicts. CSS handles such conflicts through a process known as the cascade.

The cascade refers to what happens when several sources of style information vie for control of the elements on a page: style information is passed down (“cascades” down) until it is overridden by a style command with more weight. Read more ›