Basic and Advance CSS Examples and Concepts Question:
How To Set Different Text Fonts Inside Tables in CSS?
Answer:
If 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>
<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>
| Previous Question | Next Question |
| How To Remove the Top White Space of Your Web Page using CSS? | How To Use Class Selectors to Differentiate Tag Instances in CSS? |