Hidden features of CSS [closed]

You can display the document’s title element:

head, title {
    display: block;
}

Apply multiple styles/classes to an element like this class="bold red GoldBg"

<html><head>
<style>
.bold {font-weight:bold}
.red {color:red}
.GoldBg {background-color:gold}
</style>
</head><body>
<p class="bold red GoldBg">Foo.Bar(red)</p>
</body></html>

I really like CSS sprites.

Rather than have 20 images for all your site buttons and logos (and therefore 20 http requests with the latency around each one) you just use one image, and position it each time so only the bit you want is visible.

It's difficult to post an example as you'd need to see the component image and the placement CSS - but I've blogged Google's use of it here: http://www.stevefenton.co.uk/Content/Blog/Date/200905/Blog/Google-Uses-Image-Sprites/

The fact that floating a parent element will cause it to expand to contain all of its floated children.

Maybe negative margins and absolute positioned elements in relative positioned elements.

See How would YOU do this with CSS? for examples.

Hidden features of CSS [closed]

Related

Recent Posts