The presentation, style, and design of a web site is accomplished by using Cascading Style Sheets (CSS). CSS helps web developers and web designers to control the layout of their web-sites and take them to the next level. In order to know how CSS works you need to have a solid understanding of HTML standards and elements. In this CSS tutorial you will learn the fundamentals of CSS and what its syntax consists of.

First let’s learn some important facts about CSS:

  • CSS is used to separate design from content. It is good for presentation, usability, accessibility, and formatting.
  • CSS is composed of statements for specific elements, classes, Ids, or images.
  • CSS specify in English the names of each element and its properties.
  • The specification of each element is called a rule or a declaration.
  • With the help of CSS you can stylize every element in your HTML page.
  • You can add as many CSS as you like, but is better to maintain a single main sheet.
  • You can use and add different CSS for specific tasks; for example, you can create a specific CSS if the viewer wants to print the website.

Now let’s see how the basic syntax of CSS looks like:
Syntax Example 1
First we need to specify which element we want to style, in this case h1.
Second, we need to add braces {}.
Inside the braces we put what property or properties we want to add to our element. I wanted to add color to my headings, so I wrote color and give it a gray value of #333.
After each property remember to add a semicolon (;).

Here is another example:
Syntax Example 2

As you can see, each rule/declaration always contains a property and a value. It allows you to add as many properties and values as you like.

Let’s take a look at a basic HTML page and how I stylized each element using a Cascading Style Sheet:

That’s all readers! Practice by styling more elements and you will see that is not that hard as it looks. If you know HTML you know CSS. Best of luck!

Download Source Files