CSS Specificity

CSS Specificity is a technique by which we calculate/identify selector precedence. CSS Specificity explains how parent child relationship is important in CSS. It is difficult to grasp for many beginners what is css specificity and how css specificity works. Many time we face a situation in which our css rules fails to work and we keep scratch our head why rules are not applying. To overcome from such kind of mind boggling situation we should first understand how CSS Specificity works.

Note: Before we move forward i want you to keep in mind that when we talk about CSS Specificity, think about Parent Child relationship of selectors.

In article CSS – Selectors, Properties and Values i explain how to override css rules or css overriding with example which helps you to understand how selectors take higher precedence.

Lets us take a example to understand how CSS Specificity works. I am assuming that you have good knowledge of HTML elements, how to create structure and how to apply css.

Example 1: HTML Structure

<div id="fruits">
    <span class="red">Apple</span>
    <span class="yellow">Mango</span>
    <span class="orange">Orange</span>
    <span class="green">Grapes</span>

In above example we have container div and four span having there classes and fruits names. We want to apply the color on fruits names as they look. Like Apple is red in color, Oranges have orange color and so on. We have four classes in our css .red, .yellow, .orange and .green.

Read More

CSS – Selectors, Properties and Values

CSS Selectors are the name which we are using in internal and external styles. It can be predefined and custom. Like – We can target to HTML tag using css and simultaneously we can apply our own custom css selector by giving id and class attribute on html tags.

Each css selector have their own “properties” : “values” in curly braces { }. Properties are predefined in CSS such as font-style, font-weight, color, border, background, width, height etc. These properties are not case sensitive but it is good practice to write properties in lower case.

Predefined Selectors:

Example 1: Targeting to html tags (predefined selectors).

body {
    background: #ffffff;
    color: #666666;
    font: 12px "Lucida Grande",Arial,"Lucida Sans Unicode",sans-serif;
    margin: 0;
    padding: 0;

h1, h2, h3, h4, h5, h6 {
	line-height: 1.4em;
	margin: 20px 0 .4em;
	color: #333;

Read More

How to apply cascading style sheet – CSS

Cascading Style Sheets or CSS is a language which is used to style HTML structure or Page. HTML (Hyper Text Markup Language) is the structure or content of the Web document/Web Page, CSS is the presentation of that document.

CSS is following set of rules which are used to present the HTML web page and to keep presentation separate from the structure.

Syntax: “Property” : “Value


body {
  margin: 0;
  padding: 0;
  font-size: 12px;

There are three ways to apply CSS in a web page. Here a interview question arises for web designer, web developer and UI Developer.
Read More