Introduction to

CSS
By: Mohmmad Rahim

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
Agenda
Introduction to CSS
What is CSS
CSS Syntax
How to Add CSS
Inline CSS
Internal CSS
External CSS
CSS Comments
CSS Selector

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
What is CSS
CSS stands for Cascading Style Sheets. It is a style sheet language
which is used to describe the look and formatting of a document
written in markup language.
It provides an additional feature to HTML. It is generally used with
HTML to change the style of web pages and user interfaces. It can
also be used with any kind of XML documents including plain XML.
CSS is used along with HTML and JavaScript in most websites to
create user interfaces for web applications and user interfaces for
many mobile applications.

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
Why use CSS
1) Solves a big problem
Before CSS, tags like font, color, background style, element
alignments, border and size had to be repeated on every web page.
This was a very long process.
For example: If you are developing a large website where fonts and
color information are added on every single page, it will be become
a long and expensive process.
CSS was created to solve this problem.

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
Why use CSS
2) Saves a lot of time
CSS style definitions are saved in external CSS files so it is possible
to change the entire website by changing just one file.

3) Provide more attributes

CSS provides more detailed attributes than plain HTML to define the
look and feel of the website.

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
CSS Syntax
A CSS rule set contains a selector and a declaration block.

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
CSS Syntax
Selector: Selector indicates the HTML element you want to style. It could
be any tag like <h1>, <title> etc.

Declaration Block: The declaration block can contain one or more

declarations separated by a semicolon. For the above example, there are
two declarations:

color: yellow;
font-size: 11 px;
Each declaration contains a property name and value, separated by a colon

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
CSS Syntax
Property: A Property is a type of attribute of HTML element. It
could be color, border etc.

Value: Values are assigned to CSS properties. In the above

example, value "yellow" is assigned to color property.

Selector{Property1: value1; Property2: value2; ..........;}

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
How to add CSS
CSS is added to HTML pages to format the document according to
information in the style sheet. There are three ways to insert CSS in
HTML documents.

1. Inline CSS
2. Internal CSS
3. External CSS

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
1) Inline CSS
Inline CSS is used to apply CSS on a single line or element.

<htmltag style="cssproperty1:value; cssproperty2:value;">

</htmltag>
For example:
<p style="color:blue">Hello CSS</p>
For more visit here: Inline CSS

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
Disadvantages of Inline CSS
You cannot use quotations within inline CSS. If you use quotations
the browser will interpret this as an end of your style value.
These styles cannot be reused anywhere else.
These styles are tough to be edited because they are not stored at
a single place.
It is not possible to style pseudo-codes and pseudo-classes with
inline CSS.
Inline CSS does not provide browser cache advantages.

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
2) Internal CSS
Internal CSS is used to apply CSS on a single document or page. It
can affect all the elements of the page. It is written inside the style
tag within head section of html.

For example:

<style>
p{color:blue}
</style>

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
3) External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we write
all the CSS code in a css file. Its extension must be .css for example style.css.

For example:

p{color:blue}
You need to link this style.css file to your html pages like this:

<link rel="stylesheet" type="text/css" href="style.css">

The link tag must be used inside head section of html.

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
CSS Comments
CSS comments are generally written to explain your code. It is very
helpful for the users who reads your code so that they can easily
understand the code.

Comments are ignored by browsers.

Comments are single or multiple lines statement and written

within /*............*/ .

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
CSS Selector
CSS selectors are used to select the content you want to style.
Selectors are the part of CSS rule set. CSS selectors select HTML
elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
1) CSS Element Selector
The element selector selects the HTML element by name.
<style>
p{
text-align: center;
color: blue;
}
</style>

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select
a specific element. An id is always unique within the page so it is
chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the

element.

Let?s take an example with the id "para1".

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
 <html>

Example <head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello
kateb.com</p>
<p>This paragraph will not be
affected.</p>
01/26/2025
</body>
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
3) CSS Class Selector
The class selector selects HTML elements with a specific class
attribute. It is used with a period character . (full stop symbol)
followed by the class name.

Note: A class name should not be started with a number.

Let's take an example with a class "center".

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
 <html>
<head>

Example <style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading
is blue and center-aligned.</h1>
<p class="center">This
paragraph is blue and center-
aligned.</p>
01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR </body>
CSS Class Selector for specific
element
If you want to specify that only one specific HTML element should
be affected then you should use the element name with class
selector.

Let's see an example.

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
 <html>
<head>

Example
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading
is not affected</h1>
<p class="center">This paragraph
is blue and center-aligned.</p>
</body>
01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR </html>
 <html>
<head>
<style>
4) CSS Universal Selector
*{
color: green;
The universal selector is used as font-size: 20px;
a wildcard character. It selects all
the elements on the pages. }
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on
every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
01/26/2025 </body>
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
5) CSS Group Selector
The grouping selector is used to select all the elements with the
same style definitions.

Grouping selector is used to minimize the code. Commas are used

to separate each selector in grouping.

Let's see the CSS code without group selector.

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
 h1 { As you can see, you need to
define CSS properties for all
text-align: center; the elements. It can be
color: blue; grouped in following ways:
}
h2 { h1,h2,p {
text-align: center; text-align: center;
color: blue; color: blue;
} }
p{
text-align: center;
color: blue;
}

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
 <html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
Let's see the full }
example of CSS </style>
group selector. </head>
<body>
<h1>Hello Javatpoint.com</h1>
<h2>Hello Javatpoint.com (In
smaller font)</h2>
<p>This is a paragraph.</p>
</body>
01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
</html>
01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR