5 Basics of CSS - PPSX
5 Basics of CSS - PPSX
1. Introduction to CSS
2. Types of Style Sheets
3. Selector
4. Margin and Padding
5. DIV + CSS Layout
Design
1. Introduction to CSS
What is CSS???
CSS Syntax
What is CSS???
CSS stands for Cascading Style Sheets.
Styles define how to display HTML elements.
Styles were added to HTML 4.0 to solve a
problem.
External Style Sheets can save a lot of work.
External Style Sheets are stored in CSS files.
you should have a basic understanding of the
HTML.
CSS Syntax
CSS Comments
A CSS comment starts with /* and ends with */.
<!DOCTYPE html>
<html>
<head>
<style>
/*This is a multiple
lines comment*/
p
{
color:red;
/*This is another comment*/
text-align:center;
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the
output.</p>
</body>
</html
2. Types of Style Sheets
<style>
.center
{
text-align:center;
color:red;
}
</style>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
Result :
c)Inline Style Sheet
<!DOCTYPE html>
<html>
<head>inline styles
</head>
<body>
<p style="color:sienna;margin-left:20px;Background-
color:blue; font-size:25px;">This is a paragraph.</p>
</body>
</html>
Result :
3. Selector
Id Selector
Class Selector
Grouping Selector
Element selector
Id Selector
#para1
{
text-align:center;
color:red;
}
</style>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
Result :
Class Selector
<style>
.center
{
text-align:center;
color:red;
}
</style>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
Result :
<style>
.center
{
text-align:center;
color:red;
}
</style>
<body>
<h1 >This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
Result :
Grouping selector
<style>
h1,h2,p
{
text-align:center;
color:red;
}
.rn
{
color:blue;
}
.jk
{
color:green;
}
</style>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
<h1 class="rn">NIT ROURKELA</h1>
<p class="jk">SPARK CLUB</p>
</body>
Result :
Element Selector
margin :20px;
margin-top : 100px;
margin-bottom:30px;
margin-left :25px;
margin-right :10px;
margin: 25px;
• all four margins are 25px
5. DIV + CSS Layout Design
Program part 1 :
CSS
Program part 1 :
HTML
Result :
Program part 2 :
CSS & HTML
Result :
Program part 3 :
CSS & HTML
Result :
Program part 4 :
HTML
Program part 4 :
CSS
Result :
Program part 5 :
HTML
Program part 5 :
CSS
Result :
Program part 6 :
HTML
Program part 5 :
CSS
Result :
Program part 6 :
HTML
Program part 6 :
HTML
Program part 6 :
HTML
Program part 6 :
HTML
Program part 6 :
HTML
Program part 6 :
CSS
Result :
Program part 7 :
HTML
Result :
6.CSS Dimension
Properties