CASCADING STYLE SHEETS(CSS)
Cascading Style Sheets is a simple design language intended tosimplify 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 COLLEGETAK</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 COLLEGETAK</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 COLLEGETAK
</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 COLLEGETAK</p>
</div>
<p> WELCOME TO WEB DEVELOPMENT NOTES</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 COLLEGETAK</p>
</div>
<div class=“def”>
<p> Welcome to COLLEGETAK</p>
</div>
</body>
</html>
.abc p
{
color:red;
}
.def p
{
color:yellow;
}
CSS Grid Layout
columns, making it easier to design web pages without having to use floats and
positioning.
Grid Elements
A grid layout consists of a parent element, with one or more child elements.<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
Display Property
An HTML element becomes a grid container by setting the display property togrid or inline-grid.
.grid-container {
display: grid;
}
.grid-container {
display: inline-grid;
}
All direct children of the grid container automatically become grid items.
Comments
Post a Comment