Tagged: css technique

Descendant and child selectors

Most css coders are familiar with the basic descendant selector, parent child and use it all the time, perhaps too much. The descendant selector is applied to every single child of parent and that is not always ideal.

The direct child selectors

A better solution in some cases is the direct child selector: parent > child. The difference between this and the descendant selector mentioned above is best explained with a nested list

Continue reading

Be slightly careful when using web fonts

Web fonts make it real easy to use almost any font on your website and that is good. But one thing that webmasters seem to not notice is that web font files are quite heavy and will easily outweigh the rest of an average web page.

As an examle, let's take a look at a new blog I set up recently, Fishing Base Blog. At the moment it uses WordPress' default theme which include the Open Sans font. I have added a background image (46kb) and tracking code for Piwik (21kb). The total size in kb for the frontpage is now 281.5 kb which is not bad by todays standards.

Continue reading

Use normalize CSS, not reset CSS

Some html elements have different default styles in different browsers and to complicate it further, they can use different properties for similar results. Padding and margin are two properties with this characteristic and f.ex. unordered lists suffer from this complexity. By adding a little padding, one browser may improve the presentation while it is completely borked in another browser.

A well known trick for avoiding browser differences on elements like lists and forms is to use a reset stylesheet. The idea behind reset stylesheets is to remove browser inconsistencies and among other things, they normally set padding and margin on all elements to 0, font-weight to normal, and font-size to 1em.

Continue reading