Article No. 167
Created: 03:19 AM 12.26.03
Author: HPU Support [Link: support@homepageuniverse.com]
Original URL: https://my.homepageuniverse.com/support/knowledgebase/question.php?qstId=167
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">.
Grouping
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
}
Alignment
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 */