What is CSS?

 CSS stands for Cascading Style Sheets

 CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web
pages all at once
 External stylesheets are stored in CSS files

CSS Demo - One HTML Page - Multiple

Styles!
Here we will show one HTML page displayed with four different stylesheets.
Click on the "Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4"
links below to see the different styles:

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.

CSS Example
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of
large websites, where fonts and color information were added to every single
page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website
by changing just one file!

CSS Tutorial
Read

Courses

Jobs



This CSS tutorial, whether you’re a student or a professional is a valuable resource to
enhance the visual appeal of your websites or personal blogs. Here, you will learn
CSS from basic to advanced concepts, such as properties, selectors, functions, media
queries, and more.
CSS is used to enhance the visual presentation of web pages. Without the use of CSS,
a web page will appear visually unappealing.
 CSS Tutorial

What is CSS?
CSS (Cascading Style Sheets) is used to style web pages. The reason for using this is
to simplify the process of making web pages presentable. It allows you to apply styles
on web pages. More importantly, it enables you to do this independently of the HTML
that makes up each web page.
 CSS Tutorial

Why learn CSS?

Styling is an essential property for any website. CSS increases the standards and
overall look of the website makes it easier for the user to interact with it. A website
can be made without CSS, as styling is a MUST since no user would want to interact
with a dull and shabby website. So for knowing Web Development, learning CSS is
mandatory.
CSS Code Format
It is the basic structure of the CSS style of a webpage.

body {
background-color: lightgray;
}
h1 {
color: green;
text-align: center;
}
p {
font-family: sans-serif;
font-size: 16px;
}
Types of CSS: There are three types of CSS which are given below.
 Inline: Inline CSS contains the CSS property in the body section attached
to the element.
 Internal or Embedded: The CSS ruleset should be within the HTML file
in the head section i.e. the CSS is embedded within the HTML file.
 External: External CSS contains a separate CSS file that contains only
style properties with the help of tag attributes.
Key Features
 CSS specifies how HTML elements should be displayed on screens.
 The Major key feature of CSS includes styling rules which are interpreted
by the client browser and applied to various elements.
 Using CSS, you can control the color text, the style of fonts, spacing
between elements, how columns are sized, variation in display for different
devices and screen size as well as a variety of other effects.
CSS Tutorial Complete References
 Properties
 Selectors
 Functions
 Questions
Interview Questions and Answers
Practice Quiz Sets
 Basic Quiz Set
 Intermediate Quiz Set
 Advanced Quiz Set
Learn more about CSS
 Introduction
 Website Layout
 Advantages and Disadvantages
Projects
 Design GeeksforGeeks logo
 Meet the Team Page Design
 Tribute Page Design
 Design a web page
 Contact us Page Design
 Create Browsers Window
 Design Email Newsletter
Examples
This CSS examples section contains a wide collection of CSS programming questions.
The examples are categorized based on the topics including properties, selectors,
functions, and many more.
FAQs
Q. Is learning CSS worth it when there are lots of CSS Frameworks?
A. Yes, learning CSS is still worth to investment time, it gives you a free hand to
design your website as you want. Frameworks is a collection of pre-written CSS code
you can utilize as a starting point for your projects.
Q. What does CSS mean?
A. CSS was established to address the issue of tags for formatting a web page, which
were not intended in HTML. It eliminated the style formatting of HTML pages,
making it easier and more cost-effective to create large websites.
Q. How CSS is different from HTML?
A. HTML is used to define a web page structure, while CSS is used to style it. CSS
can be internal or external depending on the requirement and has higher backup and
support than HTML.
Recent Articles

Learn to code easily with our course Coding for Everyone. This course is accessible
and designed for everyone, even if you're new to coding. Start today and join millions
on a journey to improve your skills!

Whether you're preparing for your first job interview or aiming to upskill in this ever-
evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide
top-quality content at affordable prices, all geared towards accelerating your growth in
a time-bound manner. Join the millions we've already empowered, and we're here to
do the same for you. Don't miss out - check it out now!

CSS Introduction
Read

Courses
Video

Jobs



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.
For example :
 CSS
selector {
property1: value1;
property2: value2;
}

CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.
Here is a more specific example: In the following example all p elements will be
centre-aligned, with a blue text colour:
 CSS
p {
color: blue;
text-align: center;
}

Let’s see how our page looks with & without CSS :
Before CSS: In this example, we have not added any CSS.
 html
<!DOCTYPE html>
<html>
<head>
 <title>Example</title>
</head>
<body>
<main>
<h1>HTML Page</h1>
<p>This is a basic web page.</p>
</main>
</body>
</html>

Output:

Without CSS

After CSS: In this example, we added some CSS styling inside the HTML code
only to show how CSS makes a dull HTML page look beautiful.
 html
<!DOCTYPE html>
<html>

<head>
<title>Example</title>
<style>
main {
width: 600px;
height: 200px;
padding: 10px;
background: beige;
}

h1 {
color: olivedrab;
border-bottom: 1px dotted darkgreen;
}
 p {
font-family: sans-serif;
color: orange;
}
</style>
</head>

<body>
<main>
<h1>My first Page</h1>
<p>This is a basic web page.</p>
</main>
</body>

</html>

Output:

With CSS

Learn to code easily with our course Coding for Everyone. This course is accessible
and designed for everyone, even if you're new to coding. Start today and join
millions on a journey to improve your skills!

Whether you're preparing for your first job interview or aiming to upskill in this
ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We
provide top-quality content at affordable prices, all geared towards accelerating your
growth in a time-bound manner. Join the millions we've already empowered, and
we're here to do the same for you. Don't miss out - check it out now!