CSS Tutorials

Introduction CSS

Syntax In CSS

Evolution of CSS

Selectors In CSS

Backgrounds In CSS

Fonts In CSS

Links In CSS

Tables In CSS

Box Model In CSS

Border In CSS

Images In CSS

Colors In CSS

Types of CSS

CSS ID and Class

Padding In CSS

Outlines In CSS

Positioning In CSS

Dimensions In CSS

Scrollbars In CSS

Layouts In CSS

Cursor In CSS

Unit In CSS

Pesudo Classes In CSS

Margin In CSS

Visibitlity In CSS

Validations In CSS

Layers In CSS

Media Types In CSS

Lists In CSS

References In CSS

How to make margin on page

Sample page template of CSS

CSS subjective question

CSS Interview question

CSS Objective question

CSS FAQS

A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document.

A style rule is made of three parts:

1. Selector: A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <table> etc.
2. Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color or border etc.
3. Value: Values are assigned to properties. For example color property can have value either red or #F1F1F1 etc.

selector {
property:value; 
}

There is no limit on the number of property:value pair that can be specified for a selector.

There are three main types of selectors:

1. type selectors: Type selectors target elements by their element type.

h1 { color: red }

2. class selectors: Class selectors allow us to apply the same styles to different elements at once by using the same class attribute value across multiple elements. The class selector selects elements with a specific class attribute. To select elements with a specific class, write a period character, followed by the name of the class:

   CSS

   .hellodelhi { color: green }
   

   HTML

   <div class="hellodelhi">color: green</div>
   <p class="hellodelhi">color: green</p>
   

3. ID selectors: ID selectors are even more precise than class selectors, as they target only one unique element at a time. The id selector uses the id attribute of an HTML element to select a specific element. An id should be unique within a page, so the id selector is used if you want to select a single, unique element.

   To select an element with a specific id, write a hash character, followed by the id="hellodelhi"of the element.

   #hellodelhi { color: red;}