BASEWEBMASTER

Brought To You By
Tomlin Ventures Ltd

The CSS Syntax

Looking At The Syntax Of CSS Basics.

Before we can start styling our web pages using CSS it is necessary to take a brief look at the CSS syntax and CSS selectors.

As touched on in the previous article the CSS syntax is reasonably simple to learn. The style information is alway surrounded by the { } brackets which are used to effectivly groups a string of different style declarations together under one selector, we will look at selectors shortly.

The declarations or styles themselves take the form of property : value ; pairs and within the { } brackets it is possible to include many of these such declarations.
Putting all this together you should get the format shown below.

CSS
h1			{border-color: black;}
h2			{border-color: black; border-width: 1px; border-style: solid;}

At the start of each of the above examples you will see a HTML element these are know as selectors they do not necessarily have to take on the form of HTML but you need to understand that they are used to apply the style information to specific elements of your HTML document. We will be looking at different types of CSS selectors over the next few article as you need a good understanding of them before you can use CSS effectivly.

To begin with it is probably easiest if we include the CSS code on the same page as the HTML code. In reality you would most likely store all your CSS code within an external style sheet and link this to your HTML pages but we will come on to this in a later article.

When you include CSS code within a HTML document it is best practice to state all the style information at the start of the document within the head element.

Also the CSS code itself must be contained within the style element. following these rules you should get a document format similar to the one shown below.

HTML
<html>
	<head>
		<style>
			This is where your CSS code should be written.
		</style>
	</head>
	<body>
	</body>
</html>

That is a very basic introduction to the CSS syntax do not worry if this is not totally clear yet we will be looking a various examples over the next few articles which will likely clarify any issues you may be having.

Hit the next article button below to start learning about selectors.

Share to Facebook Share to Twitter Digg This Stumble It Share to Reddit Share to Delicious Technorati LinkedIn Google Buzz Blogger More...

blog comments powered by Disqus