Chapter 2 - What is the Syntax of CSS

The syntax of CSS is quite easy but different than that of HTML syntax. At first look, it seems to be a very tough and lengthy but once you take a look at the whole syntax of CSS, it consists of only 3 parts.

I have already describe the syntax of stylesheet in Chapter 1 and you might remember that style sheet is of 3 types.

1. Inline
2. Internal
3. External

Each CSS type consists of 3 parts:-

1. Selectors
2. Inheritance
3. Comments

CSS Selectors is the HTML element and selectors are of two types. 

1. Single Selector
2. Combined or Multiple Selectors

The property is the actual property title, and the value is the style you apply to that property.

Do you know that each selector can have multiple properties, and each property within that selector can have independent values.

The property and value are separated with a colon and contained within curly brackets. Multiple properties are separated by a semi colon. Multiple values within a property are separated by commas, and if an individual value contains more than one word you surround it with quotation marks.

Example of Single CSS Selector:-

 selector
 {
   property:value;
 }

Now the question is what are selectors, properties and values?

So have a look to understand all these:-

• Every Tag of HTML is a selector
• Every Attribute of HTML tags are properties
• CSS value is the same thing as in HTML

 body
 {
   background-color:#ff2354;
   font-family:"Verdana, Arial, Serif";
 }

CSS Inheritance is just like a programming language where you nest one element inside another, the nested element will inherit the properties assigned to the containing element. Unless you modify the inner elements values independently.

For example, if you declare a font in the body will be inherited by all text in the file no matter the containing element, unless you declare another font for a specific nested element.

Example 1:-

 body
 {
   background-color:green;
   font-family:"Verdana, Arial, Serif";
 }

In example 1, it is clearly declared that if you set background color as green of body and font family as verdana then all your sub selectors of under body will inherit the same formatting and all text within the HTML file will be set to Verdana and background as green.

If you wanted to style some text with another font style or color, like a header or a paragraph then you can do as in example 2:-

Example 2:-

 p
 {
   background-color:yellow;
   font-family:Serif;
 }
 h1
 {
   font-family:Arial;
   background-color:orange;
 }

Now all <h1> tags within the file will be set to Arial with background color as orange and all <p> tags are set to Serif with background color as yellow, leaving text within other elements unchanged from the body declaration of Verdana with background color as green.

Combined Selectors are just like single selectors but uses commas after every single selector whose properties and values are same.

For Example:-

 h1,h2,h3,h4,h5,h6
 {
   background-color:yellow;
   font-family:Serif;
 }

Comments are very useful while designing a long or lengthy css code for your website and can be used to explain why you added certain selectors within your css file.

Comments help others who may see your file, or to help you remember why you used this particular code. You can add comments that will be ignored by browsers in the following manner:-

 /*This is a comment*/

I hope, you would understand the basic syntax of CSS coding along with all the three parts of style sheet coding.

If you have any query, leave you message in the comment box and we will get back to you soon.