Basic CSS
Wednesday, May 6th, 2009Many designers still hold true to designing sites with tables and formatting text with HTML. Why? Well, there are many different reasons. Some see tables as quicker and more efficient. Some don’t understand Cascading Style Sheets (CSS). While others have an idea of what it is, shudder at the thought of leaving the ‘Old School of Web’.
How can CSS help you?
CSS centralizes all your formatting. If a client decides to change a font, you spare yourself hours sorting through page after page changing from Arial to Tahoma. How much easier it is to simply do the following:
from: body {font-family:arial;} to body {font-family:tahoma;}
This will make your change globally!
So where does one begin with CSS?
1. Take a look and play with pre-built CSS layouts. Pay particularly close attention to naming conventions! Give the sections different colors and discover what changes!
2. Don’t be scared of #DIVs (simply consider them custom styles)
3. Review the box model – margin is the spacing outside, padding is the spacing inside.
3a. For margin & padding, remember to count clockwise starting from the top. Example: Selector {margin: 10px (margin top) 10px (margin right) 10px (margin bottom) 10px (margin left);}
4. Learn predefined selectors. You can apply styles to any of these, they may be quite familiar!
- <body>
- <p>
- <h1>
- <ul>
- <li>
- <ol>
5. Syntax -
selector {property:value;} Example: p {font-family: Arial; color:red; line-height: 1.4em;}
6. Have Fun! Most of learning is by trial and error. If something doesn’t work, play with it and troubleshoot.
Here are some resources worth checking out:
Tutorials
http://www.w3schools.com/CSS/default.asp
http://www.lesliefranke.com/files/reference/csscheatsheet.html – A Great Cheat Sheet
Need more help? Ask me on Twitter: @rich83