css
TRANSCRIPT
![Page 1: CSS](https://reader033.vdocuments.us/reader033/viewer/2022060202/559c952c1a28ab69298b45d6/html5/thumbnails/1.jpg)
![Page 2: CSS](https://reader033.vdocuments.us/reader033/viewer/2022060202/559c952c1a28ab69298b45d6/html5/thumbnails/2.jpg)
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.
![Page 3: CSS](https://reader033.vdocuments.us/reader033/viewer/2022060202/559c952c1a28ab69298b45d6/html5/thumbnails/3.jpg)
Applying CSS
Uses
We need to change the style of document.
Easy to use.
Time saving
![Page 4: CSS](https://reader033.vdocuments.us/reader033/viewer/2022060202/559c952c1a28ab69298b45d6/html5/thumbnails/4.jpg)
Applying CSS example
HTML
<html>
<head>
<title> Untitled Document </title>
</head>
<body>
<p> This is a paragraph </p>
</body>
</html>
CSS
<style type = "text/CSS">
p
{
color : black;
font : Arial;
}
</style>
![Page 5: CSS](https://reader033.vdocuments.us/reader033/viewer/2022060202/559c952c1a28ab69298b45d6/html5/thumbnails/5.jpg)
Selectors
H1
{
color : Red;
background : Yellow;
}
H1 Selectorcolor PropertyRed Value
A selector is most often an HTML element
![Page 6: CSS](https://reader033.vdocuments.us/reader033/viewer/2022060202/559c952c1a28ab69298b45d6/html5/thumbnails/6.jpg)
Grouping SelectorsH2, p
{
color : Gray;
background : Yellow;
}
H2, p Selectorcolor PropertyRed Value
Here we defined a rule where the style on the right
(color : Gray;) applies to elements referenced by
both selectors.
![Page 7: CSS](https://reader033.vdocuments.us/reader033/viewer/2022060202/559c952c1a28ab69298b45d6/html5/thumbnails/7.jpg)
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;}
![Page 8: CSS](https://reader033.vdocuments.us/reader033/viewer/2022060202/559c952c1a28ab69298b45d6/html5/thumbnails/8.jpg)
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;}
![Page 9: CSS](https://reader033.vdocuments.us/reader033/viewer/2022060202/559c952c1a28ab69298b45d6/html5/thumbnails/9.jpg)
Advantages
Save a lot of time
Easy to use
Page load faster
Easy maintains
![Page 10: CSS](https://reader033.vdocuments.us/reader033/viewer/2022060202/559c952c1a28ab69298b45d6/html5/thumbnails/10.jpg)
Disadvantages
Browser compatibility.
An extra download is required to import style
information for each document.
![Page 11: CSS](https://reader033.vdocuments.us/reader033/viewer/2022060202/559c952c1a28ab69298b45d6/html5/thumbnails/11.jpg)
Conclusion
CSS is the most powerful way to make the
website more attractive. CSS is easy to use
and learn.
![Page 12: CSS](https://reader033.vdocuments.us/reader033/viewer/2022060202/559c952c1a28ab69298b45d6/html5/thumbnails/12.jpg)