Web-Development-Tutorials Home

Web Development Tutorials
HTML Tutorials
CSS Tutorials
Javascript Tutorials

Web-Development-Tutorials.com

Web Development Tutorials and Resources for Web Developers
from Beginners to Professionals

CSS Syntax

The basic CSS syntax is made up of 3 parts: selector {property: value}

The selector is typically an HTML tag or element such as <p>, <table>, <h1>.

The following is a CSS code example of an internal style sheet. The selector (the <p> tag in this example) is made bold.

<html>
<head>
<style type="text/css">
p
{
color: red
}
</style>
</head>
<body>
<p>
The text in this CSS example will be red.
</p>
</body>
</html>

Click on CSS Syntax Example to view what the code produces.


The property is the characteristic of the selector that you want to change such as color, font, height, width, etc.

The property (color) is made bold in the following css code example

<html>
<head>
<style type="text/css">
p
{
color: red
}
</style>
</head>
<body>
<p>
The text in this CSS example will be red.
</p>
</body>
</html>


Specifying Multiple Properties

If you want to specify more than one property, you have to separate each property with a semi-colon (;).

The following CSS code example shows you how to do this.

<html>
<head>
<style type="text/css">
p
{
color: red;
font-family: arial;
font-size: 100%;
}
</style>
</head>
<body>
<p>
The text in this CSS example will be red.
</p>
</body>
</html>


Assiging Values

A value is assigned to the property, such as defining the color, font style, or size of the font.

The values in the following CSS code example are made bold.

<html>
<head>
<style type="text/css">
p
{
color: red;
font-family: arial;
font-size: 100%
}
</style>
</head>
<body>
<p>
The text in this CSS example will be red.
</p>
</body>
</html>


The Class Selector

Class selectors allow you to define different styles for the same type of HTML tag/element. For example, the class selector lets you have 2 types of paragraphs in your web page and one is aligned to the left and another that is center aligned.

The following CSS code shows you an example of how this is done.

<style type="text/css">
p.left
{
text-align: left
}

p.center
{
text-align: center
}
</style >

<body>
<p class="left">
This paragraph has a class selector "left".
</p>
<p class="center">
This paragraph has a class seceltor "center".
</p>
</body>

Click on CSS Syntax Example to view the web page that this code produces.


Grouping Selectors

You can group selectors if they share the same declarations. Each selector has to be separated by a comma.

The following example of css code groups the header elements and will make the text in them red.

<style type="text/css">
h1,h2,h3
{
color: red
}

</style >

<body>
<h1>
The text in this heading will be red.
</h1>
<h2>
The text in this heading will be red.
</h2>
<h3>
The text in this heading will be red.
</h3>
</body>

Click on CSS Syntax Example to view the web page this code produces.


A Few Notes

You can only specify one attribute per HTML tag/element. The following CSS code example is wrong.

<p class="right" class="right">
This is a paragraph.
</p>


You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:

.center {text-align: center}

In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:

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

Do NOT start a class name with a number! It won't work in Firefox/Mozilla.


CSS Comments
You can insert comments in your CSS code much like you can with HTML code. And just as in HTML, the comment will be ignored by the web browser. A CSS comment begins with "/*", and ends with "*/", like the following example.

/* This is a comment */
p
{
font-size: 120%;
/* This is another comment */
color: black;
}

Web Development Resources

Free Hit Counters
Free Music and
Online Radio Stations

Free SEO Tools
Free Page Rank Checker
Free Back Link Checker
Free Google Banned Checker
Free Keyword Density Checker
Free Link Popularity Checker
Free Search Engine Keyword Position Checker
Free Search Engines Lisitings Preview
Free Link Extractor
Free Source Code Viewer
Free Domain Tools
Free Domain Name Availability Tool
Free Domain Whois Lookup
Free Ping Test
Free Reverse/IP Lookup
Misc Free Web Development Resources View Web Browser Details