To MelsGraphics.com To My Html 201-Tables Lessons To My Html 101 Lessons To My Html 301 Lessons To My CSS Lessons To My Html 201-Frames Lessons To My Html 201-Forms Lessons
jump to content HOME     CSS INTRO      LESSON 1     LESSON 2     LESSON 3


~Welcome to My Homework Pages~

Graphic of paint dripping on the page with a mouse hanging onto a drop

Image of books and notes Intro to Cascading Style Sheets

Understanding CSS:
This class will introduce you to the wonderful exciting world of CSS - Cascading Style Sheets. Using CSS will allow you to banish forever those dreaded <font> tags, do things you can never do with plain HTML, and even create pages without tables.

To see the effects correctly of what we teach you in these lesson you will need a recent web browser - one produced this century. Internet Explorer 6 or better, Opera 7 or better, Firefox, Netscape 7 or better, and so on.

If you are curious enough, have a look at the source code for webtech's page - no font tags, no tables.

First things first. The "Cascading" and "Sheets" part of CSS will become clearer as we progress through the lesson.

When making the decision to use CSS instead of font tags, and especially tables, you have to realize that older browsers do not understand CSS and the page will look quite different in, for instance, Netscape 3. It is also not quite as simple as plain HTML as different browsers may treat some of the CSS styles slightly differently than other browsers, or not support that style at all.

For instance, if you are using a new browser, the headings on webtech's page have a colored background stretching across the page, while if you are there with an older browser the colored background may not display the same.

Webtech's page should have text in Verdana, or if that font is not installed on your browser, then Arial, or at least, a sans-serif font. The content area on that page has a margin of 10% on the left and on the right, with the paragraphs indented from the headings and if you resize the window, the width of the content area will resize.

But wait, if you checked the page source code you didn't see anything telling the browser that, did you. All you see are some normal HTML tags and a couple of <div> tags with an ID. Never mind, we'll get to that.

I suggest you start experimenting with replacing <font> tags and using CSS to define your fonts. Once you have become comfortable with this, then start trying out other simple CSS styles which we will teach you in this class.

 

~ Learning Can be Fun ~

To My Html 201-Tables Lessons To My Html 101 Lessons To WebTech University To My Html 201-Frames Lessons To My Html 201-Forms Lessons

HOME     HTML101     HTML201-TABLES     HTML201-FORMS     HTML201-FRAMES     HTML301 INTRO      LESSON 1     LESSON 2     LESSON 3     INTRO TO CSS

melsgraphics 2007