CSS
Cascading Style Sheet (CSS) is mainly used to add style to the web page. We can write CSS on our web pages in 3 ways.
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
With the help of inline CSS, we can write the CSS within the specific element with the use of style attributes. To apply inline CSS include a style attribute to the tag you want to style and then add the CSS to it.
For example:
<h3 style=”color:blue ”> Hello World! </h3>
Internal CSS
We can use internal CSS within the same HTML page with the help of < style > tag. So in the head tag, we need to include a style tag and inside that, we have to write the CSS which needs to be applied.
For Example:
<style >
h1{
color:blue;
}
</style>
External CSS
Here we create a separate file with the extension of “.css” where all the CSS code is written to style the web page. And we can simply link this CSS file to the HTML page within the head tag with the help of a < link > tag. So in the link tag, we have to assign the rel as stylesheet and type as text/CSS and specify the path and the name of the CSS file in the href attribute.
For example:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
NOTE: If we try to target a single element in the HTML page with all the 3 ways together then Inline CSS will be applied to the element as the priority followed by Internal CSS and then External CSS.
CSS Selectors
So now we know that with the help of CSS we can apply a style to our web pages. But in order to apply CSS to style the page we need to know how to select and target the elements. So here CSS selectors come into play which helps us to select and target these HTML elements. We can select and target multiple elements at the same time with the help of CSS selectors. This comes in handy when we want to apply the same style to different elements and also helps us to avoid repeating the code again and again and saves a lot of time.
There are many selectors available
Universal Selectors
With the use of a universal selector, we can select every element in the HTML document. Mostly the universal selector is used to reset the browser's default style which is applied to every HTML document. We can use the universal selector with the use of an asterisk symbol. For example.
*{
background-color:pink;
}
The above line of code will make the background color of the HTML page pink.
Element Selector
The element selector is used to select an HTML element based on its name. For example, If we want to apply a style to every single h1 tag in the HTML document then we must target the h1 tag.
For example
h1{
color:white;
background-color:grey;
}
So the above line of code will find all the h1 tags in the HTML document and make its background color grey and text color white.
Class Selector
The class selector matches and selects HTML elements based on the value of their given class. Specifically, it selects every single element in the document with that specific class name By using the class selector we can select multiple HTML elements at one time and style them in a similar way without repeating the CSS code for each element.
To use the class selector we need to declare a class attribute with a value to the element and in the style, we need to use the dot character followed by the class name provided to the HTML element.
For example
.conatainer{
background-color:#808080;
color:#fff;
}
In the above code, the element with the class container is selected and styled accordingly.
ID Selector
An ID selector selects an HTML element based on the value of its ID attribute.
Note that the ID of the element must be unique within a document. That is, there should be only one HTML element with the given ID value. You cannot use the same ID value for any other element than this.
To select an element using a specific ID, use the hash character # followed by the ID value.
For example
#link{
color:#000;
font-size:12px;
}
The above code will only match a unique element with an id value of the link
Grouping CSS Selector
Group selectors let you target and style more than one element a once. To use the group selector we need to write the element names that we need to style and separate them by commas.
For example
div,p,h1{
color:#fff;
background-color:#808080;
}
So the above line of code will target all the div, p, h1 elements with the style.
CSS combinator selector
A combinator is a type of selector that specifies and describes the relationship between two selectors.
Types of combinators
• Descendant combinator.
• Direct child
• Sibling.
Descendant combinator
The descendant combinator is used to select the descendants of the specific HTML element. First, we need to write the parent element, then with a space, we need to write the child element.
For example
<html>
<head>
<style>
div p{
color:blue;
}
</style>
</head>
<body>
<div>
<h2> child heading 2 in div</h2>
<p> child paragraph inside a div</p>
<span>child span in div</span>
<p>child paragraph inside a div</p>
</div>
<p> paragraph outside a div</p>
</body>
</html>
So in the above code, only the p elements inside the div element will be selected and targeted with the style.
Direct Child
The direct-child combinator only selects and targets the direct child of the parent element. We can use the direct child combinator by specifying the parent element followed by > character and then the child element you want to target.
For example
<!DOCTYPE html>
<html">
<head>
<style>
div > a{
color:green;
}
</style>
</head>
<body>
<div>
<a href="#">direct child of div</a>
<a href="#"> direct child of div </a>
<p><a href="#"> direct child of p </a></p>
</div>
</body>
</html>
In the above code, we have a div element and within that, we have two 'a' elements and one p element which are the direct child of the div element, the p element within the div has an 'a' element inside it which is the direct child of the p element. So the style will be only applied to 'a' tags that are in the div tag.
Sibling Combinator
The adjacent sibling combinator selects and targets only the immediate sibling which is the sibling that appears right after the first element. We can use the adjacent sibling combinator by specifying the first element followed by a + character followed by the element you want to target which immediately appears after the first element.
For example
<html >
<head>
<style>
div + h3{
color:green;
}
</style>
</head>
<body>
<div>
<p>child of div</p>
</div>
<h3> sibling of div</h3>
<p>paraghraph </p>
</body>
</html>
In the above code, we can see that the div element is followed by the h3 element which is the direct sibling of the div element and only targets and styles the h3 element.
And selector (Chained)
We can select and target a specific element with the help of chaining a selector, this can be done by combining multiple selectors together. For example, if there is a .test class for a p element then the CSS for targeting that element will look like
p.test{
color:grey;
}
So the above line will only target the p element having a .test class and style it. Please note that there shouldn’t be any space between the selectors or else it will work as descendant selector.
Pseudo-Element Selectors
Pseudo-element selectors are used to styling specific parts of an element. These can be used to insert new content or change the appearance of certain sections of content. For example, we can use pseudo-elements to add new content before or after the selected element. To select a pseudo-element use :: character followed by a keyword that will allow you to style a specific part of the selected element. Let me give you some examples of the most common pseudo-elements that you will encounter.
::before Pseudo-Element
You can add content before an element using the ::before pseudo-element.
Example
h1::before {
content: "hello! ";
}
The above code of line will add hello! before the content of each h1 element
::after Pseudo-Element
You can add content after an element using the ::after pseudo-element.
Example
h1::after {
content: "hello! ";
}
The above code of line will add hello! after the content of each h1 element.