Selectors will identify the element and apply CSS
properties.
Syntax:
Selector{
Property:
Value
}
Types of selectors
Element selector
HTML element acts like a selector and apply CSS property.
<html>
<head>
<title>
Lamp </title>
<style>
selector{
property:value;
}
h1{
color:blue;
font-weight:lighter;
}
</style>
</head>
<body>
<h1
style='color:red;font-style:italic;'>Welcome to Home Page</h1>
</body>
</html>
ID Selector
Apply CSS property to specific element id.
<html>
<head>
<title>
Lamp </title>
<style>
#a{
color:blue;
font-weight:lighter;
}
</style>
</head>
<body>
<h1
id='a'>Welcome to Home Page</h1>
</body>
</html>
Element with ID
Apply CSS properties to specific element with id
<html>
<head>
<title>
Lamp </title>
<style>
h1#a{
color:blue;
font-weight:lighter;
}
</style>
</head>
<body>
<h1
id='a'>Welcome to Home Page</h1>
</body>
</html>
Class Selector
Apply CSS properties to specific class element
<html>
<head>
<title>
Lamp </title>
<style>
.a{
color:blue;
font-weight:lighter;
}
</style>
</head>
<body>
<h1
class='a'>Welcome to Home Page</h1>
</body>
</html>
Attribute Selector
Apply CSS properties to specific element with specified attribute
and value
<html>
<head>
<title>
Lamp </title>
<style>
img{
position:absolute;
bottom:10px;
right:10px;
}
</style>
</head>
<body>
<h1>absolute
Position Properties</h1>
<img
src='1.jpg' height='200px' width='300px'/>
<h1>absolute
Position Properties</h1>
</body>
</html>
No comments:
Post a Comment