Powerful Google developer tools for immediate impact! (2023-24 C)
CSS
1.
2. INTRODUCTION
CSS are the powerful way to affect the presentation
of a document or collection of a document.
Mozilla and related browsers use CSS to affect the
presentation of the browser Chrome itself.
3. Applying CSS
Uses
We need to change the style of document.
Easy to use.
Time saving
4. Applying CSS example
<html>
<head>
<title> Untitled Document </title>
</head>
<body> HTML
<p> This is a paragraph </p>
</body>
</html>
<style type = "text/CSS">
p
{
color : black;
font : Arial;
CSS
}
</style>
5. Selectors
A selector is most often an HTML element
H1
{
color : Red;
background : Yellow;
}
H1 Selector
color Property
Red Value
6. Grouping Selectors
H2, p
{
color : Gray;
background : Yellow;
}
H2, p Selector
color Property
Red Value
Here we defined a rule where the style on the right
(color : Gray;) applies to elements referenced by
both selectors.
7. Universal selectors
CSS2 introduced a new simple selectors called
universal selector
*{color: red;}
Class selectors
<p.class="warning"> This is a sample slide</p>
<p> Hello world, <span class="warning"> good morning</p>
*.warning {font-weight: bold;}
8. Pseudo – Class selectors
Pseudo – Class selectors are most supported by
browsers.
a. visited {color: red;}
a. link {color: blue;}
a. hover {color: purple;}
a. active {color: yellow;}
9. Advantages
Save a lot of time
Easy to use
Page load faster
Easy maintains
