CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Syntax and Selectors

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

A CSS rule consists of a selector and a declaration block:

CSS Selector

The selector is an HTML tag at which a style will be applied (p).

The declaration block (in curly braces) contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.


The Element Selector

The element selector selects elements based on the element name.

Run code

In the example above p is a selector, color and font-size are properties and given #3366cc and 24px are the corresponding values of these properties.

Note: A CSS declaration always ends with a semicolon ";", and the declaration groups are always surrounded by the curly brackets "{ }".


The Class Selector

You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule.

To select elements with a specific class, write a period (.) character, followed by the name of the class.

In the example below, all HTML elements with class="language" will have the following style:

Run code

HTML elements can also refer to more than one class.

Run code

The ID Selector

You can define style rules based on the id attribute of the elements. An element having that id will be formatted according to the defined rule.

The id of an element should be unique within a page, so the id selector is used to select one unique element.

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The style rule below will be applied to the HTML element with id="info":

Run code

Universal selector

The universal selector, written as (*) i.e. asterisk or star symbol, matches every single element on the page.

The universal selector is often used to remove the default margins and paddings from the elements for quick testing purpose.

Run code

The style rules inside the (*) selector will be applied to every element in a document.


Grouping Selectors

You can apply a style to many selectors if you like. Just separate the selectors with a comma, as given in the following example:

Run code

There are more selectors like attribute selectors, pseudo-classes, pseudo-elements. We will discuss about these selectors in upcoming chapters.


CSS Comments

Comments are usually added with the purpose of making the source code easier to understand. It may help other developer (or you in the future when you edit the source code) to understand what you were trying to do with the CSS. Comments are significant to programmers but ignored by browsers.

A CSS comment starts with /* and ends with */

Run code