Basic CSS
Many 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
December 1st, 2010 at 4:54 am
You’ve made a very excellent article.
If it’s ok with you, I would like to request permission to use your article as it fits to my topic. I will be happy to negotiate to pay you or hire you for this.
With Regards from
Republic Polytechnic
December 3rd, 2010 at 12:33 am
Hey! Wonderful piece of writing! I am only a conventional web site visitor (even more like addict
) of your site nevertheless I had a problems. I’m only not genuinely certain if its the best blog to ask, but you don’t have any spam feedback. I recieve comments for instance watch films online typical. Would you assistance me? Thank you.
December 28th, 2010 at 8:46 am
Howdy old chap. Awesome stuff. Can you write also about these news?