We have learned about the basic structure of a CSS that comprises
selectors and their attributes. We have also learned how to use various
types of selectors to create styles for webpages. In this lesson, we
shall examine the selectors in more details. We shall also introduce
some new selectors which we have not learned before.
Example
*{ font-family: verdana;}
The typeface verdana will be applied to the text of the whole document
Examples
a) p { color:blue; font-family:arial;}
The CSS rules applied to all elements that appear in the document where the text enclosed between and
tags will be displayed in blue color and in arial font.
b) h1,h2,h3{ font-weight: bold;}
Since the elements are sharing the same declarations, they can also be written as
h1{ font-weight: bold;}
h2{ font-weight: bold;}
h3{ font-weight: bold;}
The CSS rule applied to
,
5.3 ID Selector
An ID selector is used to uniquely identify an element in a document. A CSS ID selector contains a “#” followed by the ID value, which is an identifier. It matches an HTML element whose ID attribute has a value that matches the one specified by CSS ID selector.
Example
CSS
#section1 { font-size:14px}
The text include betwee the follow tag will have font size 14 pixel
Example
CSS
.intro{color:blue; font-family: verdana;font-size: 120%}
HTML
All text enclosed between the above tags will be in blue, having typeface verdana and font size 120% bigger than the default font
5.1 Universal Selector
A universal selector matches all elements on a webpage. Usually the asterisk symbol * is used to denote a universal selector.Example
*{ font-family: verdana;}
The typeface verdana will be applied to the text of the whole document
5.2 Type Selector
A type selector matches every element type that appears in the document.Examples
a) p { color:blue; font-family:arial;}
The CSS rules applied to all elements that appear in the document where the text enclosed between and
tags will be displayed in blue color and in arial font.
b) h1,h2,h3{ font-weight: bold;}
Since the elements are sharing the same declarations, they can also be written as
h1{ font-weight: bold;}
h2{ font-weight: bold;}
h3{ font-weight: bold;}
The CSS rule applied to
,
and
elements. All text enclosed between
,
and
tags will be displayed
as bold text.
elements. All text enclosed between
,
and
tags will be displayed
as bold text.
5.3 ID Selector
An ID selector is used to uniquely identify an element in a document. A CSS ID selector contains a “#” followed by the ID value, which is an identifier. It matches an HTML element whose ID attribute has a value that matches the one specified by CSS ID selector.
Example
CSS
#section1 { font-size:14px}
The text include betwee the follow tag will have font size 14 pixel
5.4 Class Selector
The class selector is similar to the ID attribute because is it also used to specify an element that matches the value of the class attribute. We create a class attribute using a period or dot like the following example.Example
CSS
.intro{color:blue; font-family: verdana;font-size: 120%}
HTML
All text enclosed between the above tags will be in blue, having typeface verdana and font size 120% bigger than the default font
0 Comments
Good day precious one, We love you more than anything.