CSS Help & Resources

Introduction

CSS is all about style, your style. Colors, fonts, images, and video, can be transformed into a unique, visual display or production. You can create websites and web pages with style.

Throughout this reference you'll encounter many different examples, showing you how to apply style to all of the available HTML elements. You'll be able to see how style can be used, and what it looks like to your visitors when used.

Feel free to copy and extract the examples, for use in your own documents. After all, getting you first hand experience at implementing style is what this reference is all about.

Getting Started

Learning how to use style is really not that difficult, because the methods are clearly defined and easy to understand. And, unlike programming languages like C++ or Delphi, it's a very user-friendly type of interface, with mostly english language type of references. As always, in most languages that are not second nature to you, a reference guide is required, so you can lookup how to implement aspects of the language when you forget. No one can remember all of this information, so don't feel overwhelmed, thinking all of this must be remembered - that's what this reference is for.

For the purposes of this reference we refer to several key items, used in every element of style. The terms used are only for convenience, common to this reference, and not associated with any standard CSS definition or classification. They are listed below:

• REFERENCE

  Can be absolute such as the P,H1,TABLE tag, etc., defining the entire element; or a class reference such as P.myClass or H1.title; or an ID reference such as #myid or #my_id.

  • Absolute Reference

    P { color: red; }

    Defines the entire P HTML element as having the color red.
    SPAN, DIV { color: blue; }
    Defines the entire SPAN & DIV HTML elements as having the color blue.

  • Class Reference

    P.important { color: red; }

    Defines a class called “important”, in conjunction with the P HTML element, as having the color red.
    .important { color: red; }
    Defines a class called “important”, that can be used with any HTML element, as having the color red.

  • ID Reference

    #important { color: red; }

    Defines an id called “important”, that can be associated with any HTML element, as having the color red.

• VARIABLE

  The variable reference is wide ranging, but the most commonly used, or the ones we are aware of, are listed for reference. Examples of a variable are: “color” “background-color” “font-family”, and many more.

• VALUE

  The value is potentially defined by whatever the variable assignment is. For example, color names, such as red; or font names such as arial; or a dimension/coordinate such as 300px ( px = pixel ).

Essentially, all style statements have the same characteristics as listed above: reference, variable, and a value. Every reference needs to have an opening bracket/tag { , and a closing bracket/tag }. Every variable definition, with an assigned value should have an assignment character : with a corresponding ending character ; which defines the end of the variable definition. Follow these simple rules and procedures to ensure all of your style references are valid.

There are different presentations, or formats, programmers use to organize their style references. Everyone has their own style, so to speak. For instance, in examining the examples below, notice the differences in presentation, yet the results are all the same.

P { color: red; background-color: #ffffff; }

P
{ color: blue; background-color: #ccc; }

P {
color: red;
background-color: rgb(75%,50%,0);
}

Also note you can omit the spaces between characters too. For example, P{color:red;} is just as effective as P { color: red; }.

Creating an External CSS File

External CSS files have powerful, and portable, design capabilities. You can create many different style sheets and include them in any website you design.

In our HTML Reference, you'll learn where and how to include these files in your web documents. In this reference we'll show you how to create, and save, the file...

As described earlier, there are different ways to organize each CSS reference within external files, or within the <STYLE> HTML tag. Besides making sure your CSS code is implemented properly, the only other important factor becomes the name of the external file. Every CSS file has the file extension of “.css”. Most web designers place external style sheets in separate directories, for organization purposes, but style sheets can be saved or stored anywhere on a server. Below is a sample CSS file.

You're On Your Way

You now have a primer, of sorts, a way to implement all of the style elements in your web documents. Refer back to this reference as often as you like. It's very likely you'll forget some of the terms and definitions, and need to refresh your knowledge, from time to time.

Move on to topic: Alphabetical List.