CSS Syntax and Selector | Css code explanation - codewithrandom

CSS Syntax and Selector | Css code explanation - codewithrandom
CSS Syntax and Selector | Css code explanation - codewithrandom

CSS ruleset/rule is composed of a selector and a declaration block.
The selector or a group of selectors targets the elements we want to style. The declaration blocks are grouped in blocks. Each declaration block contains CSS declarations which are wrapped by an opening curly brace { and a closing curly brace }.
CSS declarations or declarations are contained inside a declaration block. Each declaration has to be separated by a semicolon ; otherwise the codes won't work. It is allowed not to put a semicolon in the last declaration.

CSS declaration is composed of a pair of a property and a value separated by a colon.

  • property: human-readable identifier that indicates which stylistic feature to change
  • value: it is given to a property which indicates how the specified stylistic feature should be changed

In CSS, there are more than 300 different properties and almost an infinite number of different values. Note! Not all pairs of properties and values are allowed. Each property has a specific list of valid values.

Both properties and values are case-sensitive in CSS.

CSS Selectors

The following are simple CSS selectors. There will be more CSS selectors lessons as you go through our lessons.

Element Selectors

It is the simplest way to target all elements of a given type.

Example:

 h1 {  
   font-weight: bold;  
 }  
 p {  
   color: green;  
 }  

Class Selectors

Multiple elements can have the same class values.

CSS class selectors are very useful when targeting different elements.

The class selector consists of a dot (.) followed by a class name.

A class name is defined using the class attribute.

Example:

 .underlined-text {  
   text-decoration: underline;  
 }  
 .emboldened-text {  
   font-weight: bold;  
 }  

An HTML element can have multiple class names separated by a white space.

The example below selects both the <p> elements with the class="underlined-text" and class="underlined-text embloned-text" attributes.

 .underlined-text {  
   text-decoration: underline;  
 }  

ID Selectors

The ID selector is very useful when targeting a single element.

An ID selector consists of a hash (#) followed by an ID name.

An ID name is defined using the id attribute.

Example:

 #blue {  
   background-color: blue;  
   width: 200px;  
   height: 200px;  
 }  
 #red {  
   background-color: red;  
   width: 200px;  
   height: 200px;  
 }  

We can target only specific HTML elements with the given class or id.

The example below only selects <p> elements with the class="red" and id="green" attributes.

 p.red {  
   color: red;  
 }  
 p#green {  
   color: green;  
 }  

Grouping Selectors

Sometimes multiple CSS rulesets may have similar declarations. Take a look at the example below:

 h1 {  
   font-family: Times New Roman;  
   color: green;    
 }  
 p {  
   font-family: Times New Roman;  
   color: green;  
 }  

Looks inefficient right? Instead of repeating the same declarations we can simply have a group of selectors in a CSS ruleset.

A group of selectors consists of selectors separated by commas.

Example:

 h1, p {  
   font-family: Times New Roman;  
   color: green;    
 }  

CSS Comments

Comments can be used to explain CSS codes and make it more readable.

CSS comments are very useful for people who easily forget things like me!

They are not rendered by browsers.

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

Example:

 p {  
   color: fuchsia;  
   /* a single line CSS comment */  
 }  
 /* a multi-line comment   
 cause we love CSS but we  
 might still forget what  
 some codes are for */  

In this post, we learned about How we can use CSS Syntax and CSS Selectors.
 If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Check out more.....









Post a Comment

Previous Post Next Post