This tutorial section is designed to teach you the basics of CSS. It cannot cover all topics or all situations. It will give you a good start on learning about CSS styles and how they work. Consider this a springboard to continue learning.
Imagine that you are a web designer and have just completed a
40-page site for your client. He is thrilled with your work, but wants to make a few minor
changes. Instead of using Arial as the default font, he would like for you to change it to
Verdana. It's a simple request.
You look at your coding and see that there are font markup tags that specify the font as Arial. You have to change each and every <font> tag. At approximately 100 tags per page times the 40 pages, you have to change 4,000 items. Doing them one at a time is now a major headache and will take hours.
However, if you had defined your font using CSS (rather than using deprecated font tags), you would make the change on only one page and the changes would be made automatically on every page in the site. You've just cut the job down from hours to only a few seconds.
While covering valid CSS, remember that nothing is guaranteed to work in all browsers all of the time. Don't obsess over pixel perfection across the different browsers. If something doesn't work, look for other alternatives. Yes, you may need to rethink your design or the approach you are taking.
It all begins with the most basic page structure. It's just three tags, each which has an opening and closing tag.
The whole page is wrapped in the <html> ... </html> tag pair. Nested inside is the <head> ... </head> tags. Information inside of the head tags does not display on the page. The <body> ... </body> pair encloses all of the content of your web page such as text, images, different layout sections, etc.
The HTML tags provide the structure. The CSS defines the presentation of how that structure will look. Simple concept!
The terminology is probably foreign to you, but the concepts are quite logical and simple. Take it one step at a time and don't try to rush through every topic in one sitting. There's a lot of information to absorb and put to use.
