Unit-4
CASCADING STYLE
SHEET
&
CSS 3
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 SYNTAX
EX.
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
CSS COMMENTS
Comments are used to explain the code, and may help when you edit the
source code at a later time.
Comments are ignored by browsers.
Ex.
<style>
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
</style>
TYPES OF STYLE SHEETS
Three Ways to Insert CSS.
There are three ways of inserting a style
sheet:
External CSS
Internal CSS
Inline CSS
1. EXTERNAL CSS
With an external style sheet, you 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.
Ex,
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks like:
"mystyle.css“
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
2.INTERNAL CSS
An internal style sheet may be used if one single HTML page has
a unique style.
The internal style is defined inside the <style> element, inside the
head section.
Ex.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3.INLINE CSS
An inline style may be used to apply a unique style for a single
element.
To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.
Ex.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
CLASS & ID SELECTOR
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by
the class name.
EX.
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
THE CSS ID SELECTOR
The id selector uses the id attribute of an HTML element
to select a specific element.
The id of an element is unique within a page, so the id
selector is used to select one unique element!
To select an element with a specific id, write a hash (#)
character, followed by the id of the element.
EX. ID
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
CSS FONT PROPERTIES
Ex. CSS Font Families
<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
