Module 10 - Page 05 - Basic CSS Syntax: Defining HTML Tags (Selectors) Using Properties

Basic CSS Syntax: Defining HTML Tags (Selectors) Using Properties

An HTML tag's appearance properties are defined in CSS using the following syntax:

tagname {  }

First, you type in the tag name, whatever it is, followed by a space, then an opening curly-brace followed by a closing curly-brace (the curly-brace symbols are right above the "return" or "enter" key on your computer keyboard). This is called a "declaration".

You will place the properties that you want to define for the tag inside the curly braces; you may define as many properties in a declaration for a given tag as you want.

Generic Declaration Example:

tagname { property-name:value; }

Generic Declaration Example with Multiple Properties:

tagname { property-name:value; property-name1:value1; property-name2:value2; }

Real Declaration Example:

p { font-size:24pt; color:#000000; text-align:left; }

In the above declaration, I have reset the P tag to be 24 point, black, and aligned left.

The tagname portion of the declarations shown above is called the "selector". The "selector" is whatever tag you're currently defining in CSS.

Example:

selector { property-name:value; }

means the same as:

tagname { property-name:value; }

I mention this, because the official CSS standards refer to the tagname as the "selector", and I don't want you to be confused by the difference in the terminology. It all means the same thing. To prevent confusion, I will refer to the tagname portion of the CSS declaration of a tag as the "selector" from now on.

Note: when declaring the selector in CSS, make certain that you "match case" with the way the HTML tags are spelled in your HTML pages. Since we're all now using all-lower-case tag names in HTML, it is important to use all-lower-case selectors in CSS, as well.

Main Menu