Search within TutorialsPark

CSS Syntax and Rules


Learn Basic CSS style rules, selectors, properties, declarations etc.


Anatomy of a CSS style rule.

A CSS style sheet is a collection of a number of style definitions, each style definition has two main components

Selector: To select the element to which the CSS rule applies

Declaration: Specifies how the selected element should be styled.Multiple declarations are seperated by colon(;)

The Declaration further comprises of two components:

Property: Specfies the feature of the element to be affected. Eg: font-family,color etc.

Value: The value for the given property.

Note: The property name and value are seperated by a colon (:).

Selector { Property:Value;}
h1,h2 { font-family:Georgia;}

  • h1,h2 -Selector.
  • font-family:Georgia; -Declaration.
  • font-family: -property.
  • Georgia; -value.


The Working of Selectors

1.The Browser interprets the webpage as a tree like structure made up of HTML tags. This tree like outine structure is called as Document Object Model (DOM).

2. The entire webdesign and Webdevelopment revolves around the Concept of Document Object Model

3. Javascript uses the DOM to manipulate HTML elements to make dynamic webpages and to load fresh data Asynchronously.

4. In the Same way CSS uses the DOM to apply styles to specific elements within the Webpage.

Consider the Given HTML webpage



DOM tree for the above HTML webpage




Explanation

1. Here , the element <html> is called as the Root element .

2. The element <head> and <body> are the children( or child) elements of <html> tag.

3. The element <meta> and <title> are child elements of <head> element.

4. Similarly <h1> and <p> are child elements of <body> element. So on and so further.

5.The elements <body> and <head> are siblings to each other. Same is true for <meta> and <title> and <h1> and <p> and so on.

6. The Browser used the DOM as a map to select the right element based on the selectors which is a combination of tags and attributes.


CSS Declaration Block

Generally, the style rules have more than one lines of declaration, this is called as a declaration block.

Example:CSS declaration Block