Consider the html file named “Page.html” and perform the following tasks using CSS Attribute Selectors
Consider the html file named “Page.html” and perform the following tasks using CSS Attribute Selectors:
• Text color of all the controls in which the value of the attribute “id” is “Mainheading”, should be turned to red
• Text color of all the controls in which the value of the attribute “id” starts with “Sub”, should be turned to green
• Text color of all the controls in which the value of the attribute “id” ends with “paragraph”, should be turned to blue
• Text color of all the controls in which the value of the attribute “title” is “description”, should be turned to red
• Text color of all the controls in which the value of the attribute “href” contains the substring “vu”, should be turned to green
Solution:
<html>
<head>
<title>
MC1234567
</title>
<style>
[id="Mainheading"] {
color: red;
}
[id^="Sub"] {
color: green;
}
[id$="paragraph"] {
color: blue;
}
[title="description"] {
color: red;
}
[href*="vu"] {
color: green;
}
</style>
</head>
<body>
<h1 id="Mainheading">This is main heading</h1>
<h2 id="Subheading1">This is first sub heading</h2>
<h2 id="Subheading2">This is second sub heading</h2>
<span title="description">This is first descirption</span>
<p id="Firstparagraph">This is first paragraph</p>
<p id="Secondparagraph">This is second paragraph</p>
<a href="https://www.vu.edu.pk"> Virtual University of Pakistan</a>
<br />
<a href="https://www.youtube.com/VirtualUniveristyChannel"> Virtual University Channel</a>
<br />
<br />
</body>
</html>
Output:
No comments