Pinterest Stumbleupon Whatsapp
Ads by Google

learn cssCSS is absolutely one of the most important technologies around on the Internet today, and while most people admit to knowing a little HTML, we are generally clueless about CSS.

Last time I introduced you to the absolute beginner steps required to learning how to style websites with CSS 5 Baby Steps To Learning CSS & Becoming A Kick-Ass CSS Sorcerer 5 Baby Steps To Learning CSS & Becoming A Kick-Ass CSS Sorcerer CSS is the single most important change webpages have seen in the last decade, and it paved the way for the separation of style and content. In the modern way, XHTML defines the semantic structure... Read More . Today I’d like to continue to examine some basic points, take a look at how powerful FireBug is, show you how to do CSS rollover effects, and point you in the right direction for where to go next.

The Box Model

One of the key concepts behind CSS is the box model that surrounds every HTML element on the page. Last time I introduced you to a fantastic utility called Firebug and the built-in Chrome equivalent. If you’ve got installed already and had a chance to play with it, you should have noticed that hovering over any element in HTML source view in the bottom left highlights a box around the element on the page view at the top. That highlight is the box model.

learn css

One of the first mistakes any CSS learner will make is to confuse and use MARGIN and PADDING interchangeably. Check out the following diagram from w3 Schools, and notice they are very different properties.

It’s also interesting to note that the border property takes up actual space and therefore affects positioning. MARGIN determines space around the border of an element. PADDING determines the space inside the border. Only padding has background properties applied to it.

Ads by Google

css learning

More FireBug Magic

Not only does Firebug allow you to view the precise hierarchy in which properties have been chosen from conflicting selectors, it also allows you to both edit and disable CSS rules, live on the page. Each CSS rule in the right hand side will have a checkbox next to it. You can uncheck this to simply turn off that rule.

More useful though, is the ability to edit these rules. Double-click to adjust the values or property name, or you can even add new rules by double clicking on the blank space. It’s an amazingly powerful tool to debug small changes to the CSS without having to save and refresh each time, but bear in mind the changes aren’t saved – so only adjust a few at a time before transferring them to the main CSS file.

css learning

Another useful feature of these development tools is showing the exact CSS file and line number the rules originate from. I find this especially useful for WordPress sites when plugins will often import their own stylesheet, or when a theme consists of more than one stylesheet.

:hover Rollover Effects

One of the first things anyone wants to do with their site is add flashy rollovers. In the past, rollovers effects (elements or links that change when you hover over them) were achieved using basic javascript. With CSS you can apply :hover effects to any element, not just links – but since users expect something to be clickable when it changes under their mouse, it’s best if you only use it in the site interface for links or when javascript is also involved to invoke some kind of action.

To apply hover effects to something, use the same selector as the main element but simply add :hover to the end of it.

a { color: black;}
a:hover {color:red;}

Hover is one of a range of pseudo-selectors available to you in CSS. Although CSS version 3 has introduced many more, you can read about the most widely supported ones at w3 Schools.

Some of my favorites are :

:first-letter

This is used to create “dropcap” effects on just the first letter in a paragraph.

:first-child

This targets only the first occurrence of something, useful if you are creating | (bars) between links using only CSS, but need to avoid duplicating one at the start or end of the list of links.

What’s That Property? Cheat Sheets & Predictive Editors

Of course, you can’t be expected to know all the properties you can play with in CSS – that’s why I keep some cheat sheets on my wall for when I’m drawing a blank. The best I’ve found are from pxleyes.com.

css learning

Another helpful way of ensuring you use the correct property names is to use a CSS editor or text-editor that recognizes CSS code and predicts the property name as you type. My personal tool of choice is CSS Edit ($40) on the Mac – please let us know in the comments if you use any free alternatives that you recommend.

learn css

Further Reading

This has only been a very brief introduction to CSS, but I hope it’s given you a good grounding. You might also want to go check out my CSS3 Cool Tricks article 5 Cool CSS3 Effects You'll Be Seeing More Of 5 Cool CSS3 Effects You'll Be Seeing More Of CSS3 (combined with the power of HTML5) is rapidly being supported by all the major browsers (read - anything except Internet Explorer), so I thought now would be a good time to see some of... Read More too, and here are some of my personal bookmarks for developing CSS skills:

  • Tizag have a long tutorial that gives you a good understanding of all the basic properties, and takes a very hands-on approach to learning. They’ve been around a long time and it’s the site that I initially learnt MySQL and PHP from too. Fantastic resource.
  • CSS-Tricks is made by one very talented individual and the site itself is a testament to the fantastic power of CSS. Some of the tutorials are quite high level, but it’s a great motivational site for me.
  • W3-Schools can be your ultimate reference for CSS properties, where you go to look something up rather than learn in a tutorial style.
  • Smashing Magazine is another inspirational site for me, and they regularly publish in-depth tutorials on not only CSS, but the whole length and breadth of the design process.

CSS is surprisingly fun compared to HTML or other programming, so I hope you find a spark within you – the web could certainly use a few more good designers. Comments, suggestions and more links welcome, or ask specific CSS questions in the tech support section of the site.

  1. Scutterman
    June 19, 2011 at 11:18 pm

    I use PSPad for all my editing, though it's slightly out of date as far as css is concerned so some properties (border-radius for example) aren't recognised.

    My fav uses of css are using :nth-child to create alternate row colors, and using :hover to create css-only dropdown menus. Both only require two lines of css at their most basic, but offer great effect.

    Something to be careful of... Firebug will do some basic error correction, such as adding in missing ending tags or moving something into the correct place in the hierarchy. This can be very useful, but very frustrating if the code you see is correct but the positioning etc. isn't working due to flaws you can't see. Good ol' "view source" is indispensable.

    • James Bruce
      June 20, 2011 at 8:08 am

      Thanks for the recommendation, scutterman, and good point about firebug. it needs correctly formatted/semantically correct code to work properly. PSPad link to readers: http://www.pspad.com/

  2. Anonymous
    June 19, 2011 at 10:58 pm

    webtocon scriptly does recognizes CSS code and predicts the property name as you type and its totally free! you can view their website in german and english...

Leave a Reply

Your email address will not be published. Required fields are marked *