fbpx
Cascading Style Sheets

What is Cascading Style Sheets? | सीएसएस क्या है?

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

  1. p is a selector in Cascading Style Sheets (it points to the HTML element you want to style: <p>).
  2. color is a property, and red is the property value
  3. text-align is a property, and center is 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>

 

css for beginner

 

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>

Leave a Comment

Your email address will not be published.

error: Content is protected !!
%d bloggers like this: