cse labpractical.ppt

CASCADING STYLE SHEETS
Cascading Style Sheets is a simple design language intended to simplify
the process of making web pages presentable.
Using CSS, you can control the color of the text, the style of fonts, the
spacing between paragraphs, how columns are sized and laid out, what
background images or colors are used, layout designs, variations in
display for different devices and screen sizes as well as a variety of other
effects.
TYPES OF CSS
• Inline CSS
•Internal CSS
•External CSS

Example: Inline CSS
<!DOCTYPE html>
<html>
<head>
<title> Inline CSS </title>
</head>
<body>
<h1> Introduction to CSS</h1>
<p style=“color:red”> Hello LPU</p>
<p style= “color:red”> Welcome to CSS</p>
<body>
</html>

Example: Internal CSS
<!DOCTYPE html>
<html>
<head>
<title> CSS Internal </title>
<style>
p
{
color:red;
}
h1
{
background-color:blue;
}
</style>
</head>
<body>
<p > Hello LPU</p>
<p > Welcome to CSS</p>
</body>
</html>

Example: External CSS
<!DOCTYPE html>
<html>
<head>
<title> CSS External </title>
<link rel=“stylesheet” href=“b.css”>
</head>
<body>
<p > Hello LPU</p>
</body>
</html>
b.css
p
{
color:red;
}
h1
{
}

.
Example: Font Properties
<!DOCTYPE html>
<html>
<head>
<title> CSS Font Properties </title>
</head>
<body>
</body>
</html>
b.css
p
{
font-family:arial;
font-weight:bold;
font-style: italic;
font-size: 24px;
}

Example: Font Properties in One Line
<!DOCTYPE html>
<html>
<head>
<title> CSS Font Properties </title>
</head>
<body>
</body>
</html>
b.Css
p
{
font: bold italic 24px arial;
}

CSS Comments
p
{
font: bold italic 24px arial; /* weight style size family */
}

Example: Box Model-Padding
<!DOCTYPE html>
<html>
<head>
<title> CSS -Padding </title>
</head>
<body>
</body>
</html>
b.css
p
{
padding-top: 30px;
padding-bottom: 30px;
padding-left: 50px;
padding-right: 50px;
}
/* top right bottom left*/

Example: Box Model-Borders
<!DOCTYPE html>
<html>
<head>
<title> CSS -Borders </title>
</head>
<body>
</body>
</html>
b.css
p
{
padding: 30px;
border-style:solid;
border-width:10px;
border-color: green;
}
border: 5px ridge red;

Example: Box Model-Margin
<!DOCTYPE html>
<html>
<head>
<title> CSS -Margin </title>
</head>
<body>
</body>
</html>
b.css
p
{
margin-top: 30px;
margin-bottom: 30px;
margin-left: 50px;
margin-right: 50px;
}

Example: Background Images
<!DOCTYPE html>
<html>
<head>
<title> CSS –Background Images</title>
</head>
<body>
<div>
Hello LPU
</div>
</body>
</html>

b.css
div
{
height:200px;
width: 100%;
background-image:url(a.jpg);
background-repeat: repeat-x;
background-position:center top;
}

Example: Child Selectors
<!DOCTYPE html>
<html>
<head>
<title> CSS –Child Selectors</title>
</head>
<body>
<div>
<p> Hello LPU</p>
</div>
<p> Welcome to LPU</p>
</body>
</html>
div p
{
color:red;
}
P
{
color:yellow;
}

Example: Child Selectors
<!DOCTYPE html>
<html>
<head>
<title> CSS –Child Selectors</title>
</head>
<body>
<div class=“abc”>
<p> Hello LPU</p>
</div>
<div class=“def”>
<p> Welcome to LPU</p>
</div>
</body>
</html>

.abc p
{
color:red;
}
.def p
{
color:yellow;
}

cse labpractical.ppt

More Related Content

Similar to cse labpractical.ppt

Recently uploaded

cse labpractical.ppt