Scribd
Upload
20 views

Cascading Style Sheets Is A Simple Design Language Intended To Simplify

Cascading Style Sheets (CSS) is a language for styling web pages that allows control over font, color, spacing, layout, and other design elements. There are three types of CSS: inline CSS within HTML tags, internal CSS within <style> tags in the <head>, and external CSS in a .css file linked via <link>. CSS can style text, boxes, backgrounds, and select child elements. Properties include color, font, padding, borders, margin, images, and positioning.

Uploaded by

Harsh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
20 views

Cascading Style Sheets Is A Simple Design Language Intended To Simplify

Cascading Style Sheets (CSS) is a language for styling web pages that allows control over font, color, spacing, layout, and other design elements. There are three types of CSS: inline CSS within HTML tags, internal CSS within <style> tags in the <head>, and external CSS in a .css file linked via <link>. CSS can style text, boxes, backgrounds, and select child elements. Properties include color, font, padding, borders, margin, images, and positioning.

Uploaded by

Harsh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

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>
<h1> Introduction to CSS</h1>
<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>
<h1> Introduction to CSS</h1>
<p > Hello LPU</p>
<p > Welcome to CSS</p>
</body>
</html>
b.css
p
{
color:red;
}
h1
{
background-color:blue;
}
Example: Font Properties
.
<!DOCTYPE html>
<html>
<head>
<title> CSS Font Properties </title>
<link rel=“stylesheet” href=“b.css”>
</head>
<body>
<p > Welcome to CSS</p>
</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>
<link rel=“stylesheet” href=“b.css”>
</head>
<body>
<p > Welcome to CSS</p>
</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>
<link rel=“stylesheet” href=“b.css”>
</head>
<body>
<p > Welcome to CSS</p>
</body>
</html>

b.css
p
{
background-color:blue;
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>
<link rel=“stylesheet” href=“b.css”>
</head>
<body>
<p > Welcome to CSS</p>
</body>
</html>

b.css
p
{
background-color:blue;
padding: 30px;
border-style:solid;
border-width:10px;
border-color: green;
}

border: 5px ridge red;


•dotted - Defines a dotted border
•dashed - Defines a dashed border
•solid - Defines a solid border
•double - Defines a double border
•groove - Defines a 3D grooved border. The effect depends on the border-color value
•ridge - Defines a 3D ridged border. The effect depends on the border-color value
•inset - Defines a 3D inset border. The effect depends on the border-color value
•outset - Defines a 3D outset border. The effect depends on the border-color value
•none - Defines no border
•hidden - Defines a hidden border
Example: Box Model-Margin
<!DOCTYPE html>
<html>
<head>
<title> CSS -Margin </title>
<link rel=“stylesheet” href=“b.css”>
</head>
<body>
<p > Welcome to CSS</p>
</body>
</html>

b.css
p
{
background-color:blue;
margin-top: 30px;
margin-bottom: 30px;
margin-left: 50px;
margin-right: 50px;
}
Example: Background Images
<!DOCTYPE html>
<html>
<head>
<title> CSS –Background Images</title>
<link rel=“stylesheet” href=“b.css”>
</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>
<link rel=“stylesheet” href=“b.css”>
</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>
<link rel=“stylesheet” href=“b.css”>
</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;
}

You might also like