10 Bizarre, Useful and Fun Features of CSS

CSS3 is on the way to set new trends in modern web design. Meanwhile, people seem to forget to learn about many of the important (and just fun) features of classic CSS. Here is a collection of 10 interesting features of CSS that you may or may not be aware of.
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";
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; }
Did you enjoy this?
Support us by sharing this article with your friends. This way we will be able to produce more content like this, and in the end we are all winners!
PixelTango Original © 2010-10-19 | Usage