CSS in a Nutshell2015/03/08

This article is old and may contain information or advice that is deprecated.

CSS stands for Cascading Style Sheet and is pretty much just a list of rules that govern how an HTML page appears. A rule in CSS looks like:

selector {property: value;}

selector determines which elements the rules apply to. The most important selectors are element, .class, and #id. A selector of h1 would apply to all <h1> tags, and a selector of #potato would apply to all elements with id="potato".

You can also chain selectors together in several ways

p#id.class1.class2    All <p> with id="id" AND class="class1 class2"
div p b               All <b> that is a child of a <p> that is a child of a <div>
body > div            All <div> that is a direct child of a <body>
h1, h2, h3            All <h1>, and all <h2>, and all <h3>

There are also pseudo-classes that are prefixed with a colon. For example, :hover is a pseudo-class that is applied onto an element when the user’s mouse is over it.

a:hover               All <a> that have a mouse hovering over them

There are also pseudo-elements that are prefixed with a double colon. For example, ::first-letter corresponds to the pseudo-element that is the first letter of another element.

p::first-letter       All ::first-letter’s of all <Typography paragraph> elements

For a list of all CSS selectors: http://www.w3schools.com/cssref/css_selectors.asp

Another important aspect of CSS selectors has to do with precedence (a.k.a. specificity). Suppose you had the following element in HTML

<div id="potato"> ... </div>

Coupled with the following CSS

div        {color: red;}
div#potato {color: blue;}

Our <div id="potato"> would appear blue and not red, because div#potato takes precedence over div. Generally, the more specific rule always takes precedence and

inline CSS > #id > .class > element

in terms of precedence. (This idea of precedence is what “Cascading” in CSS refers to). When two or more rules with the same precedence are defined for an object, the rule defined latest will be used.

For a more extensive understanding of precedence: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Now that selectors are all taken care of, let’s talk about the {property: value;} portion of a CSS rule. property is any one of many properties an element can have. (Not all elements support the same properties. Only <ul> and <ol> support the list-style-type property). value is whatever values the property can take on. Every property-value pair should end with a semicolon (this is optional for the very last pair)

p.error {color: red; font-weight: bold; font-size: 16px}

Each property usually takes on only one value, but some allow for multiple values. The values must be comma separated.

font-family: "Times New Roman", Georgia, serif;

(Note: values that contain spaces must be enclosed in quotes). In the above line, CSS would first try to apply font-family: "Times New Roman", but if the font "Times New Roman" doesn’t exist, then it will fallback to font-family: Georgia, and if that doesn’t work either, it will finally try font-family: serif.

CSS also includes shorthand properties which are used to set multiple properties at once. The values of shorthand properties are space separated.

margin: 60px 20px;

Is exactly equivalent to

margin-top: 60px;
margin-right: 20px;
margin-bottom: 60px;
margin-left: 20px;

For a list of all CSS properties: http://www.w3schools.com/cssref/

CSS Miscellaneous

`inherit` and `initial`

All properties can take on a value of inherit and initial. inherit will cause the property to inherit its value from its parent element. initial will cause the property to use its default value. Sometimes this default value may vary depending on the browser.

`!important`

All values can be given the !important flag, which pretty much overrides all orders of precedence. For example

.error {color: red !important;}

will cause any element with class="error" to be displayed as red regardless of any other rules. Please try to avoid using this flag.

Vendor Prefixes

When a browser implements a property that is not in the CSS spec, or is part of a CSS spec that is experimental or subject to change, then they will usually attach a vendor prefix to that property value. (Unprefixed properties are guaranteed not to change). For example, column-rule is a fairly new property, and some browsers haven’t implemented it yet, but do include the vendor-prefixed versions. So to use column-rule, it would look something like

column-rule: 3px outset blue;           For browsers that support this
-webkit-column-rule: 3px outset blue;   For webkit browsers
-moz-column-rule: 3px outset blue;      For Mozilla

Generally, using vendor prefixes are unnecessary, and having to include them may cause discrepancies between browsers. But for standardized CSS3 properties like border-radius, it may be good to also include their vendor prefixed counterparts to support older browsers.

Units

There are two types of CSS units: Absolute and Relative. Absolute units appear the same size no matter what device you are on. Avoid using these units since screen size can vary drastically.

Absolute: mm, cm, in, pt

Relative units are measured relative to the screen or relative to another element.

Relative: %, px, em, rem

The % unit is measured relative to the parent element. The px unit corresponds to pixels on the screen. (Not exactly. There’s a slight difference between a CSS pixel and a screen pixel. See http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html). The em unit is measured relative to the font size of the parent element. The rem unit is measured relative to the font size of the <html> element (the root element).

If we had the following HTML structure

<html>
...
  <div id="outer">
    <div id="inner">
    </div>
  </div>
...
</html>

And the following CSS

html   {font-size: 10px;}
#outer {font-size: 2em;}    // font-size: 20px
#inner {font-size: 1em;}    // font-size: 20px

Then #outer would have a font size twice the size of its parent, and #inner would have a font size equal to its parent. If we used rem instead

html   {font-size: 10px;}
#outer {font-size: 2rem;}    // font-size: 20px
#inner {font-size: 1rem;}    // font-size: 10px

#outer would have a font size twice that of the root element, and #inner would have a font size equal to that of the root element.

Browsers also allow using calc() as a CSS unit.

div.potato {width: calc(50%+20em);}

For browser compatibility, see http://caniuse.com/#feat=calc

Colors

A color can be represented using rgb()

rgb(0, 100, 255)        integer values from 0 to 255
rgb(5%, 50%, 0%)        percentages from 0% to 100%
rgb(0.0, 70.5, 10.0)    float values from 0.0 to 100.0 corresponding to percentages

You can also use rgba(). The first 3 parameters correspond to rgb() as above, and the 4th parameter is a float or percentage value corresponding to the alpha of the color.

rgba(50, 20, 200, .5)
rgba(50.0, 100.0, 0.0, 90%)

Colors are also represented as 3, 4, 6, or 8 digit hexadecimal numbers (With the hexadecimal prefix #).

#00FF00      same as rgb(0, 255, 0)
#0000FFCC    same as rgba(0%, 0%, 100%, 80%)
#123         same as #112233
#A54E        same as #AA5544EE

Some colors also have names

blue         same as #0000FF
chocolate    same as #D2691E

Other ways to specify a color include hsl(), hsla(), hwb(), and gray().

For the full color specification, see http://dev.w3.org/csswg/css-color-4/

`@font-face`

CSS also has a @font-face rule for defining new fonts to use.

@font-face {font-family: SexyFont; url("sexyfont.ttf");}

You can then use the font like

p.sexy {font-family: SexyFont;}

Media Queries

CSS also includes ways to detect what sort of device the website is being viewed on, using the @media rule. The only media query you need to know is detecting the size of the screen (useful for responsive design).

#potato {width: 50%;}
@media only screen and (max-width: 500px) {
  #potato {width: 100%;}
}

#potato will have width: 50% unless the width of the screen is less than or equal to 500px. In that case, #potato will have width: 100%.

For a full list of media queries, see http://www.w3schools.com/cssref/css3_pr_mediaquery.asp