CSS - Basics
Everything you need to know to start writing CSS
Have you ever wondered why your favourite website looks the way it does? Well, this is the courtesy of HÃ¥kon Wium Lie who created Cascading Style Sheets (more commonly known as CSS). CSS is basically a coding language through which websites derive the look and feel for their frontends. Without CSS, developers would be faced with the conundrum of showcasing plain text on white backgrounds
For reference, here is a GitHub webpage with its CSS disabled ->
I know what you're wondering, how dull does it look !!!.
So for this purpose, we use a variety of CSS selectors which play a pivotal role in the presentation of elements.
CSS SELECTORS
CSS Selectors fundamentally define a pattern to select elements to whom CSS can be efficiently applied.
Let us see this with the help of an example:- Initially, we have an HTML document with no CSS applied to it.
<!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>
</style>
</head>
<body>
<div>Welcome to live class</div>
<span>Span is just a span, nothing more</span>
<p>We all know paragraph</p>
<ul>
<li class="bg-black text-white">item1</li>
<li >item2</li>
<li >item3</li>
<li >item4</li>
<li>item5</li>
</ul>
<div>
<p>lorem</p>
<li>awesome</li>
<ul>
<li>highlight me <a href="#">test</a></li>
<li>highlight me</li>
</ul>
</div>
<section>
<p class="sibling">Test 1</p>
<p >Test 2</p>
<p>Test 3</p>
<p >Test 4</p>
<p>Test 5</p>
</section>
</body>
</html>
So its OUTPUT will be -->
CSS Selectors can be grouped into the following categories based on the type of elements they can select -->
BASIC SELECTORS
- UNIVERSAL SELECTOR
Selects all elements. Optionally may be restricted to a specific namespace or all namespaces.
*{
background-color: #758283;
font-size: larger;
}
- INDIVIDUAL SELECTOR
Selects all the elements with the same name
p {
background-color: #5DA3FA;
}
- CLASS SELECTOR
Selects all the elements that have the given class attribute
.bg-black {
background-color: #0d0d0d;
color: #4DD637;
}
.text-white {
color: white;
}
- ID SELECTOR
Selects an element based on the value of its ‘id’ attribute. There should only be one element with a given id in a document
#spanid {
background-color: burlywood;
color: #E21717;
}
- ATTRIBUTE SELECTOR
The CSS attribute selector matches the elements based on the presence of some given value or attribute
a[href = "https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors"] {
background-color: #E6425E;
color: #FFFFFF;
}
- AND SELECTOR (CHAINED)
p.chained {
background-color: chartreuse;
}
- COMBINED SELECTOR
Used to jointly select 2 or more elements.
span, li {
color: #ffffff;
}
- DIRECT CHILD
The child combinator(>) is placed between 2 CSS Selectors. It matches only those elements matched by the 2nd selector that are the direct children of the first selector.
div>ul>li {
background-color: deeppink;
}
- GENERAL SIBLING COMBINATOR
The General Sibling Combinator(~) separates 2 selectors and matches all iterations of the 2nd element, that follows the first element )though not necessarily immediately) and are children of the same parent element.
p ~ li {
color: #F4BE2C;
}
- ADJACENT SIBLING COMBINATOR
The adjacent sibling combinator(+) separates 2 selectors and matches the 2nd element only if it immediately follows the 1st element, and both are children of the same parent element.
.sibling + p {
background-color: #E21717;
}
PSEUDO-ELEMENTS
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). You can use only one pseudo - element in a selector. It must appear after the simple selectors in the statement.
: :before
It creates a pseudo-element that is the 1st child of the selected element. It is inline by default
: :after
It creates a pseudo-element that is the last child of the selected element. It is inline by default.
Now let us understand this with the help of an example -->
<!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>
body {
background-color: #414141;
color: #fff;
}
/* before */
.imp-label:hover::after{
content: "This Text only appears on hovering";
display: inline;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: orange;
}
/* after :: part of label */
</style>
</head>
<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>
</html>
Now upon Hovering -->
