Css Selector:
It is a css rule set used to select the the content you want to style.
Types of selectors you want to style:
- Id selector
- Element selector
- Group Selector
- Universal selector
- Class selector
ID Selector:
It selects the ID attribute of an HTML element an an id is always unique within the page so it is chosen to select a single, unique element.
Syntax: #attributeId {
color: red;}
(TRY CODE IN TEXT-EDITOR)
E.g: <!DOCTYPE html>
<html>
<head>
<style>
#para1 {text-align: center; color: red; text-transform:uppercase;}
</style>
</head>
<body>
<p id="para1">Hello World</p>
<p>No changes in this paragraph.</p>
</body>
</html>
Element Selector: It selects the HTML element by name and apply css on particular attribute.
Syntax: ul {color: red;}
E.g: <!DOCTYPE html>
<html>
<head>
<style>
p{ text-align: center; color: blue;}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Example!</p>
<p>Element selector!</p>
</body>
</html>
Group Selector: It is used to select all the elements with the same style definitions. It is used to minimize the code. Commas are used to separate each selector in grouping.
E.g: <!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p { text-align: center; color: red;}
</style>
</head>
<body>
<h1>Hello World</h1>
<h2>Example group selector (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
Universal selector: It is used as a wildcard character. It apply CSS on all elements.
Syntax: * {color: red;}
E.g: <!DOCTYPE html>
<html>
<head>
<style>
* {color: red; font-size: 20px;}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Hello world!</p>
<p>universal selector!</p>
</body>
</html>
Class Selector: The class selector selects HTML elements with a specific class attribute. It is used with a period character . (full stop symbol) followed by the class name.It apply CSS which have same Class.
Syntax: .box {color: red;}
E.g: <!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center; color: red;}
</style>
</head>
<body>
<h1 class="center">Example of class selector.</h1>
<p class="center">Example of class selector.</p>
</body>
</html>
0 Comment(s)