What Is Cascading Style Sheet?

1
HOPE FOUNDATION’S
INTERNATIONAL INSTITUTE OF IFORMATION TECHNOLOGY, (I²IT)
www.isquareit.edu.in
+91 20 22933441 / 2
PREPARED BY: PROF. KIMI B. RAMTEKE
WEB TECHNOLOGY
CASCADING STYLE SHEET

Hope Foundation’s International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi, Pune - 411 057
Tel - +91 20 22933441 / 2 / 3 | Website - www.isquareit.edu.in ; Email - info@isquareit.edu.in
Web Technology
UNIT 1

Contents
• Introduction to CSS
• Use of CSS
• Syntax of CSS
• Types of CSS
– External CSS
– Internal CSS
– Inline CSS
• Exercise

CSS Introduction
• CSS stands for Cascading Style Sheets
• CSS depicts about how HTML elements are to
be displayed on screen, different media
devices
• CSS saves a lot of time for styling many pages
of a big website just at once with single
control file(.css).

Why to Use CSS?
• CSS is helps you to give design, layout for your
web pages and variations in display for various
devices and sizes of the screen.

CSS Syntax

CSS Syntax Description
• The selector helps to style the HTML element
you want.
• The declaration block can contains one or
many declarations which need to be
separated by semicolons.
• Each declaration has two parts:
– 1. property name
– 2. a value and both are separated by a colon(:).

How to apply CSS to HTML
3 Ways:
• External style sheet
– External style sheet helps to change style of multiple
pages of a website at once by making changes in just
one file.
• Internal style sheet
– An internal style sheet is helpful if one single page has
to give a different style.
• Inline style
– An inline style is helpful if element need to be styled
differently.
Website Level style
Page Level Style
Element level Style

External style sheet
HTML file
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS File
<style>
body {background-color:
powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
Separate
HTML
file
Separate
CSS File

External style sheet
Test.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type=“text/css”
href=“Demo.css">
</head>
<body>
</body>
</html>
Demo.css
<style>
body {background-color:
powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
Linking
CSS with
HTML

Internal style sheet
<html>
<head>
......This is example of Internal CSS, style is written inside head element only.........
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
</body>
</html>
CSS
embedded
in HTML

Inline style
<!DOCTYPE html>
<html>
<body>
<h1 style="color:Red;">This is a Blue
Heading</h1>
</body>ss
</html>
Inline
CSS

Exercise
1. Set "background-color: linen" for the page,
using an internal style sheet.
2. Set "background-color: blue" for the page,
using an inline style sheet.
3. Set <p> with "background-color: green" and
<h1> with “color : green” using external style
sheet.

Guess the Output?
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href=“Demo.css">
</head>
<body>
<p>The style of this document is a combination of an external style sheet, and internal
style</p>
</body>
</html>

References
• Ivan Bayross, “Web enabled commercial
applications developments using
HTML,JavaScript, DHTML,PHP” BPB.
• https://www.w3schools.com/css/

THANK YOU
For further information please contact
Prof. Kimi Ramteke
Department of Computer Engineering
Hope Foundation’s International Institute of Information Technology, I²IT
Hinjawadi, Pune – 411 057
Phone - +91 20 22933441
www.isquareit.edu.in | kimir@isquareit.edu.in
16

What Is Cascading Style Sheet?

More Related Content

What's hot (20)

Similar to What Is Cascading Style Sheet? (20)

More from International Institute of Information Technology (I²IT) (20)

Recently uploaded (20)

What Is Cascading Style Sheet?