HTML5 's CSS3 Brief tutorial-HTML5 Tutorial Web

WEB designers can use HTML4 and CSS2.1 to do something cool. We can complete the logical structure of the document and create a content-rich site without using the stale table-based layouts. We can add a nice and delicate style to the site without using inline <font> and <br> tags. In fact, our current design capabilities have kept us away from the dreaded browser war era, proprietary protocols and ugly Web pages full of flashing, scrolling and flashing.
Although we have now widely used HTML4 and CSS2.1, but we can also do better! We can reorganize the structure of our code and make our page code more semantic-rich. We can reduce the amount of code that gives the page a beautiful look style and give them a higher level of scalability. Now, HTML5 and CSS3 are eager to wait for everyone, let's see if they can really get our design to the next level ...
You can also refer to the following CSS3 related tutorials and resources:
The new technology of CSS3 to improve your design level
"Learning-Learning css" (xhtml+css Tutorial Resource Encyclopedia)

"The most comprehensive browser/css selector compatibility Summary"
The 5 CSS3 technologies you should know
Say goodbye to <div>, welcome to semantic tagging

Once, designers frequently used table-based layouts without any semantics. But ultimately thanks to Jeffrey Zeldman and Eric Meyer, the smart designers slowly accepted the relatively more semantic <div> layout instead of the table layout and began invoking the external stylesheet. Unfortunately, complex web design requires a lot of different tag structure code, which we call "<div>-soup" syndrome. Perhaps you are familiar with the following code:
<divid= "News" >
<divclass= "section" >
<divclass= "article" >
<divclass= "Header" >
<p>posted on July 11th, 2009</p>
</div>
<divclass= "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>
<divclass= "Footer" >
&LT;P&GT;TAGS:HMTL, code, demo</p>
</div>
</div>
<divclass= "aside" >
<divclass= "Header" >
</div>
<divclass= "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>
<divclass= "Footer" >
&LT;P&GT;TAGS:HMTL, code, demo</p>
</div>
</div>
</div>
</div>

Although this is somewhat reluctant, the above example still shows that using HTML4 to code a complex design is still too bloated (in fact xHTML1.1). But it's exciting to HTML5 solve the "<div>-soup" syndrome and bring us a new set of structured elements. These new HTML5 elements have more granular semantics in place of those without semantic <div> tags, and also provide "natural" CSS hooks for CSS calls. The following is an example of a solution for HTML5:
<section>
<section>
<article>
<p>posted on July 11th, 2009</p>
<section>
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
</section>
<footer>
&LT;P&GT;TAGS:HMTL, code, demo</p>

</footer>
</article>
<aside>
<section>
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
</section>
<footer>
&LT;P&GT;TAGS:HMTL, code, demo</p>
</footer>
</aside>
</section>
</section>

As we can see, HTML5 allows us to replace a lot of meaningless <div> tags with more semantically structured code tags. This semantic feature not only improves the quality and semantics of our web pages, but also reduces the class and ID attributes that have been used in the code to be called by CSS. In fact, CSS3 is also able to ignore all classes and IDs by us.
With the class attribute.

As we can see, HTML5 allows us to replace a lot of meaningless, more semantically structured code tags with
Label. This semantic feature not only improves the quality and semantics of our web pages, but also reduces the class and ID attributes that have been used in the code to be called by CSS. In fact, CSS3 is also able to ignore all classes and IDs by us. With the class attribute.
See, Welcome to the neat label

Detailed Description: http://html5.662p.com/thread-36-1-1.html