HTML5 CSS3 Concise Course

WEB designers can use HTML4 and CSS2.1 to do something cool. We can complete the logical structure of the document and create content-rich Web sites without using stale, table-based layouts. We can add a beautiful and exquisite style to the site without using the inline <font> and <br> tags. In fact, our current design capabilities have kept us away from that dreaded browser war era, proprietary protocols and ugly Web pages full of flashing, scrolling, and flashing.
Although we have now generally used the HTML4 and CSS2.1, but we can also do better! We can reorganize the structure of our code and make our page code more semantically specific. We can reduce the amount of code that brings the beautiful appearance of the page and give them a higher scalability. Now, HTML5 and CSS3 are eager to wait for you, let's see if they can really get our design up to the next level ...

You can also refer to the following CSS3 related tutorials and resources:

CSS3 new technology to improve your design level

"Learning css" (xhtml+css Tutorial Resource Encyclopedia)

"The most complete browser/css selector compatibility Summary"

"5 new technologies you should know about CSS3"

Say goodbye to <div>, welcome to Semantic label

Once upon a time, designers often used a table-based layout without any semantics. In the end, however, thanks to thought innovators like Jeffrey Zeldman and Eric Meyer, smart designers slowly accepted a relatively more semantic <div> layout instead of a table layout and started calling an external style sheet. Unfortunately, complex web design requires a lot of different tag structure codes, which we call "<div>-soup" syndrome. Perhaps you are familiar with the following code:

<div id= "News" >
<div class= "section" >
<div class= "article" >
<div class= "Header" >
<p>posted on July 11th, 2009</p>
</div>
<div class= "Content" >
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
</div>
<div class= "Footer" >
&LT;P&GT;TAGS:HMTL, code, demo</p>.
</div>
</div>
<div class= "aside" >
<div class= "Header" >
</div>
<div class= "Content" >
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
</div>
<div class= "Footer" >
&LT;P&GT;TAGS:HMTL, code, demo</p>.
</div>
</div>
</div>
</div>