CSS: Cascading Style Sheets
It describes how a web page should render on a browser. It is used to style and layout web pages - for example, to change the font, color, size, and spacing of content, split it into multiple columns, or add animations and other decorative features.
CSS has style rules, the browser interprets them and applies them to the corresponding element in an HTML page.
CSS style rule set consists of a selector and declaration block, e.g.
Selector -- h1 Declaration -- {color: red; font size: 14px;}
- The selector targets an HTML element that you want to style.
- The declaration block contains one or more declarations separated by semicolons.
- The declaration includes a CSS property name and a value, separated by a colon. For Example, color is property and red is value, font-size is property and 14px is value.
- CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
CSS is mainly about targeting html elements. Once you can target any html element then styling is very easy. To target an html element we use css selectors.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
font size: 14px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Output :
Selectors
A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. There are different types of selectors, let's see them one by one.
Universal Selector
As the name suggests it applies to all elements of HTML document. It selects everything by the '*' symbol.
* {
color: black;
}
Output: It applies black color to every element of a web page.
Individual Selector
The individual selector selects elements based on the element name. You can select all p elements on a page like this (in this case, all p elements will be center-aligned, with a red text color).
p {
text-align: center;
color: red;
}
Output :
Class and Id Selector
- The class selector selects elements with a specific class name. To select it, write a period (.) character, followed by the name of the class.
- The id selector uses the id attribute of an HTML element to select a specific element. The id of an element should be unique within a page, so the id selector is used to select one unique element. To select it, write a hash (#) character, followed by the id of the element.
- In the below example, all HTML elements with class=”center” will be red and center-aligned and HTML elements with id=”para1″ will be in green color.
#para1{
color: green;
}
.center{
color: red;
text-align: center;
}
Output:
Chained Selector
It works as an 'and' conditional operator, it selects an element if the condition is satisfied. To select it, write an element or class then period (.) character, followed by the name of the class or element. e.g. p.class-name - it selects an element if it has both p and class name in it.
<!DOCTYPE html>
<html>
<head>
<style>
p.centerclass {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>New Paragraph</p>
<p class="centerclass">This is a paragraph.</p>
</body>
</html>
Output:
Direct Child Selector
It selects the direct child of the corresponding element. 'To select it - write parent element followed by > greater than mark followed by child element'. In the below example, css works on direct child <li> of <div> not on a second list item.
<style>
div > li {
color: red;
}
</style>
<div>
<li>First list item</li>
<ul>
<li>Second item</li>
</ul>
</div>
Output:
Combined Selector
It works on all the elements mentioned and is separated by a (,) comma.
h1, p{
color: red;
}
Output:
Inside an element Selector
It selects elements inside an element.
div ul li {
color: red;
}
Output: It selects <li> inside of <ul> which is inside of <div>.
Sibling Selector (+) or (~)
- Adjacent Sibling Selector (+) is used to select an element that is directly after another specific element.
Sibling elements must have the same parent element, and "adjacent" means "immediately following". In case of
div + p- It will select Immediate<p>after end of<div>
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Adjacent Sibling Selector</h2>
<div>
<p>Paragraph 1 in the div.</p>
</div>
<p>Paragraph 2 in the div.</p>
<div>
<p>Paragraph 3. After a div.</p>
</div>
<p>Paragraph 4. After a div.</p>
</body>
</html>
Output :
- General Sibling Selector (~) selects all elements that are the next siblings of a specified element. In the case of
div ~ p- It will select all<p>after<div>ends.
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: Pink;
}
</style>
</head>
<body>
<h2>General Sibling Selector</h2>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<p>Paragraph 3.</p>
<p>Paragraph 4.</p>
<code>Some code.</code>
<p>Paragraph 5.</p>
</body>
</html>
Output:
Pseudo Selector - ::Before and ::After
- The
::beforepseudo-element can be used to insert some content before the content of an element. - The
::afterpseudo-element can be used to insert some content after the content of an element. - Using a
::beforeand::afterpseudo-element to add content is discouraged, as it is not reliably accessible to screen readers. - The following example inserts an orange block before the content of each
<h1>element and quotes before and after<q>element:
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: ' ';
display: block;
width: 20px;
height: 20px;
background-color: orange;
}
q::before {
content: '"';
color: blue;
}
q::after {
content: '"';
color: red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<q>Some quotes</q>, he said, <q>are better than none.</q>
</body>
</html>
Output:
Pseudo Element - :hover
It is triggered when the user hovers over an element with the cursor.
Let's conclude our discussion on CSS basics, please feel free to share your thoughts.
Thank You
If you enjoyed this blog :)
Follow me on LinkedIn