Cascade with me down the sheet

CSS

Have you ever sat down to read a document and thought, "Man, there is just so much black and white. This isn't fun to read..."? Well, you're not alone! Way back in 1994 Håkon Wium Lie thought the same thing and, while working with a computer scientist named Tim-Berners-Lee, invested the first iteration of CSS! While both men were working for CERN (Yes, the same CERN that recently started up their large hadron collider) they wanted to provide a way to style documents being presented. This led to the start of CSS, which mostly just allowed different fonts, font colors, and backgrounds.

CSS2 & CSS3

CSS2 was released in November of 1997 and addressed multiple issues with it's predecessor as well as updated it's styling options and design influences. It mostly centered around allowing CSS to be used on other media types so that it could be used for page layout design. Just a year and a half later CSS3 came out adding presentation-style properties. Key updates included rounded-borders and the ability to split text sections into multiple columns. CSS3 separated the CSS into individual modules, improving functionality. Without CSS, many web designers had to use techniques such as HTML tables to display information, which isn't always the easiest to read. CSS allows us to add more animation and less static properties to our webpages. Previously, we needed some additional programming and scripting, but now it can all be done in CSS3. One of the few downsides is that not all web browsers have the same default CSS stylesheet. In order to correct this and ensure your information is displayed the same way regardless of web browser, you'd have to use a CSS reset.

CSS Reset

CSS resets come in all shapes and sizes. Some are more thorough while others cover multiple properties and attributes you may not have even thought of. You can find a lot of different CSS reset templates online, but an example I use often is from MeyerWeb that coveres a large portion of what's needed in a CSS reset.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

This CSS reset isn't perfect and doesn't cover all instances: notably it does not set a background. You may think it'd be a good idea to zero everything out via the universal selector, but doing so can cause you to miss some attributes. Some browsers will apply these styles to all elements, some will ignore them altogether on nested attributes and form elements. It's typically safer to explicitly list your elements and force the reset.

CSS4

Since we've already had three iterations of CSS, you may be asking yourself, "What about CSS4?!" Well, the answer is there is no CSS4. Since CSS was modulated, individual components have reached level 4, but others haven't needed to be or haven't been updated to that level and likely won't be updated or upgraded to that level. So, it's said that there is no and will be no CSS4.

A few Best Practices

• Label the ends of your div. Sometimes it's helpful to have a comment label at the closing tags to help you keep track of your div's.

• Test as you go! Test on multiple browsers as you're building so you don't have to make so many changes later on.

• Use image optimization software to safe space without losing image quality.

• Practice, practice, practice. There are always more then one way to style something, but some ways are more efficient then others! Practice makes perfect.

• Try to keep all styling in one location. In-line style tags can be a pain. Avoid mixing CSS and HTML if possible outside of development.

• JavaScript at the bottom! It was a common practice in the late 90's and early 00's to place your script tag in the head of your html. You want to place your JavaScript at the bottom of your documents. That will ensure that JS files will be loaded only when the content has properly been displayed.

Ways to Practice

There are plenty of ways out there to practice CSS, from styling your own projects to trying to recreate a webpage you're looking at. My favorite way to practice is CSSBattle. CSSBattle has new challenges everyday. It shows you a small 300x200px image and asks you to recreate that image using only CSS in as few characters as possible. It has a leaderboard for you to track your skills as you go and challenge your friends!