What is CSS?
CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any kind of XML documents including plain XML, SVG and XUL.
CSS Selectors
CSS selectors define the pattern to select elements to which a set of CSS rules are then applied. There are many types of selector are :-
Basic Selectors
1. Universal Selector
The universal selector is used as a wildcard character. It selects all the elements on the pages.
2. Individual Selector
The Individual selector is use when we want to apply properties on specific elements such as p { color: #0000 }. Here, it is a paragraph element and inside curly braces we applied color on paragraph element so now this color will apply to all the paragraph element which are present in our whole html page.
3. Class and ID Selector
Class Selector
In class selector we simply give the class name inside the html tags such as class="example" and then we write . before the "class" name and then we can apply any CSS properties on that class and one more thing that we can give multiple class name to the tag also.
ID Selector
In ID selector we simply give the ID name inside the html tags such as id="example" and then we write # before the ID name before writing CSS properties and then we can apply any CSS properties so now question arise here so what's the different between "class" and "id"? so the difference is that
as per standard rule if we want to apply some style then always prefer "class" name but if we want to perform some DOM manipulation and also want to apply some style then that time we use ID selector.
4. Chained Selector
The chained selector is use when there is a situation where you had given same "class" name then we will give either of the tag one more class name and then we target that specific class name by using . such as <p class="para mypara" > here we had given two different class name to target and another tag is <p class="para"> so to apply style on first para we write like .para.mypara{background-color: #88888 }
5. Combined Selector
The combined selector is useful when we want to apply same style on multiple tags. Such as we had written different tags in our html page like <h1>, <p>, <span> now to apply style we simply write like h1, p, span{background-color: #D9D55B}
6. Inside an element Selector
This selector is used when we want to style any inside element it will work similar to direct child but there is some difference between them and that difference we look into direct child selector.
7. Direct Child Selector
This selector is used when we want to style directly a child element such as we had created a <div> element and inside it there are many different tags such as <span>, <li> and there is also a sub-child <li> inside <ul> element and we only want to style that <li> element which is child of <div> element.
8. Sibling Selector
This selector is use when we want to style next tag after the tag on which we had given the class name. To style sibling(next) tag we can use three different symbols to denote next tag such as + and ~. But both the symbol have different use case where + symbol apply style on only one next tag and ~ symbol will apply style on the remaining tag which are come after that tag on which we had given the class name.
Pseudo-elements
Pseudo element is the keyword added to a selector that lets you style a specific part of the selected element. We can target the area which is not provided in HTML using the pseudo elements.
::after
This ::after will create an pseudo element after the selected target in order to add the content next to it. We will use content keyword in order for adding some content like text or anything else.
::before
This ::before will create an pseudo element before the selected target in order to add the content at that place. We will use content keyword in order for adding some content like text or anything else. we can add required content before or after using these pseudo elements.
Thanks for reading and if this content is helpful to you then please like it...