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 (:).
- 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
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
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.