What is CSS Rules ??
Table of Contents
After the advantages of CSS, we should go to know about CSS syntax and rules.CSS Syntax is nothing but it is a prototype that you have to follow to write CSS Codes.CSS is normally comprised of CSS rules.
CSS rules have three major parts.
1> Selectors.
2> Property.
3> Values.
Note:-These rules are defined in the below sections.
1. Selectors
This is the main part of CSS rules or Syntax.This part contains HTML element like <body>, <h1>, <p>, <table>, etc. with the help of this part, we can apply CSS property on the specific HTML elements.
2. Property
This part is the second important part of CSS rules.This part contains the CSS property like (background, text-align, font-size, color, transition, etc).
3. Value
This part is the last important part of CSS rules. This part contains the CSS property’s Value as shown in the below picture.
This diagram Contains 3 Parts.
First:- define HTML element name.
Second:- define CSS properties under the open and close curly braces.
Third:-Define the value of given properties.
Example:- A HTML element <table> will contain border and this border size is 1px, border color #C00(In hexadecimal format) and border style Solid.
Kinds of Selectors
There are many kinds of Selectors used in the CSS style sheet. But you have to understand about this. Because You can not use one type of selector on everywhere. These type of Selectors are defined below
1.Type Selector
We have used this type of selector above. But again, we are going to define and use.
The Type Selector contains the HTML element’s name. like (body, h1, h2, p, table, etc).
Example:- /*Type Selector Example*/
h1 /* Type Selector*/
{
background:black;
color:white;
}
2.Universal Selector
This Universal selector contains all other types of selectors in itself. That means, This type of selector matches all properties with HTML element then apply the properties on HTML’s element. Universal Selector Sign (*)
For Example:- /*Universal Selector Example*/
*{
color:red;
}
3.The Descendant Selector
Descendant selectors are used to get an element that is inside in other specific elements. For more clarity with one example that is given below.
Example:- h2 p{color: yellow; background: black;}
This Example shows that only h2(heading level 2) that contains p element will change into black background and yellow font color.
4.The Class Selector
This Selector points to the HTML element’s class. This selector defined in CSS by dot symbol with element class name. For Example:- If your HTML element’s class name block then using in CSS by assigning dot symbol prefixed before the class name.
For example:-
.block{color:red;}
5.The ID Selector
This selector contains all HTML element’s ID. That means, with the help of this selector, we can point a unique HTML element’s ID and can apply CSS properties.
For example:-
#head
{
background:black;color:white;
}
6.The Child Selector
This type of selector is the same as the descendant selector but something is different. This selector is used to point out the child of the parent element. For more clarification with one example.
div > h1 {color:red;background:black;}
7.The Attribute Selectors
You can also apply CSS styles with particular attribute of HTML elements.HTML element contains many attributes under the brackets.These attributes represents as:-
<img src=”source image file” height=”200px” width=”300px”/>
In this element,attributes are src, height, width of <img> HTML element.
You can apply CSS properties to these particular attributes.
For example:- img[src=”a.jpg”] { border:solid red 2px;}
Multiple Style Rules
You may need to define multiple style rules for a single element. You can define these rules to combine multiple properties and corresponding values into a single block as defined in the following example −
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Here all the property and value pairs are separated by a semicolon (;). You can keep them in a single line or multiple lines. For better readability, we keep them in separate lines.
For a while, don’t bother about the properties mentioned in the above block. These properties will be explained in the coming chapters and you can find complete detail about properties in CSS References.
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 −
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
This define style rule will be applicable to h1, h2 and h3 element as well. The order of the list is irrelevant. All the elements in the selector will have the corresponding declarations applied to them.
You can combine the various id selectors together as shown below −
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}