CSS gives the browser instructions on how to display a certain element — styling, spacing and positioning. If HTML is the struts and bricks that make up the structure of a house, CSS is the plaster and paint to decorate it. This is done using a system of rules, the exact syn tax of which you’ll learn more about below. These rules state what HTML elements should have styling added to them, and then within each rule list the properties (eg color, size, font, etc.) of those HTML elements they want to manipulate, and what values they want to change them. For example, a CSS rule might state “I want to find every <h2> element and colour them all green”, or “I want to find everyparagraph with a class name of author-name, colour their backgrounds in red, make the text inside them twice the size of normal paragraph text , and add 10 pixels of spacing around each one.
Defining style rules
Without further ado, let’s have a look at a CSS code example, and then dissect it:
The pertinent parts are as follows:
• The selector identifies the HTML elements that the rule will be applied to, identified by the actual element name, eg. body, or by other means such as class attribute values — we’ll get on to these later.
•The curly braces contain the property/value pairs, which are separated from each other by semi-colons; the properties are separated from their respective values by colons
•The properties define what you want to do to the element(s) you have selected. These come in wide varieties, which can affect element colour, background colour, position,margins, padding, font type, and many other things.
•The values are the values that you want to change each property of the selected elements to. The values are dependent on the property, for example properties that affect colour can take hexadecimal colours, like #336699, RGB values like rgb(12,134,22) or colour names like red, green or blue. Properties that affect position, margins, width, height etc can be measured in pixels, ems, percentages, centimeters or other such units.
Now let’s look at a specific example:
The HTML element this rule selects is
in the HTML document(s) that use this CSS will have this rule applied to it, unless they have more specific rules also applied to them, in which case the more specific rule(s) will overwrite this rule. The properties affected by thisrule are the margins around the paragraphs, the font of the text inside the paragraphs, and the colour of that text. The margins are set at 5 pixels, the font is set as Arial, and the colour of the text is set as blue.
We will come back to all of these specifics later —the main goal of this tutorial is to cover the basics of CSS and not the nitty-gritty details.
A whole set of these rules goes together to form a style sheet. This is the most basic syntax of CSS there is. There is more, but not much — probably the coolest thing about CSS is its simplicity.
One thing to know early on is how to comment in CSS. You add comments by enclosing them
Comments can span several lines, and the browser will ignore these lines:
/* These are basic element selectors */
You can add comments either between rules or inside the property block — for example in the following CSS the 2nd and 3rd properties are enclosed inside comment delimiters, so they will be ignored by the browser. This is useful when you are checking out what effect certain parts of your CSS are having on your web page; just comment them out, save your CSS, and reload the HTML.
Unlike other languages, CSS only has block level comments — single line comments do not exist. You can of course constrain the comment to a single line if you wish, but you still need to include the opening and closing comment delimeters
For more details and queries please feel free to email, visit or call us. Wishing you the very best for all your future endeavors.