×
BLOG
Career Guide Quizzes Project Ideas Interview Questions
Great Learning Blog IT/Software Development
Table of Contents
What is CSS?
CSS History
CSS Editors
CSS Syntax
CSS Comment
CSS How-To
CSS Selectors
CSS Colors
CSS Background
CSS Border
CSS BoxModel
CSS Tutorial FAQs
:
Introduction to CSS | CSS Tutorial for Beginners
By Faizan Parvez / Updated on Sep 3, 2024
Table of contents
What is CSS?
CSS stands for Cascading Style Sheets. It is the language for describing
the presentation of Web pages, including colours, layout, and fonts,
thus making our web pages presentable to the users.
CSS is designed to make style sheets for the web. It is independent of
:
HTML and can be used with any XML-based markup language. Now
let’s try to break the acronym:
Cascading: Falling of Styles
Style: Adding designs/Styling our HTML tags
Sheets: Writing our style in different documents
To get a better understanding of CSS, check out this CSS Tutorial.
CSS History
1994: First Proposed by Hakon Wium Lie on 10th October
1996: CSS was published on 17th November with influencer Bert
Bos
Later he became co-author of CSS
:
1996: CSS became official with CSS was published in December
1997: Created CSS level 2 on 4th November
1998: Published on 12th May
CSS Editors
Some of the popular editors that are best suited to wire CSS code are as
following:
1. Atom
2. Visual Studio Code
3. Brackets
4. Espresso(For Mac OS User)
5. Notepad++(Great for HTML & CSS)
6. Komodo Edit (Simple)
7. Sublime Text (Best Editor)
CSS Syntax
Selector {
Property 1 : value;
Property 2 : value;
Property 3 : value;
}
For example:
h1
{
Color: red;
Text-align: center;
:
}
#unique
{
color: green;
}
Selector: selects the element you want to target
Always remains the same whether we apply internal or external
styling
There are few basic selectors like tags, id’s, and classes
All forms this key-value pair
Keys: properties(attributes) like color, font-size, background,
width, height,etc
Value: values associated with these properties
Click here to see a tutorial to HTML
CSS Comment
Comments don’t render on the browser
Helps to understand our code better and makes it readable.
Helps to debug our code
Two ways to comment:
Single line
:
/*<h6> This represents the most/ least important line of the
doc. </h6>*/
Here is how to comment out multiple lines:
/*
h1
{
color: red;
text-align: center;
}
*/
CSS How-To
There are 3 ways to write CSS in our HTML file.
Inline CSS
Internal CSS
External CSS
Priority order
Inline > Internal > External
Inline CSS
Before CSS this was the only way to apply styles
Not an efficient way to write as it has a lot of redundancy
:
Self-contained
Uniquely applied on each element
The idea of separation of concerns was lost
Example:
<h3 style=” color:red”> Have a great day </h3>
<p style =” color: green”> I did this , I did that </p>
Internal CSS
With the help of style tag, we can apply styles within the HTML
file
Redundancy is removed
But the idea of separation of concerns still lost
Uniquely applied on a single document
Example:
< style>
h1{
color:red;
}
</style>
<h3> Have a great day </h3>
:
External CSS
With the help of <link> tag in the head tag, we can apply styles
Reference is added
File saved with .css extension
Redundancy is removed
The idea of separation of concerns is maintained
Uniquely applied to each document
Example:
<head>
<link rel="stylesheet" type="text/css" href="name of the Css
file">
</head>
h1{
color:red; //.css file
}
Implementation of all the three types of CSS:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css"
href="[Link]">
<style>
h1
{
color:green;
}
</style>
</head>
<body>
:
<h1>This heading will be green</h1>
<p style="color:Red">This paragraph will be red</p>
<p id="center">This paragraph will be pink and center-
aligned</p>
</body>
</html>
This is Css file
#center {
text-align: center;
color:pink;
}
Output:
Check out this CSS Properties course to learn more about CSS.
CSS Selectors
The selector is used to target elements and apply CSS
Three simple selectors
Element Selector
Id Selector
Class Selector
Priority of Selectors
Id > Class>Element
Element Selector
:
Used to select HTML elements by its name
How we do it
h1
{
Color: red;
}
We selected the heading tag and then changed the color property i.e
text color to red. Now whatever is written in this tag (content) will have
the text color as red. Check out CSS course for free
ID Selector
The id attribute is used to select HTML element
Used to target specific or unique element
How we do it
#unique
{
Color: red;
}
<h1 id=”unique”> Hi </p>
We selected the id and then changed the color property i.e text color to
red. Now whatever is written in this tag (content) will have the text color
as red
:
Class Selector
The class attribute is used to select HTML element
Used to target a specific class of the element
How we do it
group
{
Color: red;
}
<h1 class=”group”> Hi </p>
We selected the class and then changed the color property i.e text color
to red. Now whatever is written in this tag (content) will have the text
color as red
Implementation of all the three selectors in CSS:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css"
href="[Link]">
<style>
#center1 {
text-align: center;
color:pink;
}
.center2 {
text-align: center;
color:red;
}
h1
:
{
text-align:center;
color:green;
}
</style>
</head>
<body>
<h1>This heading will be green and center-aligned </h1>
<p class = "center2">This paragraph will be red and center-
aligned </p>
<p id ="center1">This paragraph will be pink and center-
aligned</p>
</body>
</html>
Output:
Now that we have seen all the three selectors now let’s see how style
falls or cascades. We will implement one program where we add style
on the same element by using a tag, id’s, and classes as selectors. The
objective of this is to show how one style cuts the other style that might
also be referred to as Priority. We will see that id have the highest
priority over tags and classes.
Now let’s see its implementation:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<style>
p{
color:red;
}
.class {
color:green;
}
#id{
:
color:orange;
}
</style>
</head>
<body>
<p id="id" class="class"> This is CSS </p>
</body>
</html>
If you have observed how one style is fighting against another in order
to style the element. Here the race was won by id, what if all the
selectors are classes or tags then the one which is closer or applied at
the end will win the race and what if a class and tag selectors are used
on the same element, in that case, the race will be won by the class
selector.
CSS Colors
There are different colouring schemes in CSS
Three widely used techniques are as follows
RGB
This starts with RGB and takes 3 parameter
3 parameter basically corresponds to red, green and blue
The value of each parameter may vary from 0 to 255.
Eg: RGB(255,0,0); means color red
HEX
Hex code starts with # and comprises of 6 numbers which
are further divided into 3 sets
:
Sets basically correspond to Red, Green, and Blue
Single set value can vary from 00 to 09 and AA to FF
Eg: #ff0000 ; means color red
RGBA
This starts with RGB and takes 4 parameter
4 parameter basically corresponds to red, green, blue and
alpha
Value of the first three parameters may vary from 0 to 255
and the last parameter ranges from 0 to 1 that is from 0.1,
0.2,…..0.9
Eg: RGB(255,0,0,0); means color red
Implementation of different types of colours in CSS:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css"
href="[Link]">
<style>
#center{ color:#ff0099;}
h1{ color:rgba(255,0,0,0.5);}
</style>
</head>
<body>
<h1>This heading will be green</h1>
<p style="color:rgb(255,0,0)">This paragraph will be
red</p>
<p id="center">This paragraph will be pink and
center-aligned</p>
</body>
</html>
This is the output of the above program showing different
:
shades of red.
CSS Background
There are different ways by which CSS can have an effect on
HTML elements
Few of them are as follows:
Color – used to set the color of the background
Repeat – used to determine if the image has to repeat or not
and if it is repeating then how it should do that
Image – used to set an image as the background
Position – used to determine the position of the image
Attachment – It basically helps in controlling the mechanism of
scrolling
Implementation of Background Property in CSS:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css"
href="[Link]">
<style>
html{
background: #ff9900;
}
p{
background: url("[Link]
[Link]/images?q=tbn%3AANd9GcRT8t-o6oUJ-
E9YRhimOvTU2TSH7vlBnRWBN554_rX30dZah466&usqp=CAU");
:
background-position:center;
background-repeat:no-repeat;
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo
consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non
provident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
</body>
</html>
CSS Border
Helps in setting up the border for HTML elements
There are 4 properties that can help in setting up of border:
Width – sets the width of the border
Style – sets the style of border; Eg: solid, dashed etc.
Color – sets the color of the border
Radius – determines the roundness of the border
You can set the border for specifically top, right, bottom and left
We can also club top and bottom together and same goes for left
:
and right
Eg: border-width: 2px 5px; sets top and bottom 2px; left and
right 5px
Border can also be set in a single line
Eg: border : 2px solid blue;
Implementation of Border Property in CSS:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css"
href="[Link]">
<style>
p{
border-style: solid;
border-color: blue;
border-width: 2px 5px;
border-radius: 10%;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo
consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod
:
tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo
consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
</body>
</html>
CSS BoxModel
Every element in CSS can be represented using the BOX model
It allows us to add a border and define space between the
content
It helps the developer to develop and manipulate the elements
It consists of 4 edges
Content edge – It comprises of the actual content
Padding edge – It lies in between content and border edge
Border edge – Padding is followed by the border edge
Margin edge – It is an outside border and controls the margin
of the element
When you go in chrome and right-click, go on inspect. It will give all the
elements that are used in the HTML file. In the right-hand side, there will
be a box model like:
:
The most inner rectangle represents our content, the padding is nothing
but the space between the content and the border then the margin is
the area outside the border.
Implementation of BoxModel in CSS:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css"
href="[Link]">
<style>
p{
border: 2px solid blue;
margin: 5px;
padding: 20px;
content: 50px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo
consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo
consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
:
occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
</body>
</html>
This is the output of the above program:
CSS Tutorial FAQs
Q: What are the capabilities of CSS?
A: CSS helps in defining text alignment, color, font, size, spacing,
borders, layout, and many such typographic characteristics. It can do all
of it independently for on-screen as well as printed views.
Q: What are the three types of CSS?
A: The three types of CSS include Inline CSS, Internal CSS, and External
:
CSS. Inline CSS can be included directly in the HTML elements. Internal
CSS is the other way of including CSS by using the style element in the
head section of the HTML document. External CSS includes CSS by
using an external stylesheet.
Q: Is CSS difficult to learn?
A: CSS is not difficult to learn but since it is detailed, it can be
confusing. Learning the basics of CSS does not take time at all.
However, if you want to master CSS, it may take some time for you.
Q: How can I be good at CSS?
A: You can be good at CSS by wrapping your mind around positioning
contexts, mastering floats, knowing your selectors, learning concepts of
DRY coding, and knowing your browser support. You also can read
some material available on the web to become a pro in CSS.
Q: How can I learn CSS fast?
A: The fastest way to learn CSS is to first be certain that you know
HTML5 as well as the web foundations thoroughly. Once you have a
deeper understanding of these key concepts and skills, you will be able
to understand CSS and the cool CSS3 techniques easily. CSS3 is the
styling language of web design; therefore, it helps in making your
websites look awesome.
Q: How do I start CSS?
:
A: You can get started with learning CSS in three ways, which include
Inline CSS, Internal CSS, and External CSS. You can also find some
tutorials that can guide you through learning CSS.
Q: What are the levels of CSS?
A: Levels of CSS help in building on the previous, filtering definitions
and additional features. The feature set in all the higher levels is a
superset of any lower level, and the behavior permitted for a specified
feature in a higher level is a subcategory of that permitted in the lower
levels.
Q: What are the examples of CSS code?
A: The examples of CSS code include easy paragraph formatting,
alteration of letter case, change link colors, eliminate link underlines,
make a link button, create a text box, center-align elements, and adjust
padding.
Q: What is CSS language?
A: CSS is the language that is used for defining the presentation of Web
pages, which include colors, layout, and fonts. It enables one to adjust
the presentation to several types of devices, like small screens, large
screens, or printers. CSS can very easily be used with all types of XML-
based markup languages.
Q: What are the three parts of a CSS syntax?
:
A: The CSS syntax comprises a set of rules. These rules come in three
parts such as a property, a selector, and a value.
Q: What are the advantages of CSS?
A: Some of the advantages of CSS include:
The layout of a web page is better measured
Style (CSS) is separate from structure (HTML), which means the
reduced file size
Smaller file size means lesser bandwidth and ultimately means
quicker loading time.
Q: How do I open a CSS file in Chrome?
A: To open a CSS file in Chrome, you have to open up DevTools, head
over to DevTool settings, click open the experiments section, and allow
the CSS overview option.
This brings us to the end of this article where we learned about the
basics of CSS. Check out this front end developer free course from
Great Learning Academy
Sharing is caring:
:
Faizan Parvez
Faizan has been working as an Instructor of Data Structure and Algorithm for the
last 1 year. He has expertise in languages such as Java, JavaScript, etc. He is a
Subject Matter Expert in the field of Computer Science and a Competitive
programmer. He has been working in technical content development and is a
Research Analyst.
Recommended for you
JQuery Tutorial or What is JQuery?
:
Flutter Tutorial | Flutter Tutorial for Beginners
What is XML | XML Tutorial and XML Elements, Attributes & Documents
:
MS Access Tutorial – What is MS Access?
Copy Constructor in C++ – Everything you Need to know About
:
6 ways to learn coding at home!
Free Courses
Free Artificial Intelligence Course With Certificate
Free Prompt Engineering Course With Certificate
Python for Machine Learning Free Course
Data Science Foundations Free Course
Deep Learning with Python Free Course
Introduction to Cyber Security Free Course
Free Digital Marketing Course
Java Programming Free Course
View More
Study Abroad
Study Abroad Programs
Study in USA
Study in Germany
Popular Courses
Post Graduate Program in Data Science
PGP In Artificial Intelligence And Machine Learning
PGP In Management
PGP In Cloud Computing
Software Engineering Course
PGP In Digital Marketing
:
PGP In Digital Marketing
View More
Blog Categories
Data Science Articles
Artificial Intelligence Articles
Cloud Computing Articles
Cyber Security Articles
IT/Software Guides
Career Development Articles
Research and Studies
Premium Courses
Master Generative AI
Master Python programming
Master Data Analytics in SQL
Master Data Analytics in Excel
Master Data Analytics in SQL & Excel
Master Data Science & Machine Learning in Python
International Courses
AI in Healthcare Program
Certificate Program in Applied Generative AI
Certificate Program in AI Business Strategy
MIT Applied Data Science Program
MIT Data Science and Machine Learning Course
Full Stack Developer Program
Artificial Intelligence Program for Leaders
:
Artificial Intelligence Program for Leaders
Post Graduate Program in Data Science
About Us Contact Us Privacy Policy Terms of Use Great Learning Careers
© 2013 - 2025 Great Learning Education Services Private Limited (Formerly known as Great Lakes E-
Learning Services Private Limited).All rights reserved
Get our android app
Get our ios app
: