PixelTango - www.pixeltango.com

These 10 features was found reading the Cascading Style Sheets Specification, so I suggest you read it through roughly if there is anything you would like to know about CSS.

Display The HTML Document’s Title

Yes, you can actually display the HTML-document’s title in the body of your page. Probably not very useful, but quite fun to know.

head, title {
    display: block;
}

Declaring Character Encodings

Usually your website server sets the character encoding for your files by using HTTP headers. You can however, set the character encoding explicitly of your CSS style sheets.

To set the character encoding inside the style sheet, use the @charset “at-rule”. Its syntax is:

@charset "<IANA-defined-charset-name>";

Where the charset name is defined as in the IANA registry.

More about Declaring character encodings in CSS

Importing External Style Sheets

To keep your CSS rules separated or if you end up with thousands of rules it is a great idea to split them up into multiple CSS files. To accomplish this you create a master style sheet that use the @import-rule to import the other files.

    @import url("mystyle.css");

    /* Short-hand notation */
    @import "mystyle.css";

More about the @import rule

Combining Classes

An HTML element can have several CSS classes to inherit the styling from each class.

<style type="text/css">
    .distinct { font-weight: 600; }
    .warning { color: red; }
</style>

<div class="distinct warning">
    I am red and bold!
</div>

The !important Rules

You can override the cascading order by using the !important rule. Here’s the syntax:

The first rule in the user’s style sheet in the following example contains an “!important” declaration, which overrides the corresponding declaration in the author’s style sheet. The second declaration will also win due to being marked “!important”. However, the third rule in the user’s style sheet is not “!important” and will therefore lose to the second rule in the author’s style sheet (which happens to set style on a shorthand property). Also, the third author rule will lose to the second author rule since the second rule is “!important”. This shows that “!important” declarations have a function also within author style sheets.

/* From the user's style sheet */
p { text-indent: 1em ! important }
p { font-style: italic ! important }
p { font-size: 18pt }

/* From the author's style sheet */
p { text-indent: 1.5em !important }
p { font: normal 12pt sans-serif !important }
p { font-size: 24pt }

CSS Rules Can Be Grouped

To save space and to reduce redundancy you can separate multiple selectors by using the comma-character and apply only one rule for all the selectors.

h1,
h2,
h3,
strong, em, p {
    font-weight: bold;
    color: #333;
}

Counting Elements And Displaying Nested Counters

Did you know that there is a counter-increment keyword in CSS? This lets you set a variable name for what counter should be incremented when a element of this type is detected by the browser agent.

<style>
p { counter-increment: pixeltango }
p:before {content: counter(pixeltango) ". "}
</style>
  
<p>First</p>
<p>Second</p>
<p>Third</p>

Where pixeltango is the variable name of our counter.

Results in…
1. First
2. Second
3. Third

More about nested counters and scope

Transparent Backgrounds

By setting the background-color and background to transparent you can remove any unwanted inherited background colors/images for the selectors.

Negative Values

You can use negative values for margin and position. This is very useful when positioning elements to create complex layouts.

Variable Width On Absolutely Positioned Elements

You can get a variable (flexible) width by setting the left and right properties of an absolutely positioned element. This gives you more control rather than just setting the width to a percentage value.

.element {
    position: absolute;
    left: 20px;
    right: 20px;
}