Scribd
Upload
50 views

CSS Selector Syntax of CSS Rule Set Selector (Property1: Value Property1: Value - )

The document discusses different types of CSS selectors including universal, ID, class, tag, attribute, descendant, grouping, and miscellaneous selectors. It provides examples of how each selector works, describing how they can target specific elements by tag name, id, class, attributes, or relationship to other elements. The last section covers special selectors like @charset, @font-face, and @media that apply styles based on character encoding, fonts, or media type.

Uploaded by

Subhadeep Panda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
50 views

CSS Selector Syntax of CSS Rule Set Selector (Property1: Value Property1: Value - )

The document discusses different types of CSS selectors including universal, ID, class, tag, attribute, descendant, grouping, and miscellaneous selectors. It provides examples of how each selector works, describing how they can target specific elements by tag name, id, class, attributes, or relationship to other elements. The last section covers special selectors like @charset, @font-face, and @media that apply styles based on character encoding, fonts, or media type.

Uploaded by

Subhadeep Panda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

CSS Selector

Syntax of CSS rule set


Selector {
property1 : value;
property1 : value;
---- }
Example :
Body {
text-align: right;
color: red;
font-family: courier;
}
CSS Selectors :This is the content used to bundled specific style rules to implement
in element. Selectors are the part of CSS rule set.

Types of Selector –

 Universal Selector
 ID Selector
 Class Selector
 Tag Selector
 Attribute Selector
 Sub Selector
 Group Selector

Universal Selectors : The universal selector (*) can be selects all HTML elements on
the page whether other type of selectors such as id, class, etc are not used in HTML
page.

<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
#t {

1
text-align: center;
color: red;}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="t">Me too!</p>
<p>And me!</p>
</body>
</html>

Output :

In previous example effect of universal selector implemented in all element except


where id selector is used.

ID selector : The id selector uses in 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.
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: left;
color: red;
}
#para2 {
text-align: right;
2
color: blue;
}
</style></head>
<body>

<p id="para1">Hello World!</p>


<p>This paragraph is not affected by the style.</p>
<p id="para2">Hello World!</p>
}
</body>
</html>

Output :

In above example there is two different id selector para1 & para2. Style of para1 red
colour , left align which is 1st “Hello World”. Para2 ID selector use in 2nd “Hello
World”.

Tag selector : HTML tag is used to make selector to bundle style rules. Same HTML
tag effected by style rules in HTML page. The specific tag selector selects with the
same style definitions in where use the specific style sheet.
<html>
<head>
<style>
h1 {
text-align: center;
color: orange;
text-decoration : underline
}

</style>
</head>
<body>
<p>
3
<h1>My Name is Chandrani</h1>
</p>
<h2>
My Father's Name is Late Chandi das Chatterjee
</h1>
<h1>
I live in Kalyani</h1>

</body>
</html>
Output :

Note : In previous example ‘h1’ is tag selector. Effect of style rules implemented
where the h1 tag is used.

Class selector : The class selector selects HTML elements with a specific class
attribute. To select elements with a specific class, write a period (.) character, followed
by the class name. Which element(s) use the class those are only effected.

<!DOCTYPE html>
<html>
<head>
<style>
.center
{
text-align: center;
color: blue;
font-weight: bold;
font-family: arial black;
}
.right
{
text-align: right;
4
color: red;
font-family: courier;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
<h1 class="right">Red and center-aligned heading</h1>
<p class="right">Red and center-aligned paragraph.</p>
</body>
</html>

Note : In the following output 1st <h1>,<p> element display as per property of class
“center” and 2nd <h1>,<p> element display as per property of class “right”.

Output :

Sub Selector – This type of selector bundle the style rules for specific element. This
type of selector may be
 Element with ID Sub Selector,
 Element with Class Sub Selector,
 Element with Tag Sub Selector,
 Element with Element Sub Selector etc.

5
Element with ID attribute : This type of ID selector defines the style rules for
specific element that means style rules only applicable for ID attribute of that element.
Syntax : Element # id
{
property1 : value;
property1 : value;
----
}

Example :
<!DOCTYPE html>
<html>
<head>
<style>
h2#stl1 {
text-align: center;
color: green;
font-family: courier;
text-decoration : underline;
}
h2#stl2 {
text-align: center;
color: violet;
font-family: Arial;
}
</style>
</head>
<body>
<h1 id="stl1">Application of Style rule</h1>
<h2 id="stl1" >Application of Style rule</p>
<h1 id="stl1">Application of Style rule</h2>
<h2 id="stl2">Application of Style rule</p>
<h2 id="stl1">Application of Style rule</h3>
</body>
</html>
Output:

