CSS Syntax

This page shows you how to correctly code CSS.

Syntax

The CSS syntax is made up of four parts: a selector, a class name, a property and a value. The selector is the HTML tag you wish to define, the class name is the custom name that you give that format you are creating, the property is the appearance you want to format, and the value is how you want it formatted.

Syntax selector.classname {property: value}

Example font.customname {font-color: red}

Formatting Rules

There are a few formatting rules you need to know about. First, if you want more than one property defined then you have to separate the different properties with semi-colons. Second, if the value has more than one word then you have to put quotes around it. Third, most CSS files will have all of the separate properties on separate lines to make it more readable, although some people don't do it that way and it isn't mandatory (I won't be putting the items on separate lines on my tutorials). Examples of all 3 rules are in the sample CSS file below:


	font.customname { font-color: red; font-size: 12px; font-style: "times new roman" }

"Classes"

By creating a class, you can create an element that will have the same formatting over the whole site. The syntax for a "class" is to have the selector show the HTML element followed by a period followed by a custom name. Then you would have the formatting specifications in brackets. Also, you can only have one class per HTML element and you can't start a class name with a number.So if you wanted to create a class of fonts to have the color green you would create a CSS file and make an entry like this:

font.customcolor {color: green}

Having the format above means you can use that class to globally format a font to have those particular characteristics. But CSS also allows you to leave off the first half of the selector - in this case the word "font" - and just use ".customcolor" as the selector. The benefit to coding the selector without using the name of the HTML element is that you will be able to format other HTML elements similarly. For example, if you used "font.customcolor" as the class name then you wouldn't be able to use that class as a way to format a paragraph, only a font. But if you use the truncated version, ".customcolor", then can use that to format any element (like a paragraph or anything else). So even though the first half of the selector specifies the element being formatted it also acts as a limiter because you can't format other types of elements. I would recommend you use the shorter version of the class element which would look like the following:

Shorter version .customcolor {color: green}

In the example below I define a class named "customcolor" to have the color blue. In the example below we defined both a header and a paragraph to have that class so we could show a class formatting more than one HTML element.

Your CSS file will look like this:


	.customcolor { font-color: blue; }

Your PHP page will look like this:


	<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <h3 class="customcolor">This header is blue.</h3><br><br> <p class="customcolor">This paragraph is formatted by using the same class.</p><br> </body> </html>

This is how it looks

This header is blue.

This paragraph is formatted by using the same class.

"ID"

An "ID" is similar to a class in the sense that it defines an element's formatting. The difference between the two is that classes are used to define an element that occurs many times but an ID defines an element that only occurs once. Why do they do this? I have no idea. Personally, I use classes all the time and never use IDs although proper coding standards dictate you use an ID for a unique element. Your page won't look any different if you only use only classes. And like classes, you can't start the name of an ID with a number.

The syntax for an "ID" is similar to a class. The selector has the HTML element being formatted followed by a pound sign (#) followed by a custom name. Then you would have the formatting specifications in brackets. So the only difference between an ID and a class is that you use a pound sign instead of a period. If you wanted to create a class of fonts to have the color green you would create a CSS file and make the entry look like this:

p#green {color: green}

Similar to a class, you can truncate the HTML element from the selector so you can use the ID for multiple HTML elements.

can be reduced to #green {color: green}

Your CSS page will look like this:


	#customcolor { font-color: #006000; }

Your PHP page will look like this:


	<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <h3 id="customcolor">This header is green.</h3><br><br> <p id="customcolor">This paragraph is formatted by using the same class.</p><br> </body> </html>