font element, including size, color, and face attributesbody element<IMG src="spacer.gif" width="15" height="1"><FONT color="#EE3010" face="Verdana, Helvetica, Arial, sans-serif" size="+2">I’m big
and red and sans-serif!</FONT>padding-left: 15px;h2 {color: #EE3010; font: x-large Verdana, Helvetica, Arial, sans-serif;}
style attribute<ul style="border: 1px dashed black;">
<li><code>DOCTYPE</code> declarations</li>
<li>Properly structured <code>head</code>
and <code>body</code> elements</li>
<li><strong>Logical</strong> structures for
content markup</li>
</ul>head portion of a documentstyle element
<style type="text/css">
ul { border: 1px dashed black; }
</style>head portion of a documentlink element<link rel="stylesheet" href="border.css" type="text/css" media="all" />ul {
border: 1px dashed black;
}head portion of a document via an embedded style sheet@importstyle element and @import property<style type="text/css"> @import border.css </style>p {
border: 1px black dashed;
}DOCTYPE declarationshead and body
elements<p style="color: blue"> Speaking of style, I bought the <em>best</em>
pair of shoes in Las Vegas.</p>Speaking of style, I bought the best pair of shoes in Las Vegas.
colorfont-familylist-style-typecolor: #fff;
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;margin-top: 0px;
margin-right: 200px;
margin-bottom: 200px;
margin-left: 20px;margin: 0px 200px 200px 20px;h1 {}h1, h2, h3 {}class attribute.note
<p class="note">This month finds us working on several
important home projects. We’re ripping up the carpet on the
stairs and replacing it with wood. It’s a lot of work, but the
results are looking great!</p>p.noteid attribute#content<div id="content">This division would hold the main content</div> div#content
p strong {
font-weight: bold;
color: black;
}
<p>This sentence is within a paragraph and the <strong>
information in strong</strong> is styled according to the descendant selector
styles.</p>div>strong {
font-weight: bold;
color: black;
}
<div id="#content">
This sentence is a child of the div and therefore the <strong>information
in strong</strong> is styled according to the child selector.
<p>This sentence is within a paragraph and the <strong>information
in strong</strong> remains unstyled because while a descendant, the
strong is within a paragraph, and therefore is not an immediate child.</p>
</div>th+td {
font-weight: bold;
color: red;
}
<table>
<tr>
<th>Table Header</th>
<td>Table data - adjacent to the header in the hierarchy</td>
<td>Table data - second adjacent to the header in the hierarchy</td>
</tr>
</table>:link:visited:hover (known as a dynamic pseudo class):activea.main:linka.subnav:linka.footer:link:first-line:first-letter:before:afterp {
font-family: Arial, sans-serif;
font-size: 14px;
color: blue;
}
p:first-line {
font-weight: bold;
}
h1:after {
content: "header note";
font-family: Arial;
font-size: small;
color: red;
}<h1>Header Level One</h1>
/* CSS Comment */h2 header, which is a block element.Here’s a paragraph (also block level) with a link to Yahoo!, which is an inline element
div with a class of boxtext.div.boxtest {
border: 20px solid;
padding: 30px;
background: #ffc;
width: 300px;
}DOCTYPE declarations, this switch allows for two modes:
#main {
width: 500px;
height: 225px;
border: 2px solid green;
}
#content {
position: relative;
left: 100px;
top: 10px;
border: 1px solid orange;
padding: 10px;
}
<html> (root element)
#content {
position: absolute;
left: 10px;
right: 300px;
top: 10px;
border: 1px solid orange;
padding: 10px;
}
#main {
position: absolute;
left: 10px;
top: 5px;
width: 500px;
height: 225px;
border: 2px solid green;
}
#content {
position: absolute;
left: 100px;
top: 10px;
border: 1px solid orange;
padding: 10px;
}
DOCTYPE declarationDOCTYPE declarations include fully formed DOCTYPEs for:
link/@import hack@import directive to import your hacks into your main CSS file