Interview Questions Answers.ORG
Interviewer And Interviewee Guide
Interviews
Quizzes
Home
Quizzes
Interviews Top World Wide Web Interviews:Action ScriptAJAXBasic InternetBloggingCascading Style Sheet CSSCSS3DHTMLDomain Name System (DNS)EcommerceHTMLHTML5JavaScriptjQueryjQuery KnockoutJSONJSONPUser Interface DesignerVBScriptW3CWeb 2.0 TechnologiesWeb 3.0 TechnologiesWeb BuildingWeb DevelopersWeb QualityWeb SecurityWeb SemanticWebmaster
Copyright © 2018. All Rights Reserved
Cascading Style Sheet CSS Interview Question:
How To Use Class Selectors to Differentiate Tag Instances in CSS?
Submitted by: AdministratorA more reliable way to identify tag instances is to use the class attributes and class selectors. In the CSS example below, class="url" is added to <P> tags for Web addresses, with a new CSS definitions using a class selector "P.url". All three selectors match the Web address text, but the class selector "P.url" wins because of the cascading order rules. So you will see Web addresses in bold "sans-serif":
Submitted by: Administrator
Submitted by: Administrator
<html><head>
<title>CSS Included</title>
<style type="text/css">
/* matches P instances with class="url" only */
P.url {margin-top: 0px; margin-left: 20px;
font-family: sans-serif; fond-weight: bold}
/* matches P instances inside TABLE only */
TABLE P {margin-top: 0px; margin-left: 40px;
font-family: serif; font-size: 12pt; color: blue}
/* matches all instances of tag P */
P {font-family: arial; font-size: 14pt; color: black}
</style>
</head><body>
<p>Welcome to GlobalGuideLine.com resource listings:<br>
<table>
<tr><td><p class="url">www.w3.org</p></td>
<td><p>W3 home page.<p></td></tr>
<tr><td><p class="url">www.php.net</p></td>
<td><p>PHP home page.<p></td></tr>
<tr><td><p class="url">www.google.com</p></td>
<td><p>Google search.<p></td></tr>
</table>
</body></html>
Note that Web address is displayed in blue. Why? Because color is not defined with "P.url", so "TABLE P" wins the color definition.
Submitted by: Administrator
<title>CSS Included</title>
<style type="text/css">
/* matches P instances with class="url" only */
P.url {margin-top: 0px; margin-left: 20px;
font-family: sans-serif; fond-weight: bold}
/* matches P instances inside TABLE only */
TABLE P {margin-top: 0px; margin-left: 40px;
font-family: serif; font-size: 12pt; color: blue}
/* matches all instances of tag P */
P {font-family: arial; font-size: 14pt; color: black}
</style>
</head><body>
<p>Welcome to GlobalGuideLine.com resource listings:<br>
<table>
<tr><td><p class="url">www.w3.org</p></td>
<td><p>W3 home page.<p></td></tr>
<tr><td><p class="url">www.php.net</p></td>
<td><p>PHP home page.<p></td></tr>
<tr><td><p class="url">www.google.com</p></td>
<td><p>Google search.<p></td></tr>
</table>
</body></html>
Note that Web address is displayed in blue. Why? Because color is not defined with "P.url", so "TABLE P" wins the color definition.
Submitted by: Administrator
Copyright 2007-2024 by Interview Questions Answers .ORG All Rights Reserved.
https://InterviewQuestionsAnswers.ORG.
https://InterviewQuestionsAnswers.ORG.