6
In above example style rules of stl1 & stl2 id selector is only applicable in element h2.
There is no effect of stl1 & stl2 id selector in element h1.
Element with class attribute : This type of ID selector defines the style rules for
specific element that means style rules only applicable for class attribute of that
element.
Syntax : Element.class
{
property1 : value;
property1 : value;
----
}
<!DOCTYPE html>
<html>
<head>
<style>
h2.stl1 {
text-align: center;
color: purple;
font-family: courier;
text-decoration : underline;
}

h2.stl2 {
text-align: center;
color: orange;
font-family: Arial;
7
}
</style>
</head>
<body>
<h1 class="stl1">Application of Style rule</h1>
<h2 class="stl1" >Application of Style rule</p>
<h1 class="stl1">Application of Style rule</h2>
<h2 class="stl2">Application of Style rule</p>
<h2 class="stl1">Application of Style rule</h3>

</body>
</html>

Output :

Element with class attribute : This type of ID selector defines the style rules for
specific element that means style rules only applicable for class attribute of that
element.
Syntax : Element.class
{
property1 : value;
property1 : value;
----
}

8
Element with Descendent Tag : This type of selector defines the style rules for
specific descendent tag of specific element. This style rules only applicable for
specific descendent tag of element.

<!DOCTYPE html>
<html>
<head>
<style>
p strong{color : green;}
</style>
</head>
<body>
<p><strong>HTML form element helped to collect data in web page from user which
is finally store in database following some procedures of server programming.
There is some validation rules in HTML to resist input of invalid data from client side.
</strong></p>
<p>
There are two basic parts of a form: the collection of fields, labels and buttons that the
visitor sees on a page and hopefully fills out and the
processing script that takes that information and converts it into a format that we can
read or tally. HTML form can receive input from user using Input,
TextArea, Select elements.
<p><strong>HTML form element helped to collect data in web page from user which
is finally store in database following some procedures of server programming.
There is some validation rules in HTML to resist input of invalid data from client side.
</strong></p>
<strong>HTML form element helped to collect data in web page from user which is
finally store in database following some procedures of server programming.
There is some validation rules in HTML to resist input of invalid data from client side.
</strong>
<p>
<p>
</p>
</body>
</html>

Output :
9
Note : In previous example sets all strong tags that are descendents of p tags Green.

Group Selector : HTML element is used to make grouping selector to bundle style
rules. Same type of HTML elements effected by style rules in HTML page. The
grouping selector selects same type of HTML elements with the same style definitions.
<!DOCTYPE html>
<html>
<head>
<style>
h1,h2,p {
text-align: center;
color: red;
font-family: courier;
font-weight: bold;}
</style>
</head>
<body>
<h1>Red and center-aligned heading</h1>
<p>Red and center-aligned paragraph.</p>
<h2>Red and center-aligned heading</h2>
<p>Red and center-aligned paragraph.</p>
<h3>Red and center-aligned heading</h3>
</body>
</html>
Output :

10
Attribute selector :This selector select elements based on an attribute or attribute value.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
table[border]
{border-style : dotted;
border-color : green;
}
</style>
</head>
<body>
<table rules="all" border="10" cellpadding="20">
<tr>
<th>Roll<th>Name
</tr>
<tr>
<th>1<th>Ram
</tr>

<th>2<th>Shyam
</tr></table>
</body>
</html>
Output :
11
In above example shows whether page designer use border attribute in table element
then display the defined attribute style.

The [attribute~="value"] selector is used to select elements with an attribute value


containing a specified word.

Output :

In above example shows whether page designer use style attribute rules along with
value all then the style attribute.

Date of submission : 13.04.2020

12
Miscellaneous Media Selectors

Miscellaneous media Selector : CSS provides special selector for different media type.
CSS2 and beyond it support special media selectors. @charset, @font-face,@media,
@page.
@charset : This rule can be used in external stylesheet to define encoding of character
set.
@font-face : This type of style rule used to select down loadable font in style rule.
Example :
@font-face{ font-family: fontname;
src : url(font file);
}
@media : this rules used to define style rules for different media in a single embedded
style sheet.
Example :
<style>
@media screen{/* screen rules */}
@media print{/* print rules */}
</style>

@page : This rules used to define a page block for printed style.
Example :
@page : left{ margin : .5in;}
@page : right{ margin : 1.5in;}

13

You might also like