INTRODUCTION OF CSS
Tutorial in Hindi :
CSS stands for Cascading Style Sheet.
CSS is used to control the style of a web document in a simple and easy way.
CSS describes how HTML elements are to be displayed on screen.
Types of CSS:
1) Inline Style Sheet ( Inline CSS ).
2) Internal Style Sheet ( Internal CSS ).
3) External Style Sheet ( External CSS ).
1) Inline Style Sheet ( Inline CSS ) :
Inline styles directly affect the tag they are written in, without the use of selectors.
Here’s a basic HTML page using inline styles:
<!DOCTYPE html>
<html>
<head>
<title>Playing with Inline Styles</title>
</head>
<body>
<p style="color:blue;font-size:46px;">
I'm a big, blue, <strong>strong</strong> paragraph
</p>
</body>
</html>
2) Internal Style Sheet ( Internal CSS ) :
The internal style sheet is used to add a unique style for a single document.
It is defined in <head> section of the HTML page inside the <style> tag.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: red;
margin-left: 80px;
}
</style>
</head>
<body>
<h1>The internal style sheet is applied on this heading.</h1>
<p>This paragraph will not be affected.</p>
</body>
</html>
3) External Style Sheet ( External CSS ) :
The external style sheet is generally used when you want to make changes on multiple pages.
It is ideal for this condition because it facilitates you to change the look of the entire web site by changing just one file.
It uses the <link> tag on every pages and the <link> tag should be put inside the head section.
my.html (HTML File):
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>The internal style sheet is applied on this heading.</h1>
</body>
</html>
mystyle.css (CSS File):
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
-----------------------------------------------------------------------------------
HTML class Attribute :
The HTML class attribute is used to specify a class for an HTML element.
Multiple HTML elements can share the same class.
Using The class Attribute
The class attribute is often used to point to a class name in a style sheet.
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
HTML id Attribute :
The HTML id attribute is used to specify a unique id for an HTML element.
You cannot have more than one element with the same id in an HTML document.
Using The id Attribute
The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>
-------------------------------------------------------------------------------------------------------
Difference Between Class and ID :
A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
0 Comments