Scribd
Upload
28 views

CSS1

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 properties, backgrounds, boxes, borders, margins and position images. Selectors target elements by tag name, class, or in relation to other elements.

Uploaded by

Riya Singh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
28 views

CSS1

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 properties, backgrounds, boxes, borders, margins and position images. Selectors target elements by tag name, class, or in relation to other elements.

Uploaded by

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

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;


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