To use CSS, we need to learn what is looks like, its proper forms and where to put it on a web page. We'll start with the CSS statement.
One of the cool things about CSS is that we get to define how our pages look. This is what style is all about. One of two ways to define style is with CSS Statements. The other way is to use Style Declarations, which we'll cover in the next lesson.
Here is the style statement form:
property: value
A property is the same as an attribute. The value is just the value we gave to that property. A colon goes between the property and the value. The spaces are optional, but they make the code easy to read.
So we'll use CSS style statements to replace some attributes and their values.
Instead of
attribute="value"
we'll simply use
property: value
We are all familiar with the body tag, which uses attributes paired with values to determine the look of a page. We can think of these pairs as "attribute statements".
In CSS, we will replace attrbute-value pairs with style statements, such as the following
bgcolor="#000000" will be replaced by background-color: #000000
text="#ffffff" will be replaced by color: #ffffff
align="center" will be replaced by
text-align: center
To use a style statement in an element (tag), we combine with the word "style" like so:
style="property: value"
Just as an HTML tag may have more than one attribute, you can apply more than one style to an element. The property-value pairs are then separated by a semicolon, like so:
style="property1:value"; property2:value"
Let's start using style statements right away by placing one in a paragraph. Just use a style statement right in a paragraph tag. Here are two examples.
<p style="color: #0000cc">I feel blue.</p>
The text in this paragraph will be blue (#0000cc)*.
<p style="text-align: center">This text is centered.</p>
The text in this paragraph will be centered.
On your sampler page, write a paragraph using a style statement in a paragraph element (tag). Post your page or your paragraph code and any questions in this thread.
In our next lesson, we'll discuss CSS style declarations and stylesheets. We will also develop a list of properties to replace attributes as we go along.
Happy coding!
Gnubee
