Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Introduction to CSS

Would you like that in plain English now?

Cascading Style Sheets, or just plain CSS for short, is a supplement to HTML. Whereas HTML defines the structure of a web page, CSS defines the presentation of the structural elements.

If you think of a web page like a house, HTML is the foundation, framework, and other hidden structural elements; while CSS is the floor coverings, paint, art placement and other visible elements.

Unlike home owners, website owners don’t have to pay property taxes on their web property . . . yet.

While these concepts may seem difficult to grasp at first, it’s only because they are foreign to you right now. They will make sense when you see them in use a few times and actually start applying them little by little to your own web pages.

Style Rules

Creating a rule isn’t as difficult as it sounds. A style rule is simply how you define an HTML element to appear, be that the color, size, placement, or other properties. For example, to write the style rule so all H1 headings are rendered in red text, simply create a rule in your external style sheet (style sheets tutorial) like this:

There now, that doesn’t look too hard, does it? It really isn’t hard. It’s just a matter of adding little bits and pieces of code as you need them. You don’t even have to remember them, you just need to know where to look them up as you need them.

An HTML element is modified from its default value by...

Always use CSS whenever it’s an option. The CSS options are far less likely to become deprecated (phased out). They both work similarly, but use different terminology and formatting. Let’s compare HTML to CSS to help you visualize the differences.

As you can see, the HTML element and CSS selector are essentially the same thing, they just go by different names in thier respective coding language. Same story with the HTML attribute and CSS property.

The CSS selector is merely the HTML element that you wish to set a rule for. When using CSS, you still use the HTML elements in your web page source code, only you set the various properties of the HTML elements in your style rules. These properties may be size, color, positioning, or many other options, depending on the element.

While the HTML attribute and CSS property are essentially the same thing, occasionally the actual terminology can be different. Both are given a value, which sometimes uses the same terminology and sometimes not. Confused yet?

You needn’t worry about the details right now, you’ll learn those as you go. For the most part it's all the same thing. If you grasp the basic concepts in this tutorial, the rest will come to you easily and naturally.

CSS Advantages

• It’s possible to create one rule to effect the style of an HTML element each time you use the element; whereas with HTML, you have to code the change into each use of the element.
• With CSS you can change one file and have that change reflected on every page of your site; whereas with HTML you have to find and make the change you want in every place on every page where that element was used to make a site-wide change.
• CSS allows for far greater cross-browser display precision.

Obviously, CSS requires much less work to use and maintain, but CSS is much more than that. Here are just a few things that you can do with CSS that can’t be done with simple HTML without resorting to quirky tricks or tedious coding that often doesn’t work the same (or at all) in all browsers:

• You can set different page margins for all sides of your page.
• You can set the font size for any text element to the exact height you want, no more preset size limitations.
• You can highlight individual words, phrases, paragraphs, headings, or even individual
  LETTERS with different background colors or background images, text colors and font families and font sizes if you really want to go crazy bananas.
• You can overlap words and make logo-type headers without making images.
• You can precisely position elements.
• Borders, border styles, backgrounds, margins, and padding can be set for any HTML element, like I just added a border around the word any, for example. Do that around link text and add a background color and your links will look like image buttons only the download time is faster.
• You can set the font for whole tables, no need to recode the same font over and over into each table cell. That was such a pain in HTML—it still causes hard-core coders recurring nightmares!
• You can make the first letter of each paragraph different, set letter spacing, change the space between lines of text, indent the start of each paragraph for that "old school" look and much more!

There really is much more you can do with CSS. You’ll discover them as you explore these tutorials.