Just like any programming language works, the CSS code is also interpreted based on some rules.
Here, the browser interprets what is called the style rules.
Based on the rules, it applies the design to the corresponding elements of the webpage.
The style rule can be seen as following 3 parts:
Selector – This is the HTML part of your webpage. Any HTML tag that will be styled by the CSS code is termed a Selector.
Property – All the hassle that once had to be done as HTML attributes, now falls under this category. Simply put, all the color, border, cell padding, etc. attributes of your HTML tags are now the CSS properties
Value – We have the style-ee we have the style-er all that remains is the style. The value corresponds to the style value given to the Property to be applied for the Selector.
CSS Syntax
The basic syntax for a basic CSS code can be shown as
1 2 3 | selector { property: value } |
the general syntax of defining a CSS rule is as above.
the selector then inside parenthesis property: value.
CSS Types of Selectors
Selectors with a specific type body,h1, div span, etc
CSS Type Selector
Selectors with a specific type body,h1, div span, etc
It will show the result
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <title>CSS Tutorial</title> <style> body { background-color: wheat; } </style> </head> <body> <h1>CSS Type Selector</h1> <p>Selectors with a specific type body,h1,div span, etc</p> </body> </html> |
Universal Selectors
This is when you want don’t want the selector to be specific for type and be universally applied at all tags * is used as a universal selector
1 2 3 | *{ color:green } |
CSS Universal Selectors
Universally applied at all tags
It will show the result
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <title>CSS Tutorial</title> <style> * { color: green } </style> </head> <body> <h1> CSS Universal Selectors </h1> <p>Universally applied at all tags</p> </body> </html> |
Descendant Selectors
It’s for when you want a style to be applied to an element only in case it is a part of another specific element
1 2 3 | div p { color: blue; } |
color will only apply to p inside the div
CSS Descendant Selectors
Descendant selector applied to all p tags inside the div
Descendant selector not applied to p tag outside div
It will show the result
Class Selectors
As the name suggests, this is for the styling of the class attribute in CSS class is represented by the class name preceded by a dot(.),
1 2 3 | .one{ color:purple; } |
CSS Class Selectors
applied based on class
It will show the result
ID Selectors
Similar to class selectors, this is for the id attribute to be assigned on CSS with # then the id attribute value
1 2 3 | #title { color: red; } |
CSS Id Selectors
applied based on the id
It will show the result
Child Selectors
It is very much similar to descendant selectors in its execution. chile selector selects only the immediate child of a tag whereas the descendent selector selects a tag at any level inside the parent tag. to select a child we use > symbol
1 2 3 | div >p { background-color: yellow; } |
CSS Child Selectors
applied based on the id
It will show the result
Attribute Selectors
You can specify a particular attribute (e.g. type= “password”) that you want to style.
1 2 3 | div >attribute[type="value"] { background-color: coral; } |
Attribute Selectors
1 2 3 4 5 6 7 | <h1> Attribute Selectors</h1> </h1> Fname <input type="text" name="fname"><br><br> Lname <input type="text" name="lname"><br><br> Password <input type="password" name="password"><br><br> Email <input type="email" name="email"><br><br> |
It will show the result
Multiple Style Selectors
You can have multiple properties for a single selector depending on the style requirement. Each property-value pair is separated by a semicolon (;)
You can specify a particular attribute (e.g. type= “password”) that you want to style.
1 2 3 4 | div >h1 { color: white; text-align: center; } |
CSS Multiple Style Selectors
We can apply multiple styles separated by semicolumn
It will show the result
Grouping Selectors
This is when many selectors have similar property-value pairs.
1 2 3 4 | div >h1 { color: white; text-align: center; } |
CSS Multiple Style Selectors
CSS Multiple Style Selectors
CSS Multiple Style Selectors
We can apply the same style to multiple selectors
It will show the result
As we discussed CSS Types of Selectors. Hope you understand and are able to implement the concepts.