A.D.
Patel Institute of Technology
Subject : Web Development (202044505)
CSS
SELECTORS
Presented By: Varshil Padsala
(12302120603006)
Vivek Chanchlani
(12202120601060)
CSS INTRODUCTION
• CSS stands for Cascading Style Sheets
• Markup language used in the web document for presentation purpose.
• Most read SYNTAX Various elements like text, font and color are used in CSS for presentation.
TYPES OF SELECTORS
There are 6 types of selectors
1. Simple Selector
2. Class Selector
3. Generic Selector
4. Id Selector
5. Universal Selector
6. Pseudo Classes
SIMPLE SELECTOR
The Simple Selector form is a single element to which the property and value is
applied
For example
h1
{
font-size:20pt;
color:red;
}
CLASS SELECTOR
Using Class Selector we can assign different styles to the same element. These
different styles appear on different occurrences of that element.
For example
[Link]
<body>
{ <h1 class=“RedText”>Heading</h1>
font-size:20pt; </body>
color:red;
}
GENERIC SELECTOR
We define the class in generalized form, that particular class can be applied to
any tag.
For example
.RedText
<body>
{ <h1 class=“RedText”>Heading</h1>
font-size:20pt; </body>
color:red;
}
ID SELECTOR
To define a special style for special element we can use “id Selector”. The id
Selector is similar to the Class Selector.
Syntax:- #name_of_id{property:value list;}
For example
#RedText <body>
{ <h1 id=“RedText”>Heading</h1>
</body>
font-size:20pt;
color:red;
}
UNIVERSAL SELECTOR
This Selector is denoted by ”*”. This selector applied to all the elements in the
document.
For example
*
{
font-size:20pt;
color:red;
}
PSEUDO CLASSES
Using Pseudo classes we can give special effects on the selector. There some
pseudo classes which are more commonly used
• Focus
• Hover
• Hyperlink
Syntax:- selector:pseudo-class {property:value list;}
ADVANTAGES OF CSS
• CSS saves time When most of us first learn HTML, we get taught to set the font face, size,
colour, style etc every time it occurs on a page. This means we find ourselves typing (or
copying & pasting) the same thing over and over again. With CSS, you only have to specify
these details once for any element.
• CSS will automatically apply the specified styles whenever that element occurs. Pages load
faster Less code means faster download times. Easy maintenance To change the style of an
element, you only have to make an edit in one place. Superior styles to HTML CSS has a much
wider array of attributes than HTML
DISADVANTAGES OF CSS
• Browser compatibility Browsers have varying levels of compliance with Style
Sheets. This means that some Style Sheet features are supported and some
aren't. To confuse things more, some browser manufacturers decide to come
up with their own proprietary tags.
Thank
You... ツ
