HTML5 CSS3 Brief Tutorial

HTML5 CSS3 Brief Tutorial

While we're pretty much using HTML4 and CSS2.1 now, we can do better! We can restructure our code and make our page code more semantic. We can reduce the amount of code to give pages a beautiful look and make them more scalable. Now, HTML5 and CSS3 are eagerly waiting for you, let's take HTML5 training with Brothers to see if they can really take our design to the next level...


Say goodbye to <div>, welcome to semantic tags

Once , design Teachers frequently use table-based layouts without any semantics. But ultimately thanks to thought innovators like Jeffrey Zeldman and Eric Meyer, smart designers slowly embraced the relatively more semantic <div> layout instead of table layout, and started calling external style sheets. But unfortunately, complex web design requires a lot of different tag structure code, we call it the "<div>-soup" syndrome. Perhaps you are familiar with the following code:

<divid=”news”>
<divclass=”section”>
<divclass=”article”>
<divclass=”header”>
<h1>Div Soup Demonstration</h1>
<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>
</div>
<divclass=”footer”>
<p>Tags: HMTL, code, demo</p>
</div>
</div>
<divclass=”aside”>
<divclass=”header”>
<h1>Tangential Information</h1>
</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”>
<p>Tags: HMTL, code, demo</p>
</div>
</div>
</div>
< /div>


Although this is a bit of a stretch, the above example shows that coding a complex design in HTML4 is still too bloated (in fact, xHTML1.1 is nothing more than that). But the exciting thing is that HTML5 solves the "<div>-soup" syndrome and brings us a new set of structuring elements. These new HTML5 elements have more detailed semantics to replace the non-semantic <div> tags, and at the same time provide "natural" CSS hooks for CSS calls. Here's an example of a solution from the Brothers (www.lampbrother.net) HTML5 course:


<section>
<section>
<article>
<header>
<h1>Div Soup Demonstration</h1>
<p>Posted on July 11th, 2009</ p>
</header>
<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>
<p>Tags: HMTL, code, demo</p>
</footer>



<h1>Tangential Information</h1>
</header>
<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>
<p>Tags: HMTL, code, demo</p>
</footer>
</aside>
</section>
</section>


As we can see, HTML5 allows us to replace those tons of meaningless <div> tags with many more semantically structured code tags. This semantic feature not only improves the quality and semantics of our web pages, but also greatly reduces the class and id attributes that used to be called for CSS in the code. In fact, CSS3 also allows us to ignore all classes and ids.


As we've seen, HTML5 allows us to replace a lot of meaningless tags with a lot more semantically structured code
tags . This semantic feature not only improves the quality and semantics of our web pages, but also greatly reduces the class and id attributes that used to be called for CSS in the code. In fact, CSS3 also allows us to ignore all classes and ids.


Combined with HTML5, which is rich in new semantic markup, CSS3 provides web designers with godlike power for their web pages. With the power of HTML5, we will get more control over the document code, with the power of CSS3, our control will tend to infinity!
Even without those advanced CSS selectors, we can still call different containers through the power of HTML5 without bothering with attributes like class and id. Like the previous DIV layout, we may call it like this in css:


div#news {}
div.section{}
div.article{}
div.header {}
div.content{}
div.footer {}
div.aside {}


Let's take another look at the HTML5-based example:


section {}
article {}
header {}
footer {}
aside {}


This is an improvement, but there are still some problems to be solved. In the <div> instance, we need to call the element in the page through the class or id attribute. This logic will allow us to apply styles to any element in the document, either as a whole or individually. For example, in the <div> instance, the .section and .content elements are easy to locate. But in the HTML5 instance, there will be many section elements in the actual document. We could actually add some specific attribute selectors to call those different section elements, but thankfully I can't target the different section elements with a handful of advanced CSS selectors right now.

Locating HTML-5 elements without class and id
Let's take a look at an instance of how to locate elements on an HTML5 page without using class and id. There are three CSS selectors that we can use to locate and identify elements within an instance. As follows:
* Descendant selector: [CSS 2.1]: EF
* Sibling selector: [CSS 2.1]: E + F
* Child element selector: [CSS 2.1]: E > F


Let's see how not to use class and id to complete the positioning of those section elements in the document:
positioning the outermost <section> element


Considering that our example is not a complete set of HTML5 code, we assume that there is a <body> element under the <section> element The nav> element and the <section> element are siblings. In this case, we can locate the outermost <section> as in the following code:


body nav+section {}


locate the next <section> element
As the only direct subset element under the outermost <section> element, this The <section> element might be positioned like this:
1
section>section {}
targeting the <article>
element There are many ways to target the <article> element, but the easiest is of course the descendant selector:


section section article {}


targeting< header>, <section> and <footer> elements
These three elements have appeared in two places, one is in <article> element, the other is in the <aside> element. This difference allows us to easily locate each element.


article header {}
article section {}
article footer {}


or define them together:


section section header {}
section section section {}
section section footer {}


So far, we have used CSS2.1 selectors to exclude all classes and id. So why do we still need to use CSS3? I'm glad you asked...
Advanced targeting of HTML5 elements using CSS3


While we've eliminated all classes and ids using CSS2.1 selectors, there are obviously many more complex situations that require CSS3's advanced selectors to solve. Let's walk through an example to see how to position page elements with CSS3 without using useless class and id attributes.


Locate all posts with a unique post ID


wordpress gives us a source code output for each post that includes the ID. This information is often used to navigate and/or understand the intent of the data, but CSS3 can use these unique IDs to style these logs. Of course, you could also add attributes like class="post" to each post as you normally would, but that would conflict with the intent of our exercise (plus it's no fun at all). Using the "substring matching selector", we can locate all logs and their different elements as follows.


article[id*=post-]{} /* locate all logs*/
article[id*=post-] header h1 {}/* locate h1 tags in all logs*/
article[id*=post-] section p {}/* locate p tags in all posts */
I can still locate comment elements and their children in the same way.


article[id*=comment-]{} /* locate all comments */
article[id*=comment-] header h1 {}/* locate the h1 header in all comments
article[id*=comment-] section p {} /* Locate p tags in all comments */
Locate some specified sections or articles.
There are many blog posts and comments that are quite large. HTML 5 will place them in <section> or <article> elemental composition. In order to locate which specific <section> or <article> elements, we have to turn to the powerful ":nth-child" selector:


section:nth-child(1){}/* selects the first <section > */
article:nth-child(1){}/* selects the first <article> */
section:nth-child(2){}/* selects the second <section> */
article:nth-child (2){}/* selects the second <article> */


Again, we can use the ":nth-last-child" selector to target some elements in reverse order.


section:nth-last-child(1){}/* select the last <section> */
article:nth-last-child(1){}/* selects the last <article> */
section:nth-last-child(2){}/* selects the penultimate <section> */
article:nth- last-child(2){}/* selects the penultimate <article> */
uses more ways to select specific elements

Another in HTML5 (such as header, section and footer) is to use ": only-of-type" selector. Since these HTML5 elements usually appear more than once in many places, this approach is handy when we want to target tags that appear only once under the parent element. For example, we want to select the only one element in an element, such as the following code:


< section>
<section></section>
<section>
<section>Locate this section element</section>
</ section>
<section>
<section>Locate this section element</section>
</section>
<section>
<section>but not this section element</section>
<section> and this section element</section>



We can just use the following line of selectors:


section>section:only-of-type {}


Summary
I believe that as time goes on and more browsers support HTML5 and CSS3 will become more and more popular, they will become more popular for the web Designers bring more energy to take our web front end (www.lampbrother.net) to the next level.