Cascading Style Sheet CSS Interview Question:
How To Set Different Text Fonts Inside Tables in CSS?
Submitted by: AdministratorIf want to set the text font inside tables different than outside tables, you can use CSS definitions with contextual selectors. In the CSS example below, Both selectors "TABLE P" and "P" match those <P> tags inside the table, but the contextual selector "TABLE P" wins the tag selector "P" based on the cascading order rules. So you will see text inside the table in blue "serif":
<html><head>
<title>CSS Included</title>
<style type="text/css">
/* matches P instances inside TABLE only */
TABLE P {margin-top: 0px; margin-left: 20px;
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 www.GlobalGuideLine.com resource listings:<br>
<table>
<tr><td><p>www.w3.org - W3 home page.<p></td></tr>
<tr><td><p>www.php.net - PHP home page.<p></td></tr>
<tr><td><p>www.google.com - Google search.<p></td></tr>
</table>
</body></html>
Submitted by: Administrator
<html><head>
<title>CSS Included</title>
<style type="text/css">
/* matches P instances inside TABLE only */
TABLE P {margin-top: 0px; margin-left: 20px;
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 www.GlobalGuideLine.com resource listings:<br>
<table>
<tr><td><p>www.w3.org - W3 home page.<p></td></tr>
<tr><td><p>www.php.net - PHP home page.<p></td></tr>
<tr><td><p>www.google.com - Google search.<p></td></tr>
</table>
</body></html>
Submitted by: Administrator
Copyright 2007-2025 by Interview Questions Answers .ORG All Rights Reserved.
https://InterviewQuestionsAnswers.ORG.
https://InterviewQuestionsAnswers.ORG.