There is no written rule about designers having a mandatory knowledge of CSS, but you can bet that when you do understand it, you will have a significant advantage over your competitors; such advantage may even grant you a job over someone who has no idea that CSS stands for Cascade Styles and is related to websites.
I am the first to admit that my design skills are below average. I learned a single drawing in my first grace (a house, a tree, grass, sky and Sun) and as sad as it might be, after 15 years it is still the only thing I am confident about when it comes to drawing.
However, I am a man of numbers and letters and you must know the correct coding procedures before you can even judge the design impact. That’s why I feel I can be of assistance to the large crowd of designers and their fans here on DesignZZZ by providing a complete overview of the CSS properties.
No need to worry, it won’t be one super long article; I will rather split the large number of properties to several groups and focus on each in an individual article. I have chosen the following division:
- Color and Background
I promise that this is pretty much all the dispensable talk you’re going to get in these tutorials. Let’s get straight to business and as the headline suggested, the opening salvo of DesignZZZ CSS tutorials is going to describe Unit Properties.
What would be the point of investigating CSS, if we hadn’t defined what units of measurement we have? Regardless of the type of property, you nearly always need to measure, be it font height, letter spacing or margin. We shall thus take a deep look at the CSS units, let’s start with a basic summary:
Size Does Matter
Prefix is either no sign (acting as a +) or “-“. There must be no space between the number and the unit, so “1.4 cm” is wrong, whereas “-2.3px” is correct.
There are several approaches to length units. We can divide them into two major groups:
These are related to the “real-world” length units, including:
- inches (in)
- centimeters (cm)
- millimeters (mm)
- points (pt)
- picas (pc)
To avoid long explanation about the relations of individual units, try this Online Length Unit Converter.
The important thing about this group of length units is that they tend to give a different performance under different circumstances (i.e. 5cm can look differently in IE or in Mozilla). Whenever you can, try to use relative units instead.
Speaking of which, relative units are:
- ems (em) – height of the font of a particular element
- x-height (ex) – exactly as it sounds, the height of the letter “x”
- pixels (px) – depend on the canvas resolution
Colors of Life
Stays the same, except the number is followed by “%”. The relative value itself is usually taken from the font height of the element.
# followed by a hexadecimal code of the color (an RGB mix). I’m sure you are familiar with it. Although there are more syntactic ways how to insert the color code, I’ve never seen any other method than #rrggbb.
There are of course also quite a few keywords based on the Windows palette:
Yet again, I would recommend the Colorzilla plugin for Firefox as one of the best ways to figure out the code of your desired color. If you don’t use Firefox, do not despair and try this table instead.
Now that we know how to measure, we can proceed to the real fun, which will begin with Text Properties in the next article. Should you have any questions, suggestions or even find a mistake, use the comments section to address me.
Thank you for reading!