Main Page / Browse Categories / Howto's & Guides / CSS / CSS Syntax
CSS Syntax
The basic syntax for a Cascading Style Sheet is simply:

selector {property: value}

This may seem rather confusing, especially if you don't fully understand what each component is or what it does. Allow me to explain the individual parts:

  • The selector is normally the element or tag you wish to define

  • The property is the attribute you wish to change

  • The value is the value for the property

Here's an example:

Body {color: black}

The above example would set the body's default text color to black. This is similar to the standard HTML tag <Body color="black">.


Now that you have the syntax down, let's move on to grouping. This will allow for you to change an attribute for several different selectors. For instance, if you wanted all headers to be green, you can set this up like so:

h1, h2, h3, h4, h5, h6
color: green


If you wanted to have certain elements aligned either to the right or center, you can do so using CSS. The below example will show you how this is done:

.right {text-align: right}
.center {text-align: center}

The .right would allow for text to be aligned to the right of the page. This is similar to the HTML attribute <td align="right">.

<p class="right">This paragraph will be right-aligned.</p>

The .left would allow for text to be aligned to the left of the page. This is similar to the HTML attribute <td align="left">.

<p class="center">This paragraph will be center-aligned.</p>

CSS Comments

You can also insert comments into your CSS, to help explain what certain elements will do. This can be helpful when you edit your source code at a later date. A comment will be ignored by the browser.

A CSS comment begins with a /* and ends with a */, like this:

/* This is nothing more than a simple comment line */

User Comments
CSS Syntax
Add Comment
There are no user comments for this topic.
Add Comment
Additional Info
General Information
Article No. 167
Created: 03:19 AM 12.26.03
Author: HPU Support

No attachments.

Did this help you?
Yes No

Yes553 (52%) Voted Yes529 (48%) Voted NoNo

Other Options
Print Article
Email Article

Related Articles
Understanding CSS