- Targets specific objects in an identified area:
- <div Id="example">header content goes here</div>
( #example p { font-size: 14px; font-family: "Comic Sans MS", cursive; color: #039; background-color: #FC9; border: 2px dotted #FF0; padding: 4px; width: 80%; } )
header content goes hereThis is a p tag inside the "example" div
( This is a p tag outside of the example div )
- <div Id="example">header content goes here</div>
- #Fred p - will only apply to p tags inside a div called "Fred"
- best way to over-ride global styles in layout areas
- Great way to style navigation links
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
#example { width: 400px; padding: 10px; font-weight: bold; color: #FC9; text-align: center; border: 2px solid #6CC; margin: 10px; }
#example p { font-size: 14px; font-family: "Comic Sans MS", cursive; color: #039; background-color: #FC9; border: 2px dotted #FF0; padding: 4px; width: 80%; }
</style>
</head>
<body>
<div id="example">header content goes here
<p>This is a p tag inside the "example" div</p></div>
</body>
</html>