CSS Syntax

Introduction

In the previous chapter we got a detailed introduction to the places where we can write CSS code together with considering them with the the property color. We didn't however explain the syntax of writing CSS anyhow and likewise in this chapter we will take all that up a notch and discover the rules to writing CSS.

Let's get into real business!

Simply put:

Every language has a set of rules to be considered when working with it.

HTML has its own bracket way to denote tags and then within them their respective content; XML follows it along; JavaScript has its own way of doing things like creating arrays, objects etc; C++ has its own minimal int main() {} statement as a must in a program and so on.

We usually refer to these set of rules and the structure to be followed when coding as the syntax of the language

Talking about CSS, it has its own specific syntax to define styles for HTML elements as is the whole spotlight of this chapter.

selector {property: value}

First we select elements, then specify the property to be modified and then finally give it a value. If you don't understand anything don't worry cause we will be going in detail of every segment to the above code next.

Property, value, declaration

There are more than a handful of characteristics that we can define for HTML elements such as their color, font-size, background-color, width, height, position and so on. Color is a characteristic of an HTML element i.e it could be blue, yellow etc.

In CSS we call this the property of the element - or much specifically - the style property.

Some examples of CSS properties include color, font-size, background-color etc.

Each property can have a given value. For example, as highlighted earlier, the color of an element can be blue or yellow or red, or any other CSS color.

Not surprisingly, in CSS, we refer to this as the value of the property.

A property-value pair is seperated by a colon : (much like an HTML attribute-value pair is seperated by an equal sign =). The property name is followed by the colon which is (followed optionally, but preferably by a space) followed by the value.

Some examples of property-value pairs include color: blue, font-size: small, background-color: yellow.

Collectively a property-value pair is called a style declaration. So instead of calling color: blue, font-size: small, background-color: yellow as property-value pairs, we can simply call these declarations.

Multiple declarations are seperated by a semi-colon ;.

Once again recalling the code from the previous chapter - specifically the one written inside the <style> tag and an external stylesheet - we saw a couple of additional things in it, particularly a pair of curly braces {} and the word p. We shall explain both of these now.

Selectors, rulesets

p {color: orange}

Before applying styles to HTML elements we have to first select them. How can the interpreter possibly ever know which element or set of elements are we trying to style? The answer is: using selectors.

Reiterating over the code above, the word p at the start of the CSS code is what's called a CSS selector.

Zooming in a bit, it's classified as a tag selector since it uses the tagname p to select all <p> elements. Other classifications of selectors exist as well including id, class, attribute, universal and pseudo selectors.

Together, the selector and its declaration block is called a ruleset, or simply a rule.

And this concludes by the idea that a stylesheet is then simply a collection of multiple rulesets.

Property names and values in CSS are case-insensitive i.e if you write any of the following it is perfectly correct.

p {COLOR: blue}

p {COLOR: BLUE}

However it is usually good to go lowercase and follow one form of writing.

CSS property names and values that constitute multiple words contain hyphens - between the different words.

p {background-color: blue}

p {display: inline-block}

In the example above we gave only one selector p and applied some styling to it. In CSS, however, we can make multiple selectors styled on one block of code by simply seperating the selectors using , commas.

p, h1 {color: blue}

p,h1 {color: blue}

p,
h1
{color: blue}

It is very unlikely that you are writing CSS for an HTML page and none of your elements have more than one styling property on them. To add multiple properties just use the semi-colon ; seperator to seperate different properties from each other. The semi-colon will follow the property value as shown below:

p {color: blue;background-color: black}

When we have multiple properties it is a good idea to put them on seperate lines like this:

p {
    color: blue;
    background-color: black
}

Just like we have comments in HTML, we have comments in CSS and nearly all other computer languages. Their purpose is the same but the way the are written differs from language to language (not very often - usually comments are written in the same way in many languages).

Comments are for a developer's use, in that they help him/her and even other people reading his/her code in understanding what is its purpose. A computer won't understand them and likewise will simply ignore them. They are recommended in development phase but in production phase it is better to have them removed cause they will just cost bandwidth for no special reason.

To write comments in CSS we use the /* and */ symbols. Everything between them is a CSS comment and hence will be ignored.

p {
    color: blue; /* a comment within a style block */
}
/* a comment */

/* a multi-line comment
 * spanning multiple lines
 */

We've covered some solid ground in this chapter and by now know a lot to the flavour of writing CSS. There is a lot to digest in this chapter and in the ones coming but the good news is that the details aren't confusing at all. If something has a long learning curve doesn't mean its difficult. Stay focused and learn and you will be all set to go.