Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended
to simplify the process of making web pages presentable. CSS allows you to apply styles to
web pages. More importantly, CSS enables you to do this independently of the HTML that
makes up each web page. It describes how a webpage should look: it prescribes colours,
fonts, spacing, and much more. In short, you can make your website look however you
want. CSS lets developers and designers define how it behaves, including how elements are
positioned in the browser.
While HTML uses tags, CSS uses rulesets. CSS is easy to learn and understand, but it
provides powerful control over the presentation of an HTML document.
Why CSS?
CSS saves time: You can write CSS once and reuse the same sheet in multiple
HTML pages.
Easy Maintenance: To make a global change simply change the style, and all
elements in all the webpages will be updated automatically.
Search Engines: CSS is considered a clean coding technique, which means
search engines won’t have to struggle to “read” its content.
Superior styles to HTML: CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison to
HTML attributes.
Offline Browsing: CSS can store web applications locally with the help of an
offline cache. Using this we can view offline websites.
CSS versions release
years:
CSS Syntax:
CSS comprises style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule set consists of a selector and
declaration block.
1. Selector: A selector in CSS is used to target and select specific HTML elements
to apply styles to.
2. Declaration: A declaration in CSS is a combination of a property and its
corresponding value.
Selector -- h1
Declaration -- {color:blue;font size:12px;}
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a
colon.
A CSS selector selects the HTML element(s) for styling purposes. CSS
selectors select HTML elements according to their id, class, type,
attribute, etc.
CSS selectors: There are many basic different types of selectors.
Simple Selector: It is used to select the HTML elements based
on their element name, id, attributes, etc.
Element Selector
Id Selector
Class Selector
Group Selector
Universal Selector:
Attribute Selector:
Pseudo-Class Selector:
Pseudo-Element Selector:
Example: Consider the sample code to understand selectors and their
uses in a better way.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>
Sample Heading
</h1>
<p>
Geeks for Geeks is a computer science
portal for geeks and computer enthusiasts.
Geeks for geeks provide a variety of
services for you to learn, thrive and
also, have fun! Free Tutorials, Millions
of Articles, Live, Online and Classroom
Courses, Frequent Coding Competitions,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.
</p>
<div id="div-container">
Geeks for geeks is a computer science
portal for geeks and computer enthusiast.
Geeks for geeks provide a variety of
services for you to learn, thrive and
also, have fun! Free Tutorials, Millions
of Articles, Live, Online and Classroom
Courses, Frequent Coding Competitions,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.
</div>
<p class="paragraph-class">
Geeks for geeks is a computer science
portal for geeks and computer enthusiast.
Geeks for geeks provide a variety of
services for you to learn, thrive and
also, have fun! Free Tutorials, Millions
of Articles, Live, Online and Classroom
Courses, Frequent Coding Competitions,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.
</p>
<a href="#">Learn HTML</a>
<a href="#">Learn CSS</a>
<a href="#">Learn Javascript</a>
</body>
</html>
We will apply CSS rules to the above Example.
Element Selector: The element selector selects HTML elements based
on the element name (or tag) for example p, h1, div, span, etc.
style.css: The following code is used in the above Example. You can see
the CSS rules applied to all <p> tags and <h1> tags.
Syntax:
h1 {
color: red;
font-size: 3rem;
}
p {
color: white;
background-color: gray;
}
Output:
Id Selector: The id selector uses the id attribute of an HTML element to
select a specific element.
Note: An id of the element is unique on a page to use the id selector.
style.css: The following code is used in the above Example using the id
selector.
Syntax:
#div-container{
color: blue;
background-color: gray;
}
Output:
The CSS rule below will be applied to the HTML element with id=”div-
container”:
Class Selector: The class selector selects HTML elements with a specific
class attribute.
style.css: The following code is used in the above Example using the
class selector. To use a class selector you must use ( . ) followed by class
name in CSS. This rule will be applied to the HTML element with the class
attribute “paragraph-class“
Syntax:
.paragraph-class {
color:white;
font-family: monospace;
background-color: purple;
}
Output:
Universal Selector: The Universal selector (*) in CSS is used to select
all the elements in an HTML document. It also includes other elements
which are inside under another element.
style.css: The following code is used in the above Example using the
universal selector. This CSS rule will be applied to each and every HTML
element on the page:
Syntax:
* {
color: white;
background-color: black;
}
Output:
Group Selector: This selector is used to style all comma-separated
elements with the same style.
style.css: The following code is used in the above Example using the
group selector. Suppose you want to apply common styles to different
selectors, instead of writing rules separately you can write them in
groups as shown below.
Syntax:
#div-container, .paragraph-class, h1{
color: white;
background-color: purple;
font-family: monospace;
}
Output:
Attribute Selector: The attribute selector [attribute] is used to select
the elements with a specified attribute or attribute value.
style.css: The following code is used in the above Example using the
attribute selector. This CSS rule will be applied to each and every HTML
element on the page:
Syntax:
[href] {
background-color: lightgreen;
color: black;
font-family: monospace;
font-size: 1rem;
}
Output:
Pseudo-Class Selector: It is used to style a special type of state of any
element. For example- It is used to style an element when a mouse
cursor hovers over it.
Note: We use a single colon(:) in the case of a Pseudo-Class Selector.
Syntax:
Selector:Pseudo-Class {
Property: Value;
}
style.css: The following code is used in the above Example using the
Pseudo-Class selector. This CSS rule will be applied to the h1 tag on the
page when user will take their mouse cursor upon it because using the
selector, we selected the h1 tag and in pseudo-class, we added hover.
h1:hover{
background-color: aqua;
}
Output:
Pseudo-Element Selector: It is used to style any specific part of the
element. For Example- It is used to style the first letter or the first line of
any element.
Note: We use a double colon(::) in the case of a Pseudo-Element
Selector.
Syntax:
Selector:Pseudo-Element{
Property:Value;
}
style.css: The following code is used in the above Example using the
Pseudo-Element selector. This CSS rule will be applied to the p tag on the
page.
p::first-line{
background-color: goldenrod;
}
Output:
