HTML5 & CSS Web Design – 108 – Styling the HTML5 Structure

HTML5 & CSS Web Design - 108 - Styling the HTML5 Structure

Part 8 of Web Design tutorials covering basics of web development with HTML5 and CSS. In this we look at how to use CSS to make our HTML5 structure fit together. Tutorials by Will Goldstone see willgoldstone.com for more info.
Video Rating: 4 / 5

This is how our team of professional and creative web designers working making awesome web site! www.magistros.com
Video Rating: 4 / 5

31 comments

  2. itknowledgecentral

    I’ve seen both the article and section elements used to wrap an entire page (see HTML5 & CSS3 For The Real World – isbn: 0980846900). There isn’t any set rules for using them, they seem to depend on the context (e.g. their ‘proper’ usage is vague).

    for the record, I think your video it great!

  3. willgoldstone

    at the time of recording footer didnt function properly in FF. Also using article for the whole site is not a practice I’d seen recommended anywhere so it made sense to simply use it as a container for the sections instead, rather than the entire page.

  4. itknowledgecentral

    interesting that you wrapped everything up in a div container and used a div for the footer instead of the html5 footer element itself. I would have wrapped everything up in the article element and used the footer element instead. any particular reason for your choice?

  5. Philippe Thomas

    It seem I cant get the wrapper to work properly…

    I tried the three codes, but they did not work maybe I did something not right,

    I ve past this one tough:

    div#wrapper {
    width: 80%;
    background-color:#FFFFFF;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border: thin solid #000000;

    and it work perfectly, can you help me understand why ?

    Tks man !

  7. Philippe Thomas

    You are assuming a lot of things right, make sense.

    Thanks man, cant believe how much I learned in a day with your tutorials !!!

    it s control +atl “ and < that make { and }

    Thanks man, Im back to your videos I have some issues with linking my css file to my html 5 one, I will work on it and if I cant find out will ask some more questions…
    :D

    Philippe

  8. willgoldstone

    I assume the word Majuscule means capital letters? if so – it does not need them as it is a system font but I believe that actual fonts in your library will require their exact name – we call this case sensitivity. You should be able to use Shift / Alt (maybe both at same time?) and the ( ) keys on your Azerty keyboard – assuming you are french! :D

  9. Philippe Thomas

    I ve noticed that you wrote:

    font family:Arial. Helvetica. sans-serif;

    sans-serif is without Maj, does the Majuscule
    matters for Arial and Helvetica too ?

    How do I write { and } ?

    Thanks best tutorial so far, thanks for the notepad + tips really helpful !!!

  10. MrChubib0

    i really appreciate your effort to make a tutorial for this! love you man (no homo)

  11. TheElkster

    Will you are very structured, clear and easy to follow. I’ve dived straight in at this video and am really eager to see the rest! Thanks!

  12. TheElkster

    Will you are very structured, clear and easy to follow. I’ve dived straight in at this video and am really eager to see the rest! Thanks!

  13. willgoldstone

    It must simply be that you’re putting the html tags in the wrong order. Can’t think of another explanation. Paste your code to pastebin.com and post a link for both html and css so I can see what you’re doing.

  14. alexkkowalski

    im having the same problem and miyuu90, my side bar is halfway below my section and i havn’t missed any float:left’s

  15. alexkkowalski

    why dont my article sections appear below my article?
    please help :S

  16. Taurenwarrior75

    “My site” “Welcome” and the “Nav” are all sitting next to each other almost touching. The page isn’t centered but instead is slightly to the left. “My site” has a tiny little blue box that surrounds it and doesn’t expand cross-screen. I’ve looked over the tutorial several times and copied everything precisely as instructed but don’t get the results the tutor is explaining. If anyone has any suggestions I would really appreciate it.

  18. willgoldstone

    presumably, you must have missed a float:left; somewhere on one of your previous sections.

  19. miyuu90

    i just follow your instruction but then my side bar is below the article n section part? did i make any mistake?

  20. L95Darkness

    Thanks for this dude! Extremely helpful, you were clear and explained everything very well. Thankyou!

  21. MrMegaSet

    THANK YOU!!!!!!!!!!!!!!!
    I am just starting out and I was soooooooooo confused. Your tutorial put everything in place for me. It was clear and easy to understantd.

  24. divingonline

    See how that will run on Internet Explorer 7… HTML5 tags still need to be wrapped in a

  25. ZenCartEasyHelp

    Great video! Set up your ecommerce business for free with our Easy Help Zen Cart Tutorials:

  28. vertusdesignbeings

    Во сколько раз увеличена скорость видео?

  29. vertusdesignbeings

    Ох, прусь по этой песенке. Только под неё на другие дизайны и образы тянет.