CSS (Cascading Style Sheet)

Introduction
CSS stands for Cascading Style Sheets
Style sheet language
Describe the look and formatting of a document
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
enable the separation of document content from
document presentation
2

CSS Syntax
A CSS rule set consists of a selector and a declaration
block
Selector
points to the HTML element you want to style
Declaration
contains one or more declarations separated by
semicolons
includes a property name and a value, separated by a
colon
3

CSS Example
p {color: red; text-align: center;}
body {background-image: url(“gla.jpg");}
h2 {
color: rgb(255,0,0);
}
a {
font-family: "Times New Roman", Times,
serif; }
5

CSS Selectors
The element Selector
selects elements based on the element name
The id Selector
uses the id attribute of an HTML tag to find the specific
element
Hash (#) character, followed by the name of the id
The class Selector
finds elements with the specific class
uses the HTML class attribute
Period (.) character, followed by the name of the class
6

Ex- Element Selector
<html>
<head>
<style>
p {text-align: center; color: red;}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
7

Ex- ID Selector
<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>
3/27/2019 8

Ex- Class Selector
<html>
<head>
<style>
p.center { text-align: center; color: red;}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-
aligned.</p>
</body>
</html>
9

Ex- CLASS Selector
<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>
10

<html>
<head>
<style>
p.uppercase { text-transform: uppercase;}
p.lowercase { text-transform: lowercase;}
p.capitalize { text-transform: capitalize;}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>
11

Three Ways to Insert CSS
Internal style sheet
Within the html document
External style sheet
As an external CSS file with .css extension
Inline style
In the same line where we want to apply the
style
12

Internal Style Sheet
Used when a single document has a unique style
Defined in the head section of an HTML page
Defined within the <style> tag
Scope is up to the same document only
Every document has its own Internal CSS, if required.
13

External Style Sheet
 Ideal when the style is applied to many pages
 Changes the look of an entire Web site by changing
just one file
 Include a link to the style sheet with the <link> tag
 <link> tag goes inside the head section
 Attributes of <link> tag:
 rel
 type
 href
 CSS file is saved using .css extension
14

External Style Sheet Example
h1
{
color: red;
}
h6
{
Color: green;
}
Save it as “mystyle.css”
15

External Style Sheet Example
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1> This is the biggest heading</h1>
<h6> This is the smallest heading</h6>
</body>
</html>
Save it as “abc.html”
16

Inline Style Sheet
adds the style attribute to the relevant tag
style attribute can contain any CSS property
<p style="color:green;margin-left:20px;“>
GLA
</p>
Will work for only the specified tag at that line only
17

Cascading order
All the styles will "cascade" into a new "virtual" style
sheet by the following rules:
Inline style (inside an HTML element)
(Highest priority)
Internal style sheet (in the head section)
External style sheet
 Browser default (Lowest priority)

Setting the Background
Properties used in background:
background-color: #ff00ff;
background-image: url(‘gla.jpg’);
background-repeat: no-repeat;
Other values can be repeat-x, repeat-y or repeat
background-position: top;
Other values are bottom, left or right

Ex- Background-Image
body {
background-color: yellow;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
20

Shorthand property
order of the property values is:
background-color
background-image
background-repeat
background-position
 It does not matter if one of the property values is missing, as long as the
ones that are present are in this order.
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
21

CSS (Cascading Style Sheet)

More Related Content

What's hot (20)

Similar to CSS (Cascading Style Sheet) (20)

Recently uploaded (20)

CSS (Cascading Style Sheet)