Table of Contents
What is CSS
CSS का मतलब Cascading Style Sheets है।
CSS का इस्तेमाल आपके Web Pages के लिए Styles को Defined करने के लिए किया जाता है, जिसमें different devices और Screen Size के लिए Design, Layout etc. शामिल हैं।
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
Example
In this example all <p> elements will be center-aligned, with a red text color:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
Example Explained
pis a selector in Cascading Style Sheets (it points to the HTML element you want to style: <p>).coloris a property, andredis the property valuetext-alignis a property, andcenteris the property value
The CSS element Selector
The element selector selects HTML elements based on the element name.
Example
Here, all <p> elements on the page will be center-aligned, with a red text color:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id=”para1″>Me Also!</p>
<p>Itself!</p>
</body>
</html>
The CSS rule below will be applied to the HTML element with id=”para1″:
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id=”para1″>Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Example
In this example all HTML elements with class=”center” will be red and center-aligned:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class=”center”>Red and center-aligned heading</h1>
<p class=”center”>Red and center-aligned paragraph.</p>
</body>
</html>
Example
In this example only <p> elements with class=”center” will be red and center-aligned:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class=”center”>This heading will not be affected</h1>
<p class=”center”>This paragraph will be red and center-aligned.</p>
</body>
</html>
Example
In this example the <p> element will be styled according to class=”center” and to class=”large”:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class=”center”>This heading will not be affected</h1>
<p class=”center”>This paragraph will be red and center-aligned.</p>
<p class=”center large”>This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
Example
The Cascading Style Sheets rule below will affect every HTML element on the page
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id=”para1″>Me Also!</p>
<p>Itself!</p>
</body>
</html>
Example
In this example we have grouped the selectors from the code above:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Example
Style the element with id=”firstname”:
<!DOCTYPE html>
<html>
<head>
<style>
#firstname {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo of the #id selector</h1>
<div class=”intro”>
<p id=”firstname”>My name is Ankita.</p>
<p id=”hometown”>I live in Delhi.</p>
</div>
<p>My best friend is Ankit.</p>
</body>
</html>
Example
Select and style all elements with class=”intro”:
<!DOCTYPE html>
<html>
<head>
<style>
.intro {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo of the .class selector</h1>
<div class=”intro”>
<p>My name is Ankita.</p>
<p>I live in Delhi.</p>
</div>
<p>My best friend is Ankit.</p>
<p class=”intro”>My best friend is Ankit.</p>
</body>
</html>
Example 1
Style all <p> elements with class=”hometown”:
<!DOCTYPE html>
<html>
<head>
<style>
p.hometown {
background: yellow;
}
</style>
</head>
<body>
<h1>Demo of the .class selector</h1>
<p>My name is Ankita.</p>
<p class=”hometown”>I live in Delhi.</p>
<p>My name is Shivam.</p>
<p class=”hometown”>I also live in Delhi.</p>
</body>
</html>
Example 2
This <p> element will be styled according to class=”center” AND to class=”large”:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1>Demo of the .class selector</h1>
<h1 class=”center”>This heading will not be affected</h1>
<p class=”center”>This paragraph will be red and center-aligned.</p>
<p class=”center large”>This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
Example
Select and style every <p> element with the class “intro”:
<!DOCTYPE html>
<html>
<head>
<style>
p.intro {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo of the element.class selector</h1>
<div class=”intro”>
<p>My name is Ankita.</p>
<p>I live in Delhi.</p>
</div>
<p>My best friend is Ankit.</p>
<p class=”intro”>My best friend is Ankit.</p>
</body>
</html>
Example
Select all elements, and set their background color to yellow:
<!DOCTYPE html>
<html>
<head>
<style>
* {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo of the * selector</h1>
<div class=”intro”>
<p id=”firstname”>My name is Ankita.</p>
<p id=”hometown”>I live in Delhi.</p>
</div>
<p>My best friend is Ankit.</p>
</body>
</html>
Example
Select all elements inside <div> elements and set their background color to yellow:
<!DOCTYPE html>
<html>
<head>
<style>
div * {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo of the * selector</h1>
<div class=”intro”>
<p id=”firstname”>My name is Ankita.</p>
<p id=”hometown”>I live in Delhi.</p>
</div>
<p>My best friend is Ankit.</p>
</body>
</html>
Example
Select and style all <p> elements:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo of the element selector</h1>
<div>
<p id=”firstname”>My name is Ankita.</p>
<p id=”hometown”>I live in Delhi.</p>
</div>
<p>My best friend is Ankit.</p>
</body>
</html>
Example
Select and style all <h2> elements AND all <p> elements:
<!DOCTYPE html>
<html>
<head>
<style>
h2, p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo of the element, element selector</h1>
<h2>Welcome to My Homepage</h2>
<div>
<p>My name is Ankita.</p>
<p>I live in Delhi.</p>
</div>
<p>My best friend is Ankit.</p>
</body>
</html>