what is css

CSS stands for Cascading Style Sheet and it's a programming language used to define the style of a website together with HTML. While Hypertext Markup Language (HTML) is used to structure a web document (defining things like headlines and paragraphs, and allowing you to embed images, video, and other media), Cascading Style Sheet language comes through and specifies your document’s style page layouts, colors, and fonts (shoutout to font-family and font-style!) are all determined with CSS syntax, meaning that CSS is one important language fo. you to master in terms of styling your web pages!

what is a selectors

A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the subject of the selector. A selector is one of the properties of the object that we use along with the component configuration. A selector is used to identify each component uniquely into the component tree

How many types of CSS selectors are there?

**1. .Universal Selector

1. .Individual Selector
2. .Class Selector
3. .Id Selector
4. .Chained selector
5. .Combine Selector
6. .Inside an element
7. .Direct Child
8. .Sibling ~ OR +
9. .Psuedo Selectors **

Universal Selector

Universal selector Universal selector works like a wild card character, The universal selector provided by CSS helps in choosing any elements within the HTML page. It goes with a single element and uses the asterisk (i.e., "*") symbol used for denoting the selector as a universal selector.

Syntax

selector {  property : value;  }

* {  background-color: #355764;  }
Font-size:20px;
}

Individual Selector

In individual selector with directly picks the tag name and applies the style to it. syntax

selector {  property : value;  }

h1 {  background-color: #355764; }

.Class Selector

Class selector a class selector is a name preceded by a full stop (“.”)We can give multiple classes with the same name to different HTML elements.

Syntax

.intro {
    color: red;
    font-weight: bold;
}

Id Selector

an ID selector is a name preceded by a hash character (“#”).In the Id (#) selector, there is only one id to one HTML element and the id should be unique within the same file.

Syntax

selector {  property : value;  }

#Id name {  background-color: #355764

And Selector (Chained)

What if you have more than one class in the Html element or What if you have class and id both in the same HTML element? then you have style using and selector. It is like AND condition in mathematics. when the condition is met style will be applied. Note:- In between both selectors, there should be no space.

Syntax

selectorSelector{  property : value;  }

.class name.class name{  background-color: #355764;  }

#Id name.class name{  background-color: #355764;  }

Combine selector

When You use multiple selectors to target multiple HTML elements that are multiple selectors. Note:- Multiple selectors separated by comma

Syntax

selector, Selector, Selector{  property : value;  }

.class name, .class name{  background-color: #355764;  }

#Id name, .class name, .class name{  background-color: #355764;  }

direct child selector

The child selector selects all elements that are the children of a specified element

syntax

selector1 > selector2{  property : value;  }

tag-name >tag-name{  background-color: #355764;  }

#Id-name >.class name{  background-color: #355764;  }

Sibling ~ OR +

sibling selector selects all elements that are next siblings of a specified element. syntax

selector1 + selector2{  property : value;  }

tag-name + tag-name{  background-color: #355764;  }
}

Psuedo Selectors

Psuedo Element ::before and ::after ::before create a pseudo-element before that is the first child of the selected element applies styles with the content property. This is the inline property by default.

Syntax

selector::before{  property : value;  }
tag-name::before{ 
content:" ";
          border: 1px solid #000;
          padding: 10px;
          border-radius:20px;
          background-color:#ff3d00; 
 }

::after create a pseudo-element after that child of the selected element applies styles with the content property. This is the inline property by default.

Syntax

selector::after{  property : value;  }

tag-name::after{ 
content:" ";
          border: 1px solid #000;
          padding: 10px;
          border-radius:20px;
          background-color:#ff3d00; 
 }

:Hover

:Hover used to give after Effect to the HTML element. When the cursor pointer is pointed at the element the effect applies to the element.

Syntax

selector:hover{  property : value;  }