CSS Syntax

Any CSS syntax is made out of 3 elements: a value, a property and a selector. (selector {property: value}) The selector is the HTML element or tag that you want to define. Property is used as the name of the attribute that is to be changed and value will give the property its characteristic. Never neglect the proper order and use of the curly braces and colons. An example of a proper CSS syntax:

p {font-family: verdana}

Quotes need to be used in the event that the chosen value is made out of multiple words:

p {font-family: “times new roman”}

If you want to put in more values you can do so with the use of a semicolon:

p {text-align: justify;color: blue;font-family: verdana}

The problem is that defining a complex CSS syntax will put out a very long line. This is why you can use every single property on just one line. The example above would become:

p
{
text-align: justify;
color: blue;
font-family: verdana
}

Grouping

One feature that you will want to use with CSS Syntax is Grouping. Selectors can be grouped by using commas. For instance, let us make every header element look blue:

h1,h2,h3,h4,h5,h6
{
color: blue
}

Class Selector Syntax

Class selector is used in order to define various styles for a similar type HTML element. For instance, let us think that we want to have 2 paragraph types in 1 document. One would have a left alignment and the other a right alignment. The CSS Syntax we would use is:

p.left {text-align: left}
p.right {text-align: right}

Class attribute needs to be used in the HTML document:

<p class=”left”>Text to be displayed</p>
<p class=”right”>Text to be displayed</p>

In the example above the first line will display a paragraph that featurs text with left alignment and the second one right alignment. In order to apply a number of classes that is higher than 1 to an element we would use a syntax that is easy. We will basically use SPACE between the classes. For instance, if we want to display a paragraph with left alignment and text written in bold:

<p class=”left bold”>Text to be displayed</p>

The good news is that the tag name can be omitted in your desired selector if used for style deginition to be utilized by every single HTML element with this class. For instance, in this example we have all the HTML elements left aligned:

.left {text-align: left}

Now we will use H2 as an HTML element and have the above mentioned left alignment class. If instead of H2 we will use the paragraph tag, the result will be that the displayed text would have the same rules defined.

<h2 class=”left”>
Text to be displayed
</h1>

CSS Comments

In order to explain the code that is used the designer can put in comments. These have proven to be very useful if you will edit the code at any later date as you might forget what is done. This would mean you would lose time and you would not like this to happen for sure. CSS comments will start with “/*” and will end with “*/” Here is an example:

/* Here you put the comment of choice */
p
{
text-align: justify;
color: blue;
/* Here you can put another comment */
font-family: verdana
}

Fact to remember:

If you start any class name by using a number, it will not work in Firefox!

CSS Tutorial Navigation:

Next CSS Lesson: How to Insert a Style Sheet

Previous CSS Lesson: What is CSS?