WHAT IS CSS ?
CSS means Cascading Style Sheets which are used to style the HTML elements in a webpage. There is an analogy that if HTML is said to be the building then CSS is said to be the decorations done to the building to make it beautiful like paints and other decorations etc,
CSS Syntax:
Selector {
style rules
}
Style Rules = property: value;
Eg:
h1 {
background-color: red;
}
WAYS TO ADD CSS TO HTML
Inline-Styles:-
CSS styling can be done directly to the HTML elements using style attributes by which most of the elements can be styled directly and also called as inline-css. This form of writing CSS has the highest specificity but this makes our HTML cluttered hence not recommended. Eg:
<h1 style="color: #ff0000;">Hello World</h1>Internal Style Sheet :-
CSS is now being written into the head tag of the HTML file itself using the regular CSS syntax Eg:
<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>
<style>
h1 {
color: #ff0000;
}
</style>
</head>
This has the mid level specificity but this kind of approach increases the size of the HTML page thus takes longer time to load the website when deployed to production.
External Style Sheet :-
A seperate file is created for writing CSS with an extension called .css and this file is being linked with the HTML file as it removes clutter and minimises the HTML file size and makes css code reusable with the help of link tag.
<!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>Hello World</h1>
</body>
</html>
using this link tag makes css code reusable as multiple HTML files can be styled uniformly by one .css file just by changing the "href" attribute of the tag, Although external css files have the least specificity among the 3 methods this method is the most recommended way of writing clean CSS code.
Selection of HTML Elements using CSS Selectors :-
Universal Selector
As the name denotes universal meaning " all " ,This selector selects all html elements but can easily be overridden by other selectors and certain CSS properties inherit the values from the universal selector Eg:
* { margin: 0; padding: 0; box-sizing: border-box; }removes all default margin and padding in the document provided by the browser and doing so is called the Global Reset.
Element Selector
These are nothing but CSS selectors based on the HTML tag names like the example mentioned below :
p {
margin: 15px;
}
Class Selector
To select elements based on class names assigned to the HTML elements .[DOT] notation is used in the style sheet to particularly pinpoint a certain element.For Eg refer codepen above. These selectors have a speciality ie,Class names can be Reused in HTML and that makes CSS code reusable for eg,
<!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>
<style>
.red-text {
color: #ff0000;
}
</style>
</head>
<body>
<ul>
<li class="red-text">item-1</li>
<li class="red-text">item-2</li>
<li class="red-text">item-3</li>
<li class="red-text">item-4</li>
<li class="red-text">item-5</li>
</ul>
</body>
</html>
As said in the example adding only one class of "red-text" to multiple
ID Selector
ID selectors in CSS are denoted by the # [Hash or Number ]sign. They work the same as class selectors work except these are NOT REUSABLE by convention. These selectors have a higher specificity than class selectors and are much used in JAVASCRIPT DOM manipulation. Eg:-
AND Selector(Chained)
These selectors are used to target one particular element which has certain class attributes assigned to them in a chained manner and hence the name. Eg:-
As shown in the example if certain group of classes are present the "AND" selector applies the style rules else it will not apply.
COMBINED Selector
These are nothing but the individual selectors combined.
<style>
h1,
h2,
h3 {
text-align: center;
}
</style>
If there is a need to style multiple elements in the same manner using same CSS rules then the combined selector comes to our rescue from writing redundant code.
Inside Element Selector
Normally we use to write HTML code by nesting elements to structure the webpage properly. For Eg:-
<ul>
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
</ul>
Inorder to make an unordered list in HTML we used to nest
- tags and this method of writing one tag inside another is called Nesting tags and when we need to style these nested elements we use inside element selectors.
(Click the HTML button to see the code)
Direct Child Selector
This works like the Inside Element Selector to select the nested elements but the only difference is it selects the element only if it's a direct child. Eg:-
Adjacent sibling Selector
The adjacent sibling selector (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element. "Sibling" meaning child of the same parent ie, when there are two elements A,B inside of container C then both A & B are said to be the siblings to each other. Eg:-
HTML
<ul>
<li>One</li>
<li>Two!</li>
<li>Three</li>
</ul>
CSS
li:first-of-type + li {
color: red;
}
Pseudo-Classes
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
There are multiple pseudo classes available in CSS but we are going to discuss only a few important classes like :-
- Link
- Visited
- Active
- Hover
:link
This pseudo class is used to select all unvisited links in the webpage which has a valid "href" attribute added.
Syntax:
a:link {
color: yellow;
}
:visited
This pseudo class is used to select all visited links in the webpage which has a valid "href" attribute added. Syntax:
a:visited {
color: violet;
}
:active
This pseudo class is used to control the state of the active element used by the end-user incase of links active state triggers when the links are clicked and this class tells which style rules should apply during the occurance of such click events. Syntax:
a:active {
color: orange;
}
:hover
This pseudo class applies when the mouse pointer or any pointing device hovers over a particular element without clicking it
Syntax:
a:hover {
color: orange;
border: 1px solid #000000;
}
Pseudo Elements in CSS
Pseudo meaning (false) so in this case this applies as there is no HTML element involved. Nornaly we used to create a HTML element and style it but in this peculiar case there is no DOM node is involved. The entire pseudo element's structure and style rules are written entirely in style sheet itself.
Syntax Difference between Pseudo Classes Vs Pseudo Elements :
/* Pseudo Classes */
.btn:hover {
/* style rules */
}
/* Pseudo Elements */
h1::before {
/* style rules */
}
Mostly used Pseudo Elements are :-
- : :before
- : :after
::Before Pseudo Element
In CSS, ::before creates a pseudo-element that is the FIRST child of the selected element. It is often used to add cosmetic content to an element with the content property.
Eg:
::After Pseudo Element
This is same as the before element the only difference between these two is ::after is the LAST child of the selected element.
h1::after {
content: "";
display: block;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: orange;
}
Reference