KNOWING ABOUT CSS:
CSS(Cascading Style sheets) as its name suggests,it is a Style sheet language. Basically,we use HTML to write all the code to put the data needed for making our required webpage.But in order to style the webpage we use CSS along with HTML.This designs our webpage and makes it more systematic. There are many ways to style using CSS.Now let us look at how selectors play a vital role in styling the webpages.
- SELECTORS:
We use selectors to select a particular HTML element and then apply CSS rules to style the webpage. There are different kinds of selectors:
Universal Selector
Class and Id Selectors
Element Selector
Combined Selectors
Attribute Selectors
Pseudo Selectors
> Universal Selector
This Selector applies to each and every element in the HTML file The syntax used for this selector is :
* {
/*write all the css rules which are to be
applied for the entire HTML*/
}
* {
padding: 0;
margin: 20px 20px;
color:#fff;
background-color: #0D0D0D;
}
The values mentioned in the above code are set for all the elements in the HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>This is Universal Selector</h1>
</body>
</html>
OUTPUT
> Class and Id Selectors
Class selectors are used to target a particular class. Similarly,Id selectors are used to target particular Id.
SYNTAX
FOR CLASS SELECTOR
.class1 {
/* define properties here */
}
FOR ID SELECTOR
#id1 {
/* define properties here */
}
Example Code
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1 class="class1">This is class Selector,it changes background color</h1>
<h2 id="id1">This is Id selector, it changes font color </h2>
</body>
</html>
CSS :
* {
background-color: #0d0d0d;
}
.class1 {
background-color: #802c2c;
}
#id1 {
color: #abb42d;
}
OUTPUT
> ELEMENT SELECTOR
This selector targets particular element. EXAMPLE CODE:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<P>this paragraph is transformed to upper case</P>
</body>
</html>
CSS :
p {
text-transform: uppercase;
}
OUTPUT
> COMBINED SELECTOR
We use this type to combine more than one simple selector
There are 4 types in it:
Child Selector ( > )
Descendant Selector (space)
Adjacent sibling Selector (+)
General Sibling Selector (~)
- CHILD SELECTOR:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h2>CHILD SELECTOR</h2>
<div>
<p>We use child selector to selects all elements that are the children of a specified element.</p>
</div>
</body>
</html>
</body>
</html>
div > p {
background-color: beige;
}
OUTPUT
- Descendant Selector (space)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h2>Descendant Selector</h2>
<p>The descendant selector matches all elements that are descendants of a specified element.</p>
<div>
<p>This is in div </p>
<p>This is in div</p>
<section><p>This is also in div</p></section>
</div>
<p>This is not in a div so style can't be applied</p>
</body>
</html>
</body>
</html>
CSS:
div p {
background-color: #060870;
color: #fff;
padding: 0px 30px;
margin-right: 80%;
}
OUTPUT
- Adjacent Sibling Selector (+)
The adjacent sibling selector is used to select an element that is directly after another specific element.
HTML:
<body>
<h2>Adjacent Sibling Selector</h2>
<div>
<p>No styling here </p>
</div>
<p>Styling applies here</p>
</body>
CSS:
div + p {
background-color: #060870;
color: #fff;
padding: 0px 30px;
margin-right: 80%;
}
OUTPUT
- General Sibling Selector:
This selects all elements that are next siblings of a specified element.
HTML:
<body>
<h2>Adjacent Sibling Selector</h2>
<div>
<p>No styling here </p>
</div>
<p>Styling applies here</p>
<P>Styling applies here also</P>
</body>
CSS:
div ~ p {
background-color: #060870;
color: #fff;
padding: 0px 30px;
margin-right: 80%;
}
> ATTRIBUTE SELECTOR:
This selector applies styling if attribute is present in our HTML Code.
HTML:
<body>
<h2>Attribute Selector</h2>
<p attribute>Styling applies here</p>
<P>No styling here </P>
</body>
CSS:
* {
background-color: #324232;
}
[attribute] {
background-color: #060870;
color: #fff;
padding: 0px 30px;
margin-right: 80%;
}
OUTPUT
> PSEUDO SELECTORS
There are different types of Pseudo Selectors:
- Before selector:
The ::before selector inserts something before the content of each selected element(s).
HTML:
<body>
<div>
<form action="">
<label class="imp-label" for="name">name</label>
<input type="text" name="name" />
<label for="email">email</label>
<input type="text" name="email" />
<button data-tooltip="Tooltip" type="submit">Submit</button>
</form>
</div>
</body>
CSS:
body {
background-color: #414141;
color: #fff;
}
/* before */
.imp-label::before {
content: "test ";
}
OUTPUT
- After Selector:
In CSS, ::after creates a pseudo-element that is the selected element’s last child.
HTML:
<body>
<div>
<form action="">
<label class="imp-label" for="name">name</label>
<input type="text" name="name" />
<label for="email">email</label>
<input type="text" name="email" />
<button data-tooltip="Tooltip" type="submit">Submit</button>
</form>
</div>
</body>
CSS:
body {
background-color: #414141;
color: #fff;
}
/* After */
.imp-label::after {
content:" ";
display: block;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #67f018;
}
OUTPUT
- Hover:
The :hover selector is used to select elements when you mouse over them.
HTML:
<body>
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
molestias debitis distinctio nulla modi excepturi magni perferendis
consectetur quidem eos?
</p>
</div>
<div>Welcome to live class</div>
<span>Span is just a span, nothing more</span>
<p>We all know paragraph</p>
<div>
<input type="text" name="" placeholder="email" id="" />
</div>
<ul>
<li class="bg-black text-white">item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<div>
<li>awesome</li>
<ul>
<li>highlight me</li>
<li>highlight me</li>
</ul>
</section>
</body>
CSS:
li:hover {
background-color: orange;
padding: 5px;
border: 2px solid #0d0d0d;
}
OUTPUT
- FOCUS:
The :focus selector is used to select the element that has focus.
HTML:
<body>
<div>
<input type="text" name="" placeholder="email" id="" />
</div>
<ul>
<li class="bg-black text-white">item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
CSS:
input: focus {
background-color: green;
color: #ffffff;
}
OUTPUT
> First Child, Last child:
Style applies to the first or last child of a given element.
HTML:
<body>
<ul>
<li class="bg-black text-white">item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
</body>
CSS:
li:first-child {
background-color: darkseagreen;
}
OUTPUT
More Pseudo Classes
1. Pseudo elements
CONCLUSION:
CSS selectors are one of the most important parts of CSS. They give you the ability to target HTML elements on your web page that you want to style.
Without CSS selectors, you wouldn't be able to style your page to look how you want.