Basics of CSS Syntax

Syntax of CSS

In this chapter, you will be given an idea of CSS syntax that will help you using CSS with HTML elements/selectors in coming chapters.

The syntax of CSS is quite different to HTML. The general format is:

{property: value;}

For example:

{

font-size: 10px;

font-family: Aerial, Verdana;

color: 00FF00;

}

In above examples font-size, font-family and color are properties and 10px, “Aerial, Verdana”, 00FF00 are respective values of each property. The combination of property:value is called ‘declaration’. Declarations have to be enclosed in curly braces.

A single line may contain more than declarations as below:

{

font-size: 10px; font-family: Aerial, Verdana; color: 00FF00;

}

Each declaration is ended with a semi-colon. Whereas property and values are separated by colon ‘:

Applying CSS in HTML tags

There are different ways of applying CSS in HTML tags in web page.

Using selectors in external files

In this method a selector is assigned properties/values at CSS level. For example if you want H1 in your document formatted as follows:

H1

{

font-weight: normal;

font-size: 20px;

line-height: 40px;

background: #000000;

padding: 5px 25px;

color: #355681;

box-shadow: inset 0 0 5px rgba(53,86,129, 0.5);

font-family: ‘Muli’, sans-serif;

}

All H1 in your document will be formatted on the basis of above formatting.

In-line CSS

CSS can be applied within HTML tags itself, called as in-line CSS. For example:

SEE EXAMPLE ONLINE

Using external CSS file into HTML document

Generally external CSS files are used for multi-pages web site. A separate CSS file with .css extension is created that contains HTML document display specification. See example below:

  • For this example our external CSS file name is style.css
  • Place this file at same directory where HTML file resides
  • Style.css contains following code:

The HTML file code:

SEE EXAMPLE ONLINE

This line in <head> tag includes style.css external css file.

<link rel=”stylesheet” href=”style.css”>

Other ways

We can also use Classes and IDs to apply CSS into HTML tags. These are explained in detail to their respective chapters along with examples.