CSS(Cascading Style Sheets)
CSS is a scripting language that describes the style of an HTML document. It will describe how HTML elements are to be displayed on the browser screen.
It controls the layout of multiple web pages.
CSS video Links:
Click on play button to see the video:
CSS
Syntax
CSS Example with HTML element
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled using CSS.</p>
</body>
</html>
Selector:
It indicates the HTML element that you want to style. It can
be any HTML elements like <h1>, <title> etc. CSS selectors are used
to select the content you want to style.
CSS selectors select HTML elements by using id, class, type,
attribute, etc.
Different
types of selectors in CSS
q CSS element selector
q CSS Id selector
q CSS class selector
q CSS universal selector
q CSS group selector
CSS Element Selector
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align:
justify;
color: blue;
}
</style>
</head>
<body>
<h2> Heading in red color align center</h2>
<p>Hello all the style define in paragraph
is
allowed to every paragraph.</p>
<p>And me!</p>
</body>
</html>
Output of the above program is:
CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.
Examples of using ID selector
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="p1">Hello Edutech Khem</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
Output of above program is:
CSS class Selector
u The class selector is used selects
HTML code/elements with a specific class attribute.
u A period (.) character is used to
select the HTML element with a specific class attribute which is, followed by
the class name.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
text-align:
center;
color: red;
}
</style>
</head>
<body>
<p class="p1">Hello Edutech
Khem</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
Output of the above program is:
CSS universal Selector
The universal selector (*) is used to selects all the HTML
elements on the web page.
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p class="p1">Hello Edutech Khem</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
Output of the above program is:
The grouping selector in CSS is used to selects all the HTML
elements with the same style definitions.
<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h2> www.poudelkhem.com.np</h2>
<p class="p1">Hello Edutech Khem</p>
<p>This paragraph will also be affected.</p>
</body>
</html>
The output of the above program is:
really helpfull
ReplyDelete