CSS( Cascading Style Sheet)
1
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
2
CSS Syntax
• 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.
• Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.
3
How to add CSS
• There are three ways of inserting CSS
– External CSS
– Internal CSS
– Inline CSS
• External CSS
– With an external style sheet, we can change the look of an
entire website by changing just one file!
– Each HTML page must include a reference to the external style
sheet file inside the <link> element, inside the head section.
4
Example of External CSS
• External styles are defined
<!DOCTYPE html> within the <link> element,
<html> inside the <head> section of
<head> an HTML page
<link rel="stylesheet" href="my
• An external style sheet can
style.css">
be written in any text editor,
</head>
and must be saved with
<body>
a .css extension.
<h1>heading</h1> • With an external style
<p>paragraph.</p> sheet, you can change the
look of an entire website by
</body> changing just one file
</html>
5
Example of External CSS
• Here is how the body {
"mystyle.css" file looks: background-
color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
6
Example of Internal CSS
<!DOCTYPE html>
<html>
<head> • An internal style sheet
<style>
body { may be used if one
}
background-color: pink;
single HTML page has a
h1 { unique style.
color: blue;
margin-left: 40px; • Internal styles are
}
</style> defined within the
</head>
<body>
<style> element, inside
<h1>heading</h1> the <head> section of
<p>paragraph.</p>
</body> an HTML page
</html>
7
Example of Inline CSS
<!DOCTYPE html> • An inline style may be
<html> used to apply a unique
<body>
style for a single
<h1 style="color:blue;text- element.
align:center;">heading</h1> • To use inline styles, add
<p style="color:red;">paragraph the style attribute to
.</p> the relevant element.
The style attribute can
</body>
</html> contain any CSS
property.
8
Multiple Style Sheets
• If some properties have been defined for the
same selector (element) in different style sheets,
the value from the last read style sheet will be
used.
• Assume that an external style sheet has the
following style for the <h1> element:
• h1 {
color: red;
}
9
Multiple Style Sheets
• Then, assume that an internal style sheet also has
the following style for the <h1> element:
• h1 {
color: blue;
}
• Now, if the internal style is defined after the link
to the external style sheet, the <h1> elements will
be “blue“:
10
Multiple Style Sheets
<head>
<link rel="stylesheet“ href="mystyle.css">
<style>
h1 {
color: blue;
}
</style>
</head>
11
Multiple Style Sheets
• If the internal style is <head>
defined before the link <style>
to the external style h1 {
sheet, the <h1> color: blue;
elements will be “red": }
</style>
<link rel="stylesheet“
href="mystyle.css">
</head>
12
Multiple Style Sheets
• If the internal style is defined before the link to the
external style sheet, but still we want blue color for <h1>
elements. Then we have to use !important rule.
• The !important rule in CSS is used to add more
importance to a property/value than normal.
• In fact, if we use the !important rule, it will override ALL
previous styling rules for that specific property on that
element.
13
Multiple Style Sheets
<head> • Now, the <h1> elements
<style> will be “blue”.
h1 {
color: blue !important;
}
</style>
<link rel="stylesheet“
href="mystyle.css">
</head>
14
15
