CSS Inheritance is pretty easy to understand but can take years to master. First you have the document tree to fathom, then you throw in the multiple value types, the selector groups and their individual behaviours and then it all becomes a little more complicated. You have Ancestors, Descendants, Parents, Children, Siblings and the family pet to deal with, it becomes a real head spinner when left to look after them all with no firm grounding as to how to properly organise them all. This is until now, we present to you the CSS Inheritance Slideshare Presentation, classified a U so is suitable for all experience levels in CSS.

Conclusion

Now hopefully you are fully versed on CSS Inheritance, let us know what you thought. Did you learn anything new? I’ve been hand coding CSS for as long as it’s been feasibily supported and I have certainly picked up a firm understanding of Inheritance.

More CSS resources by us

CSS Shorthand

CSS Shorthand top tips. Think you’re a CSS Guru? You should checkout CSS Shorthand, we’ve even written an article on it.

CSS for ABSOLUTE BEGINNERS – shaping up with CSS

CSS for ABSOLUTE BEGINNERS training presentation. If you’re an absolute newcomer to the scary world of web design and wish to start learning things from scratch then this is the presentation to watch.

The CSS Bible

The CSS Bible – full chapter and verse, every article on css you’ll every need from third party sites. A great post to bookmark.

Chocotemplates.com are giving away 4 free portfolio themed CSS templates under a Creative Commons 3.0 licence. Each template seems pretty well designed, include an array of jQuery transitions and could easily be modified and reskinned to your own design. Click below to check them out.

FREE CSS Portfolio template 1

This first portfolio template is actually a WordPress theme that’s been given away for free from FrogsThemes.com to celebrate their launch. It’s the best free portfolio template we’ve found.

FREE CSS Portfolio template 2

FREE CSS Portfolio template 3

FREE CSS Portfolio template 4

FREE CSS Portfolio template 5

FREE CSS Portfolio template 6

FREE CSS Portfolio template 7

Have you designed some portfolio templates that you want to give away, let us know!

This post is aimed at all web designers and developers that insist on using the dirty hack <br clear="all"> within their website builds. Most people won’t understand my rage for <br clear="all"> because it takes a certain level of web geekness to fathom what it is and why it’s so god damn unnecessary.

<br clear="all"> is typically used by crap developers who hold no appreciation for web semantics nor accessibility. Ironically these culprits are usually the smart a**** that are the first to point out others mistakes, no matter how minor. They build websites that are both bloated, slow and unstable cross-browser. <br clear="all"> to me acts as the ultimate professional insult to those that have crafted for years, through changing technologies and user demands. <br clear="all"> is like a bird crapping on your freshly washed and polished hatchback, a minor little thing that really p***** me off when I encounter it.

Like the story ‘The Princess and the Pea’, no matter how much preparation and effort you put into something, all it takes is a stupid little pea to annoy you and reduce a potentially relaxing nights sleep to an unexpected search for the very thing that shouldn’t be there in the first place, the <br clear="all">.

Dear Website Developer,

If you need to clear a floated element, please don’t use <br clear="all">. As a last resort use a simple CSS class on the element you want clearing. In your bloated, unstructured CSS file, which more than likely will be inline, create a class:

.clear{
     clear:both;
}

and remember you can add multiple classes to an element, like:

<div class="className className clear">
I'm a clever little developer aren't I
</div>

As Borat would say, this is ‘unbelievable’!!!

<br clear="all">

<div class="className">
Hack hack hack
</div>

<br clear="all">

<div class="className">
Hack hack hack
</div>

So next time to quickly quack in <br clear=”all”>, think, you’re a dirty little bugger! One last thing, if you write <br clear="all">, it should be <br clear="all" />, but I guess you don’t care do you?