CSS Lesson 2
So far in lesson 1 we have seen selectors are specified and implemented either by making them inline style or by embedding them. These selectors are further divided into two categories:-
Simple selectors
A simple selector describes an element irrespective of its position in the document structure. The 'h1' heading identifier is a typical example of simple selector.
h1 {color: red}
Simple selectors are further classified into:-
HTML Selector
These elements use the names of HTML elements without brackets. So, the HTML <p> tag becomes p.
Example: In this example, while defining the style, the P element does not have brackets. That is because, the HTML <p> element is treated as a selector.
<html>
<html>
<head>
<style>
p{font-style : italic; font-weight; bold; color:limegreen; font-size: 12pt; line-height: 16pt}
</style>
</head>
<body>
<p>These selectors use the names of HTML elements. The only difference is that you remove the brackets </p>
</body>
</html>
<style>
p{font-style : italic; font-weight; bold; color:limegreen; font-size: 12pt; line-height: 16pt}
</style>
</head>
<body>
<p>These selectors use the names of HTML elements. The only difference is that you remove the brackets </p>
</body>
</html>
Class Selector
The class selector gives author the ability to apply styles to specific parts of a document and do not necessarily to the whole document.The Syntax is:-
<style>
class selector
.class name class selector {property: value}
</style>
<body>
<p class= "class name">
class attribute
</body>
Contextual Selectors
Consider a situation where, we have some tags under h1 that are italics. Now if we want any of them in red color we could use the following code:-h1 {color: red}i{color: red}
To avoid such a situation contextual selectors can be used. Contextual selectors can be used to combine number of simple selector seperated by a space.
The above code can be rewritten as:
h1 i {color: red}The concept of contextual selectors support inheritance as shown in code below:-
<html>
<body>
<p>....
<b>.....</b>
</p>
</body>
</html>
I hope this CSS Lesson about selectors helped you too!
Comments
Post a Comment