Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

Styling Your First HTML5 Web Page with CSS3 - 03

Download

Right click “Save as…”

Now that you've built a semantically well-structured and marked-up HTML5 web page, you'll apply a CSS3 style sheet to give the new page a simple but attractive appearance.

 
Download the source code for Styling Your First HTML5 Web Page with CSS3

Tag:

Follow the Discussion

  • Wolfgang Zieglerzico zico

    Great tutorial!

  • IbaIba

    Bob
    It's a great tutorial. I enjoy it.

  • pearlpearl

    Thank you!! i can't wait to see the next one ;)

  • KyleKyle

    In the video you use the font Helvetica, but misspell it as "Helvettica".

  • Very nice startup lesson for CSS. I liked it very much that you've built the whole thing up from zero and went step by step. 

    Thanks a lot!

  • Thank you Bob, Your videos are the best learning tool on the web.

  • John BarbozaJohn Barboza

    that's great!!

  • BrunoLMBrunoLM

    I would like to see more about new tags on HTML5 instead of just CSS...

  • Thanks Bob, another great vid.  I really appreciate it!

  • Excellent video, came just at the right time. Looking forward to the rest of the series

     

  • Great!  The rest are details...

  • @zico: @Iba: @pearl: @gergob: @mdorrikhteh: @John Barboza: @jasonholt: @steveculshaw: Sorry to lump you all together, but I wanted to thank you for taking the time to write a quick note.  Glad you're enjoying the series!

    @Kyle: Whoops ... that's why I don't typically code in Notepad.  Wink  Nice catch!

    @BrunoLM: Hang in there ... you'll get more HTML5 in the following lessons than you'll know what to do with (at first).  I just wanted to show the entire process from structure to style for an entire example.  In the next few lessons, we dive deep into HTML5.

    @Cristoby:  Actually, I completely agree with you!  Smiley

  • Dean BushDean Bush

    Thanks for another great tutorial, Bob! The economy of language that you use in describing what you're doing actually helps me; while I'm going through the process myself, I find myself repeating the prhases that I've heard you use. They help me get through it. I'm just not able to use the "awsome" as often as you do---until after a couple of tries.
    Thank you!

  • Dean BushDean Bush

    Bob,

    After following you with creating the stylesheet, specifically the font-family and saving the file as "styles.css," my IE9 did not render the page with Arial font. I checked that I copied all of the commands in the correct places in Notepad and they were correct. The only thing I noticed that was strange was that after I saved the style sheet command in Notepad with the filename "styles.css," changed the file type to "All File Types," and changed the character set to UFT-8, the file name in my work folder was "styles" and not "styles.css" and when I opened it again in Notepad, the filename showed automatically as "styles".
    Any advice?

  • @Dean Bush: Hi Dean... If you're referring to the file name as it shows in the chrome, it doesn't show the file type (the ".css"), so that wouldn't be your problem. Are all the other styling properties working?

    The font that the browser uses is limited to the fonts you have installed on your machine, are you getting any sans serif fonts at all, just not Arial?  Maybe you can post your code at pastebin or someplace and others here can review it for you...

  • I have similar problem with styling as Dean Bush. Styles file does not change the font and not the background color. I didn´t go any further with styling because of these problems. Could it be that the problem is IE. I have version 9.0.8. I can find Arial font but not Helvetica nor sans-serif.

  • Dean BushDean Bush

    @PaulBinCT: I don't know what I did or didn't do, but now everything is just fine. Hmmm.

  • I don´t have any problems when using google chrome browser.

  • @Dean Bush: There's a number of things it could have been ... but I suspect that if you did nothing and now it works, that sounds like a browser caching issue.  If this ever happens again, do this:  Ctrl + F5

    See more here:

    http://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache

    @majaeki: You may have a similar issue, as Dean with caching.  But I wanted to address your second part ... the reason you list different (but similar) typefaces is **exactly** because you probably will not have them all installed on your computer!  CSS will use any of those fonts you specify.  sans-serif is a classification of font, meaning, in a pinch -- if the user's browser doesn't have Helvetica or Arial, then use any sans-serif font you may have installed on your system, and it lets the computer figure out which one will "get you close enough".  Hope that makes sense!  Good luck!

  • MichaelMichael

    Very easy to understand. Thanks a lot!

  • Jean AlainJean Alain

    Hi Bob,
    I'm typing everything as you and even comparing my work to your "after" folder and I'm having a problem, on the CSS at the time you add the img {
    float:right;
    margin:0px 0px 10px 10px;
    box-shadow:3px 3px 5px 1px #cccccc;
    }

    the figcaption does not match with the image, the figcaption for image 1 appears at the top left of image one and the figcaption for image 2 appears at the bottom left of image 1, meaning it does not get allign with image 2 like on your video, and I've already compared everyting and it's the same, I even opened your after results and it's the same, I'm working with IE 9.0.9.

    Thanks in advance!

  • Moses DMoses D

    Bob,

    I've been blazing through these videos and I'm really liking what I'm seeing and learning! I have no complaints content-wise but I did feel that this video went pretty fast for me to try and follow along with. I often found myself either pausing the video to type in Notepad or having to go back and erase silly errors such as typing "3" instead of "e." I'm not sure if you just went fast because this video was supposed to serve as a general overview instead of an in-depth discussion but I'm just leaving a comment to say that sometimes the pace is physically too fast to follow well (at least for a programming beginner like me). Keep up the great work! I love the videos so far.

  • @Jean Alain: Have you tried opening MY files to see if you get a similar result?  If my version of the files produce something different in your web browser from your version of the files, then *something* has to be different.  Let me know those results and we can go from there.

    @Moses D: Good feedback, I would just say that watching a training video is different than watching a sitcom ... you have to take more control of the viewing experience ... pause, rewind if necessary -- whatever you have to do to follow along.  I realize that we're not used to viewing content this way, but there's no way around it ... leaving long pauses in the video for students to catch up may not be the best way to go about this, either.  It's a toughie, no doubt, but thanks for your comments.

  • BenjiBenji

    Hi Bob,
    great Tutorials! Thanks for that!
    But just 2 cents from my side: instead of explaining how the result will look like you should show the result in advance :-)

  • @Benji: Point well taken.  Thank you for posting!

  • For some reason my document will not render the styles.css file that I created.  When I open the after document it renders it fine, but it doesn't work in my work folder.  No colors, and the font is appearing as whatever I set it to in Internet options.  I went into the options and changed the default fonts and that changes my work document.  I copied your stylesheet word for word, but it will not take effect in my html document.  Very frustrating.  I will figure out why though, dont worry.


    edit: Got it, I was saving the file with the name work.html in the before folder, and not the work folder, now I just renamed it to lesson3.html in the work folder and it is working.

    I just wanted to post this in case someone else made this dumb mistake!

  • Bob i just finished  this lesson but when i write this " img {
      float:right;
      margin: 0px 0px 10px 10px;
    }" and i see my file on internet explorer only the upper image goes to the right and the second image stays on the left. I was hoping you could please help me. Thanks

  • @FutureCoder: Awesome.  Glad you posted the fix!

    @ttercero: Hmm ... I may need to see your ENTIRE html ... could you send it to my personal email address and give me a couple of days to look at it (swamped at the moment). bob at learn visual studio dot net.

  • @BobTabor:Sorry Bob but I couldn't find your personal email address on the webpage

    *I opened the file on Dreamweaver just to see if the problem was only on ie and on dreamweaver the second image goes to the right. Does IE has the problem?

  • Great video! So easy to follow along. I can't wait to watch the rest of the series.

  • CraigCraig

    Hi Bob, great video series and very clear.

    I too have noticed the figure 2 text may not remain beside the second image when the IE window is of a certain width. It happens to the work copy and the after copy. I guess it will 'come out in the wash' later in the series.

  • Hello, great lesson, but i have FullHD display (1920x1080) and the page is pretty wide. Second image actually floats left of the first one (they are next to each other)...
    I think it's like that because there is not enough text between them. How can i overcome this issue?

  • Will using percentage for borders instead of pixels   , for example 1% instead of 5px , help for viewing page on mobile displays ?

  • I tried  #696 and #696696 and found them different colors. By Binging, I found that #696 is short hand of #669966.

    So in this video , alsomany shorthands are possible:

    #eeff99 -> #ef9

    #cccccc ->#ccc

  • TylerTyler

    So, in the aside section, when you typed "border:1px solid #696" I opened my page up and it just shows a thin green line going around the text. The background behind it is white. I thought it was because I had been running it in chrome up until now, but I opened it in IE9 and the same thing happened...
    Here's my code:

    aside {
    width:80%;
    margin-right:auto;
    margin-left:auto;
    font-size:.8em;
    background:#eeff99
    padding:20px;
    border:1px solid #696;
    border-radius:20px;
    }

  • @Tyler I think you're missing a ";" after background:#eeff99

    Try: 

    aside

    {
    width:80%;
    margin-right:auto;
    margin-left:auto;
    font-size:.8em;
    background:#eeff99;
    padding:20px;
    border:1px solid #696;
    border-radius:20px;
    }

  • @Yabood: Nice catch!

    @Tyler:  Did that help?  Sorry I didn't get to it sooner!

    @CraigMadhappyface: This is a fundamental problem with building web pages.  Different screen sizes.  At the very end of this series, I introduce some helpers -- CSS files that are starting points for your web design efforts that most modern web developers use in their projects.  They will help overcome problems like the one you described.  I'm not trying to be lazy here -- but without some boundaries / limits to width, there will be a LOT of issues in your web pages.

    @annaqeeb: re: % vs. px for mobile ... I think there are much better ways to accomplish this.  Per the previous paragraph, there are boilerplate / helper CSS files to help you create responsive HTML pages for both desktop and mobile experiences.  I will show a few at the very end of this series.

     

  • I have tried adding the Arial font and grey #333333 background into the syles.css file and my ie 10 in Win 8 pro cannot render them (both modern app and desktop app versions).  I also can see the After file renders correctly.  I hit CTRL-F5 and it doesn't help.  Also I made sure that the two files are in same folder.  Still nothing.  Any advice?

    I tried copying the After files into working and cutting and pasting elements to and from the original file.  In one case I did see the Arial and grey #333333 and then when rendering the same page again the css stopped being used.  Hmmmm.   Any help.

  • great tutorial.  I am using your code in a html5 template in visual studio and it works nicely. 

  • @mighty7: Hmm... are you 100% sure that you are referencing the correct file?  Can you set something in your CSS to red just to confirm that *something* works and you can see the change / effect?  Sometimes when what you describe happens to me, I run around trying to figure out what the heck is the problem, only to realize the HTML is not connected to the CSS due to the incorrect file name or somesuch.  Outside of that, I would have to view the code for myself.  Good luck!

  • Brilliant tutorials. I'm learning so much.

    It's amazing to see that you keep answering comments here.

     

    Thanks so much for your effort. This is only the beginning Big Smile

  • @Rafyelzz: Thanks for the feedback!  Good luck!

  • it is very wonderful tutorial channel and i think this video tutorial will be so helpful for all web design learner. i'm one of them ..thank for this good video .. i wanna to share my some idea ...know in here 

  • MoriartyMoriarty

    Yeah... I've never been interested in web developing before and just happened to visit this site by accident. Just looking for some courses to improve my English listening skills and learn something new at the same time. And yeah, I must admit that you are a true genius. I don't know how did it happen but after watching 3rd lesson I unconsciously started experimenting with what I've learnt. For example changing "article" into something different and see if css will style it, then trying to make shadow in the box with rounded corners, trying to add shadows to text (which to my surprise just worked fine), rearrange things and solving problems when after what I did it didn't look the way i wanted to be... an then I realised that I spent 5 hours on something that I wasn't really interested in at the beginning. You are a genius because I know only a very few people who can make material that has true educational value. I really appreciate your hard work on making that tutorial. Thank you. ^^

  • @Moriarty: If you are experimenting, you already have the mindset of the best developers.  And I'm absolutely NOT a genius -- you just happened to find something you have a knack for -- good for you!  I love that feeling of learning something new and realizing I have a passion for it.  Keep plugging away -- baby steps -- you can't learn it all in a day, but you can learn it faster if you a experimenting, asking "what if I ...?" and then trying to mold and shape the code to do what you want it to.  Good luck my friend!

  • aeipaeip

    The CSS for the font doesn't seem to be working for me. I put,

    <link rel="stylesheet" type="text/css" href="styles.css"
    media="screen">
    ON THE html notepad and

    body {
    fond-family:Arial, Helvettica, sans-serif;
    background-color:#333333;
    }
    ON THE STYLES notepad
    PS: I have windows 8 and IE10

  • aeipaeip

    And i fixed the "fond" to "font"

  • @aeip: Nothing jumps out at me as being incorrect.  Generally when this happens to me, I realize it's either (1) the stylesheet is not hooked up to the HTML page due to a directory / file name error, or (2) I have a mistake in defining the styles ... yours looks right, but you might try doing something more obvious like using a named color like red as a background color, (3) I don't have the element or class I'm targeting actually IN the HTML document.  So, I think I'm styling something that I believe to exist, but it does ... again, that doesn't seem to be the case.  I would recommend you just start over, and little by little add things back in.  Make sure first that your CSS is hooked up using some obvious style, and go from there.  Hope that helps!

  • aeipaeip

    @BobTabor I tried all of that but it still doesn't seem to work. Have you tried in on Windows 8/IE 10? I don't know if they changed some things in that or...

  • @aeip: Nothing would have changed to break something as simple as that.  Have you  tried the files associated with this video (see the download link below the embedded video).  Do the examples for this lesson work?  If so, try comparing your work to what I've done.

  • aeipaeip

    @BobTabor I did all of that, ALL of the code is the same. I've tried the whole thing all over again, and it just doesn't work...

  • @aeip: Please send me the files ... bob@learnvisualstudio.net ... give me a few days ... I'm in the middle of something at the moment, but I'll try to take a look at it and get you pointed in the right direction.  thanks!

  • great! Smiley

     

  • GeorgeGeorge

    Not sure if I was doing something wrong but to get the footer to line up with the section, I had use this:
    footer {
    width: 80%;
    background-color:black;
    color:white;
    margin-right:auto;
    margin-left:auto;
    height:50px;
    padding:10px 10px 10px 10px;
    }

    Instead of just typing padding:10px;

    I works, just not sure expressing all four sides is a good habit.

  • JacobJacob

    To aeip, I had just been having serious difficulty with the same thing as you. When you save your lesson 3 text file, save that as text, but also make sure you save it as an html file as well. That way you update the text file and html file at the same time. That should fix the problem.

  • @Jacob: et. al.  We solved aeip's problem.  Aeip had all the right code, but apparently it was cached in their browser showing them incorrect results.  Once we ascertained that, aeip was able to continue on.

    Just to reiterate what's in the videos ... I do recommend saving as UTF-8 in Notepad as well as making sure you change the file type to "All Files" and explicitly changing the file extension to .html.

  • @George: Good question / statement ... honestly I'm not sure *what* is considered a good practice.  I generally specify all 4 sides myself.

  • Shahzad AliShahzad Ali

    I use to have a point of view that CSS is sucky and teasing. I use to kind of hate styling but you made life easy Mr. BoB Tabor, Thank you!

  • MattMatt

    I wanna start off by saying you have the best tutorials on the net man! Keep it up! Too bad you only do Microsoft stuff.

    My question is that when you resize the web browser window the text will adust to the with making the images look funny with the text. Was this intentional or was this auto formatting an over sight?

  • KaziKazi

    i have a problem with css file.
    this is my notepad code:
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen">

    and this is my css code:

    body {
    font-family:Arial,Helvettica,sans-serif;
    background-color:#333333;
    }
    header {width:80%;
    background-color:black;
    color:white;
    margin-right:auto;
    margin-left:auto;
    }
    section {width:80%;
    background-color:black;
    color:white;
    margin-right:auto;
    margin-left:auto;
    }
    footer {width:80%;
    background-color:black;
    color:white;
    margin-right:auto;
    margin-left:auto;
    }


    BUT THERE IS NOTHING HAPPENED TO MY HTML PAGE.
    no font change at all.
    I M USING WINDOWS 7, IE Ver: 9.00.8112.16455
    please help me.......

  • Can you describe the nature of the problem?  What did you expect to happen and what is actually happening?  Also, can you try to hit Ctrl+F5 to ensure that you are actually refreshing from the files and not just your browser's cache?

  • kazikazi

    Hello Bob,
    Thanks for the reply.
    your video is so much helpful for the beginners. glad to see your video.

    Yes,
    i've convert my txt file to html file.
    and then created styles.css file. but html file is not changing its font, color etc. may be my .css file is not working. what should i do.

  • kazikazi

    Hello Bob.
    i have done something myself to solve my problem.
    i opened html page with notepad, then i found there is no cascading link code that i have used in my original notepad. so i simply copy that cascading link code and paste it to the html page. and it changed its color and font also.
    what do you think, is this all right...........?

  • @kazi: Yep, sounds like you solved it.  You must reference the CSS page FROM the HTML page in order to see the effects of the CSS on your web page.  Good work!

  • DanielDaniel

    Hey thank you for the great lesson. I have been using HTML5, bits and pieces, here and there for a little bit and I think there is one thing you should do different. When clearing the floats, you should use a clearfix rather than a overflow. Its much widely accepted in newer web development and cross browser friendly.

    .clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    }

    html[xmlns] .clearfix {
    display: block;
    }

    * html .clearfix { /* For IE */
    height: 1%;
    }

  • @Daniel: Thank you -- your point is well received.  Honestly?  I'm not a web designer and what's in vogue changes at an alarming rate.  As I point out at the very end of this series, I would prefer to leave those types of things to people who live in that world on a daily basis, SO I would prefer to use Bootstrap by Twitter.  Apparently, they use a form of clearfix that you can learn about here:

    http://nicolasgallagher.com/micro-clearfix-hack/

  • zib3lzib3l

    Hey

    Im from Poland. I watched this video and I I'm very happy :)

    Why?

    Because You well telling and everything is clear:)

  • I'm having a bit of trouble here in Lesson03. Nothing i do in css is working. No font, color, etc.  I have copied eveything word for word and still No changes to the .html. The Finished .html in the After file works fine. HTML is not new to me and i have created a few simple web sites. I have also used css in them. I even tried copying the After text .doc into the Work file and it still is Not working. Got any answers for me? I'm using Win7-64bit IE9

    It's ok Kids! I figured it out. I didn't continue saving like this= Lesson03.html only Lesson03, All Files, UTF-8. So it was a "Brain Fart" on my part and just  Saving incorrectly.

  • @frank604: Good to hear you solved it!

  • danieldaniel

    why dose html not recognise the English spelling of colour! nightmare i can see me making that mistake repeatedly!

  • @daniel: Those kooky Americans and their spelling, right?   Tongue Out

  • kamrankamran

    i hope i will learn HTML5 and Css3.
    However you told it's not to Create Beautiful websites.

  • @kamran: Right.  This is more about "getting it right" than "making it pretty".  There are other courses on other websites you'll want to learn from if you desire to design the aesthetics of a web interface.

  • NanaNana

    Excellent tutorials. Very concise and easy to follow.

  • SeewllSeewll

    Great job! best tutorial I have seen so far for beginners like me!

  • Hi Bob,

     

    When you float image to the right and second image displays underneath the first which looks great.. However this is not the case when some one uses high resolution ie: 1369x1024 etc.. i was having same issue and was so annoyed cuz i couldnt figured out where did i made any mistake and i left the series twice but came back in 2 months time as i love you as teacher Smiley ...

    it gives the same display as your if i zoom-in the explorer or chrome about 130% but on 100% both images shows side by side.. any solution please Sad .. thanks

  • RussellRussell

    Hi Bob, these are great guides i am really finding them useful.

    i have the exact same problem and @a1riz, but i have found when i take my browser off full screen it works fine, but obviously people will not always view web pages at a restore down level, any idea why this happens. i can send a screen shot if you would like

  • RussellRussell

    Update:

    i have found if i put

    figure {
    float:right;
    }

    in the CSS, the pictures would then align underneath each other, but the text then wont go down the side of the picture the text will (not the text that is associated with the image) will be underneath the image leaving a big space.

    any ideas?

  • JordanJordan

    Like some previous posts, my css didn't change the webpage in IE 10, but worked in chrome and safari. i boiled down the css content to just the body formatting to try to debug and found something interesting. if i copied your css into the work folder and used it, the page displayed correctly if i used mine it didn't, it was simply the same plain text as if there was no CSS (and i did save as .css and utf-8).

    in the developer tools in IE (F12), your css would display fine. however, for mine i received a curious error: The stylesheet cannot be viewed because its source is in a different domain than the page.

    here's my entire stylesheet content:
    body {
    font-family:Arial,Helvettica,sans-serif;
    background-color:#333333;
    }

    any thoughts?

  • NoumanNouman

    I am experiencing the same issue as Jordan do. Any suggestions in this regard ??

  • TsegayeTsegaye

    I was using chrome for the first tutorial but today i decided to use IE instead but explorer crashed when i run the CSS file. So now my machine won't save or run any CSS files. When ever i try to save the code as a CSS file it just saves it as a.txt.
    Can someone please help:(

  • Ahmed NasriAhmed Nasri

    Thanks for the well presented vidoes. As for validatoe.nu if you notice after the errors list there is a numbered copy of the HTML5 source and the line numbers refe you to where the error is and the error is highlighted. Here you go!

  • @a1riz: @Russell: Ok, so I can see the problem here.  In fact, making the page too small also creates a strange layout.  

    First, keep in mind this was intended to just be a quick example.  I now see that I should have focused on a more complete example and debugged any potential issues.  My dumb mistake, sorry for the confusion.

    The fundamental problem here is every style that has this attribute set:

    width:80%;

    If you fix that to, say, a specific number like 960px it will temporarily fix the problem.

    OR you could wrap the paragraphs in question with a <div style="float:left;"> </div> eliminate the "bleed" between the two paragraphs.  So, here's an excerpt of a "hack" I did (I **don't*** advocate you do this, but you could to fix in an emergency):

    <div style="float:left;">
    <figure>
    <img src="http-message.gif" alt="A diagram of the parts of an HTTP Message">
    <figcaption>Figure 1. The HTTP Request and Response messages contains important information that allows communication back and forth between the client and the server.</figcaption>
    </figure>
    <p>The HTTP request message is routed through a series of network wires and routers (i.e., devices that know how to forward HTTP messages closer to their destination) spanning the globe using (ideally) the shortest route possible until it arrives at its destination, the web server at the address the requestor typed into the web browser. The web server responds to the request by locating the requested document or resource (in the figure, the index.html file), packaging it up using the same HTTP style envelope, then sending the requested document back on to the network. The connection would only take a fraction of a second and once the computer served up the request, it would not retain any information about that request in its memory. See Figure 2 for a diagram of interactivity between the client and server computers.</p> 
    </div>
    <div style="float:left;">
    <figure>
    <img src="www-diagram.gif" alt="A diagram of route from the user request to the web server and back again">
    <figcaption>Figure 2. (1) The HTTP Request is (2) routed across the internet to the (3) server which serves the (4) requested file back in the body of an HTTP Response message. (5) The HTTP Response is routed across the internet to the original requestor. (6) The requested file is parsed and displayed in the user's web browser.
    </figcaption>
    </figure>
    </div>
    

    BUT if I were really creating a page for a customer / real project, I would probably recommend you just follow along in this series and when you get to the end, you'll learn about Bootstrap by Twitter ... it's a Responsive / Mobile First framework for layout that helps you avoid all of these kinds of headaches and make your pages ready for all devices.  It's like a template that has already done all the hard work for you ... there are other frameworks suggested there as well.

     

  • @Jordan: @Nouman: I'm almost certain this is because the .txt file extension is HIDDEN from you.  Please -- follow these instructions to ensure that those files you are creating really have the file extension .css ... NOT .css.txt

    http://windows.microsoft.com/en-US/windows-vista/Show-or-hide-file-name-extensions

  • @Tsegaye: If your web browser is crashing when you open a .css file, then you have serious issues with your computer.  That should never happen and there's nothing I did in this video that would crash a web browser or a computer.  Something ELSE is at play here.

    Furthermore, you have the same issue as I just explained to Jordan and Nouman above ... please make sure you are working with just .css files, not .css.txt ... follow these instructions:

    http://windows.microsoft.com/en-US/windows-vista/Show-or-hide-file-name-extensions

  • Great videos. I'm learning so much.

    I've got the same problem with the img files [when browser is 100% maximized]. It's not a big deal though. I'm not gonna apply the quick fix shown above. I'll just keep watching the vids. I'll learn how to deal with things like that later on. The point here is to get familiar with things.

    Only 2 videos in and i could already do so much tweaking with what you've teach us. 

    Thanks soooo much.

  • Marcel RoesinkMarcel Roesink

    Bob is about the best 'teacher' when you want to learn about webdesign and programming.

    I definetly like ALL of his video's and Microsoft did a great job 'hiring' him to do the fundamentals of so many aspects of programming and webdesign.

    I just want my students to follow his lessons and pay attention to what he has to explain.

    Thank you Bob.

  • @PeterSaint: Very cool ... hope the videos continue to benefit!

    @Marcel Roesink: Wow, nice ... thank you for the nice words.  Best wishes!

  • DaganDagan

    Bob,
    Great job! So far I am loving these tutorials; very easy to follow and lots of great content. I'm definitely a beginner to web programming and your tutorials are helping quite a bit. One note on how the images display. It was bugging me that the caption was not below the image so after a bit of research I came up with the following:

    figure{
    float: right;
    display: table;
    }

    figcaption{
    font-size: .8em;
    display: table-caption;
    caption-side: bottom;
    }

    img{
    margin: 0px 0px 10px 10px;
    box-shadow: 3px 3px 5px 1px #cccccc;
    }

    This seems to work well and I think it will help a1riz and Russell's issue as well. Again thanks for the tutorials and keep up the good work.

  • DaganDagan

    Bob,
    Great job! So far I am loving these tutorials; very easy to follow and lots of great content. I'm definitely a beginner to web programming and your tutorials are helping quite a bit. One note on how the images display. It was bugging me that the caption was not below the image so after a bit of research I came up with the following:

    figure{
    float: right;
    display: table;
    }

    figcaption{
    font-size: .8em;
    display: table-caption;
    caption-side: bottom;
    }

    img{
    margin: 0px 0px 10px 10px;
    box-shadow: 3px 3px 5px 1px #cccccc;
    }

    This seems to work well and I think it will help a1riz and Russell's issue as well. Again thanks for the tutorials and keep up the good work.

  • @Dagan: Ah, nice.  At first, I was thinking "Oh no, not table" for reasons you will learn about in upcoming lessons.  But in this case, I'm not opposed to it ... table in HTML5 has a specific purpose.  This is CSS3 and so for layout I would be less opposed to it.  Just goes to show ... there's a lot of ways to skin this cat.  Smiley

  • LisaTTombaugh Carpe diem!

    Bob, Thank you for the great tutorial but like many others here I'm having issues with the display of the font. I want to continue with the lesson but it really bugs me that no matter what browser I use I get a serif font. I used the validator to see if it was the html producing the problem and I get several errors:
    Bad value "stylesheet" for attribute rel on element link: Not an absolute IRI. The string "stylesheet" is not a registered keyword or absolute URL.

    Bad value "text/css" for attribute type on element link: Expected a token character but saw " instead.

    Bad value "screen" for attribute media on element link: Expected ( or letter at start of a media query part but saw " instead.

    This is in reference to:

    <link rel="stylesheet" type="text/css" href="styles.css" media="screen">

    Any ideas or comments? perhaps I need to use complete URL for stylesheet? ah, ok weird I did this and it works. I followed the prompts from validation.nu. I added a URL and took out quotation marks.

    <link rel="stylesheet" type=text/css, text/css;charset=utf-8
    href="file:///C|/Users/Tombaugh/Desktop/TABOR/Lesson03/Work/styles.css" media=screen>

    this might help someone else having issues.

  • DaganDagan

    Bob: Thanks. Just curious would there be a better "more correct" way to line the figcaption below the image?

  • @Tombaugh: (1) When you download my code, does it work on your computer?  (2) Can you send me the entire HTML and CSS files via email?  bob at learn visual studio dot net.  

    @Dagan: My comments were not critical of using that CSS attribute at all ... if that approach works, ship it!  Smiley

  • LisaTTombaugh Carpe diem!

    @Tombaugh: Disregard it still doesn't work and "isn't" valid so the next part the gray background doesn't work either *sigh*. I persevere to find the problem. Suggestions welcome

  • @Tombaugh: If you send me your code (HTML & CSS files) I may have some time later today to look it over.  I'm sure this is something small, but infuriating nonetheless.

  • LisaTTombaugh Carpe diem!

    @BobTabor: it was a glitch with notepad. It was weird I was rechecking the code and I had two </header> but when I clicked to delete one it blinked between being </header> and <body> 

    I deleted both and retyped them along with changing the html link code back to the original that you shared and it all works fine. 

    I'm just bummed I lost a couple hours hunting down the problem. Thank you for your time and talent Bob. We REALLY appreciate you.

  • @Tombaugh: Happens to the best of us.  Using something other than Notepad would really help you identify the problems in your code ... Visual Studio Express for Web would be a good download.  There are other free or low cost IDE's for web dev as well.  Happy coding!

  • DaganDagan

    Tombaugh: I very much like Bluefish. I like it better than Notepad++ actually. I also downloaded Visual Studio Express for Web however the complexity of it seemed unnecessary for these beginning lessons. I may switch to it later.

  • FOlaFOla

    I've watched and read tutorials, but this one is extraordinary.

  • @FOla: Ah, cool.  Thanks for that!

  • DrLAAKDrLAAK

    Hello Bob! you are just too great; im an Instructor with few years of teaching experience i wish to learn directly from you in future how can you make this happen? you are just my mentor

  • Hello Bob! you are just too great; im an Instructor with few years of teaching experience i wish to learn directly from you in future how can you make this happen? you are just my mentor.... will be glad info@laakconsult.com is my mailbox

  • Mohummad Imran MalikMohummad Imran Malik

    Hello Bob !

    Ur Tutorial Videos Are really Awesome and i have learned a lot from these videos Thanks a lot.

  • , BobTabor wrote

    @Dean Bush: There's a number of things it could have been ... but I suspect that if you did nothing and now it works, that sounds like a browser caching issue.  If this ever happens again, do this:  Ctrl + F5

    See more here:

    http://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache

    @majaeki: You may have a similar issue, as Dean with caching.  But I wanted to address your second part ... the reason you list different (but similar) typefaces is **exactly** because you probably will not have them all installed on your computer!  CSS will use any of those fonts you specify.  sans-serif is a classification of font, meaning, in a pinch -- if the user's browser doesn't have Helvetica or Arial, then use any sans-serif font you may have installed on your system, and it lets the computer figure out which one will "get you close enough".  Hope that makes sense!  Good luck!

     

    Hi Bob,

      I run into the same problem like Dean and majaeki did.  I followed the steps in your video, but the font won't change.I tried Crtl+F5 and still nothing happened.

      When I made the same changes to the html file in folder "lesson02" and copied the styles.css to the folder "lesson02",the font was changed successfully. This indicates my system has installed the fonts which the Browser needed.

      Then I copy the modfied file Lesson03.html to folder "Lesson02" and view it in IE, the font is unchanged again! At this moment, Lesson02.html and Lesson03.html in folder "lesson02" are exactly the same except the filename. But they look different when rendered by IE.

      After a lot of confirmation, I'm sure there is either a BUG or something beyond my understanding.

      I even uploaded a recorded video and the files in my folder "Lesson02" to skydrive:

    https://skydrive.live.com/redir?resid=7E779A051D314661!11420

      They can help illustrate what I'm talking about.

     

      Really a lot of thanks for this series!

  • , marcusluo7 wrote

    *snip*

     

    Hi Bob,

      I run into the same problem like Dean and majaeki did.  I followed the steps in your video, but the font won't change.I tried Crtl+F5 and still nothing happened.

      When I made the same changes to the html file in folder "lesson02" and copied the styles.css to the folder "lesson02",the font was changed successfully. This indicates my system has installed the fonts which the Browser needed.

      Then I copy the modfied file Lesson03.html to folder "Lesson02" and view it in IE, the font is unchanged again! At this moment, Lesson02.html and Lesson03.html in folder "lesson02" are exactly the same except the filename. But they look different when rendered by IE.

      After a lot of confirmation, I'm sure there is either a BUG or something beyond my understanding.

      I even uploaded a recorded video and the files in my folder "Lesson02" to skydrive:

    https://skydrive.live.com/redir?resid=7E779A051D314661!11420

      They can help illustrate what I'm talking about.

     

      Really a lot of thanks for this series!

     

    Finally, I've got the trick.

      I'm using windows 8. And the html file downloaded from channel9 is recognised as "from another computer" and blocked by windows security features. User can unblock the html file by doing this: right click on the file and choose properties, press the "unblock" button shown in the picture below:

    https://skydrive.live.com/redir?resid=7E779A051D314661!11446&authkey=!AG7iuZS2qMVuNY4

  • @marcusluo7: THANK YOU for solving this mystery.

  • @DrLAAK: I'm not sure how to do what you're asking.  I don't really have that type of service ... unfortunately, with owning my own little fledgling business, doing work for Microsoft and being a father and husband, there's just not enough hours in the day.  The best I can do is offer you videos and a few words of encouragement.  Did you have something else in mind?  Best wishes my friend!

  • johnjohn

    Wonderful learning experience.

    Any way of incorporating a "go back 15 seconds" button for us old slow typers?

  • @john: Great suggestion ... that would be something the Channel 9 developers would need to add.  Please use the Feedback link in the footer of this page to suggest it (they won't see it here).  thanks!

  • TrevTrev

    Ditto - A wonderful learning experience. I can't wait to try every video. Thanks for this Bob/channel9. I have also been doing this on a mac (using text edit and chrome) so I have had to do a bit of extra trouble shooting... but its all working out :)
    Thanks again.

  • AryanAryan

    Bob , I love you. Your videos are great.
    However I was a bit confused with the "hgroup h1" part... What does it mean ? why couldn't we just put the codes in "h1" ... I still love you though.

  • @Aryan: Well apparently influential people who work on the HTML5 spec agree with you ... it must have been confusing, because it has been removed!  See this article:

    http://html5doctor.com/the-hgroup-element/

    See the top part of that article ... it just happened TODAY!

    "Update 4th April, 2013. Please note that following this decision,hgroup will be removed from the HTML5 specification. As such, we don't endorse using it on production sites."

    Wow.  So ... just ignore that part of the video.

    *Sigh* ... this stuff changes daily.   Perplexed

  • I am using IE10 on Lesson03. IE10 does not appear to read the style sheet. The font remains a serif type font and will not change to Arial or a sans-serif font. When I open with firefox, Chrome or Safari it looks correct. The preview in notepad folder looks correct. I have cleared everything in IE10, but it does not appear to read the style sheet.

    However, the begin point of Lesson04 does look correct in IE10.

    Any idea why IE10 will not render Lesson03 correctly when the other major browsers will?

  • @csedcooper: It sounds like IE is caching an old version of the page.  Ctrl + F5 to refresh completely ... Does that do the trick?

  • I did try that and it had no effect. I opened Lesson03 with Web Expression 4.0 and it looks correct in the design view, but does not look correct in the snap shot view with IE (interactive) selected. It does look correct in the snap shot view with either IE6 or IE7 selected from the drop down menu.

     

  • If I rename it to Lesson03A then it opens correctly IE10. I suppose there is something about IE10 that makes clearing the cache difficult.

  • @csedcooper: Crazy.  Yeah, sounds like what you described.  Thanks for replying -- at least I can suggest that to others in the future.

  • Ken MoorerKen Moorer

    I'm having an issue on Lesson 3. Things were going fine until I started styling the hgroup. Once added the hgroup values I lost the formatting for the website. The site had the white background and black border but after the change the Header was correct but the Section portion went back to the gray background and lost it's formatting. This is what I have in my style sheet

    body {
    font-family:Arial,Helvetica,sans-serif;
    background-color:#333333;
    }

    header {
    width:80%;
    background-color:black;
    color:white;
    margin-right:auto;
    margin-left:auto;
    padding:10px;
    }

    p {
    margin:10px;
    }

    h1 {
    font-size:2em;
    margin:0;
    padding:0;
    padding-top:10px;
    }

    h2 {
    font-size:1.6;
    }

    h3 {
    font-size:1.3;
    }

    hgroup {
    width:70%;
    float:left;
    ]

    nav {
    width:30%
    float:right;
    }

    section {
    width:80%;
    background-color:white;
    margin-right:auto;
    margin-left:auto;
    border-color:black;
    border-style:solid;
    border-width:5px;
    }

    footer {
    width:80%;
    background-color:black;
    color:white;
    margin-right:auto;
    margin-left:auto;
    }

  • Ken MoorerKen Moorer

    Nevermind I see I put the wrong brace to close Hgroup

  • @Ken Moorer: Good catch.  Since you bring up the hgroup ...

    Also, as you watch these videos, you'll see a note about hgroup ... they recently (a few weeks ago) decided NOT to include hgroup into HTML5 after all.  So, again, HTML5 is solid, but is still being tweaked.  Proceed with caution, and use the w3c.org site as your ultimate guide.

  • shondralynnshondralynn

    Hi Bob,

    I really like your tutorial, very informative and easy to follow. Though I am having a bit of trouble with the images. When styling the html using the css, I have followed to the 'T', but when I get to the images things got wierd.

    img {
    float:right;
    margin:0px 0px 10px 10px;
    }

    only the first (larger) picture was configured. the second (smaller) pic did not move, in fact it is sitting to the left of the first pic. is there a fix for this? everything else has worked up to this point. even when i added the box-shadow coding (box-shadow:3px 3px 5px 1px #cccccc), it worked for both pics. i'm not sure why the second pic will not float to the right.

  • @shondralynn: I know this isn't what you want to hear, but I would say ... don't worry about the details just yet.  This wasn't meant to be a seal tight example.  In your case, it might be that the browser window is too wide and if you reduced it's width it will fall into line as expected.  Again, the focus here is on the flow and syntax.  If this were a real project, I would be obsessive about the code.  Today, for this example, it's just about becoming familiar with "what's possible".  Keep following the tutorials ... near the end, you'll see the best way to ensure your web pages look like you want them to.  Hope that helps a little.  Smiley

  • colincolin

    great tutorials, where can i get the lesson03 folder?

  • @colin: Look at top of the page UNDER the video ... there's a paragraph that ends with this sentence: "Download the source code for Styling Your First HTML5 Web Page with CSS3".

    Good luck!

  • shondralynnshondralynn

    yes that helped - thanks

  • my!!!...this is simply great...simply put. I've not slept too well because i couldn't just get off the videos Smiley. Big thanks from Nigeria

  • KevinTalleyKevinTalley

    Is there an issue (currently) with validator.nu site? When I follow the advised steps, I get:

    Problem accessing /. Reason:
    application/x-www-form-urlencoded not supported. Please use multipart/form-data.

    Thanks, Bob! Been a LVS lifetime subscriber for years now -- you continue to provide great material!

    God bless ya, brother...
    Kevin T.

  • @KevinTalley: Wow, thanks Kevin.  You rock!  I just tested the site ... chose the Text Field option and it pre-populates the text area with boilerplate HTML5.  I clicked the validate button and all works fine.  Just do *that* first to see if you can get it to work.  If you can, then try the next part ... substitute your HTML5 in and see what result you get.  If you still have a problem, please feel free to write me personally and we can walk through it.  bob at ... you know the rest. Wink

  • KevinTalleyKevinTalley

    Well, duh. Guess I should have tried a different browser. Works fine in Chrome, just not in IE9 (at least not in my corporately-pushed severely locked down version at work...lol...). Sorry for the false alarm! :)

  • Sir !

    Great Series to learn

    Most systematic and great flow of teaching.  Smiley +1 to you Sir

    Your series made me stick on my chair to learn more and more.

  • @KrishMosaic: Thank you!  I'll see your Smiley + 1 and raise you +1 ... thanks for taking the time to write!  Smiley

  • MichielMichiel

    Thanks so much for the tutorials! Btw, I love that clock rocking behind you!

  • jfilipjfilip

    Hi Bob, very good work. Great video series and very clear.
    But I can't understand why You use Notepad (becouse of MS?).
    For beginners it would be better write code in Notepad++ (e.g. line numbers etc.)

  • Arcangel PandaArcangel Panda

    i have a problem too, with the stylesheet, using windows server 2012, it does not link, so i have to put the href like "./styles.css" hope it works to solve that.

    Aditional to this, another think like reading and html file like source file to a div content have'n't work either and send a error like access denied, i solve that accessing the page from an http site instead of a local file.

    Thanks for this tutorial, good work !!!

  • @Arcangel Panda: Yes, some operating systems like Windows Server products have some strict permissions issues that will tamper with what I demonstrated.  The best way to test is by creating a website and FTP-ing the HTML, CSS, images, etc.  A second best way is to create a personal website / set up a personal web server or IIS on your local.  However, both of these approaches are not beginner friendly so I stuck with the desktop / local computer way ... but as you pointed out thar be dragons there too.  Glad you got it figured out, and good luck throughout the remainder of the series!

  • DinuDinu

    Hi Bob,
    Instead of repeating
    width:80%;
    margin-right:auto;
    margin-left:auto;
    in the header,footer and section can I give it in the body part alone?
    I tried this style just in the body part alone and its giving me the same result.I want to check whether there is any advantage in giving this in all three sections(header,footer,section).

  • @marcusluo7: Thank you. I was running into the same issue that in my html file would not render properly in IE10 (as though the css did not even exist), but would display perfectly in Safari, Opera, Chrome and Firefox. The file was being blocked as you had said; I unblocked and now the file opens properly in IE10.

  • @Dinu: The only advantage is greater control over each section of the document.  If you need it across all those sections of the document, then sure ... put it in the body!

  • Hello, Mr. Tabor. I began to follow this great series. As you strongly suggested, I've installed IE 9. In my case, it's in Portuguese. The thing is: when I run the code (html + css) of the video 03 in IE 9 it doesn't render as expected. Nor the header/footer are centralized, neither with the font in white. And the border applied to the is rounded. However, Firefox 21.0 renders it ok. Due to company IT policies I can't upgrade to IE 10. Is there any known issue about this behavior? Thanks a lot for your series. It worths! Paulo Ricardo Ferreira Rio de Janeiro - Brazil
  • @pauloric: We're covering features that were not complete in IE9, but are present in IE10.  So, if Firefox works for you, go ahead and use it.  The work you create by following the rest of this series *should* work the same (maybe with tiny differences).  Hope that helps?

  • Hi, Mr.Tabor. Thanks for your time. It's a bit sad that I can't use the knowledge acquired. And, yes, you're right: the rest of the series worked the same way. Now I'm following the JavaScript series. Great, also! Again, thanks for your time. Paulo Ricardo Ferreira Rio de Janeiro - Brazil
  • @pauloric: Don't worry ... the rest of the world will catch up to you soon enough.  Smiley

  • RajeshRajesh

    Hello Bob,

    I am using Internet explorer 10 and notepad but unable to connect CSS and HTML on browser. Please advise me. I am recieving below error which i have checked in Settings/F12 Develops Tool.

    This Stylesheet cannot be viewed because its source is in a different domain than the page.

  • @Rajesh: I'm betting it has something to do with where you are saving those files.  I'm betting that you have them saved on your desktop and some operating system permissions are getting in the way.  Tell me:

    (1) where each file is saved ... full path

    (2) what operating system are you using

    (3) show me the code in your HTML that references the CSS

    ... and I'll try to help.  Good luck!

  • Hi Bob,

    First I wanted to say thank you much for the awesome work your doing in making these tutorials, I love them!

     

    I had a question, I have been freaking out over the past hour because my Arial font wasn't showing up even though I double checked every, tried bypassing the cache. I went as far as to delete everything and start all over again. It wasn't working in IE or Firefox.

    I opened it up in Chrome and the Arial font shows up there.

    Do you know why this is happening?

     

    Thanks!

     

     Update: I just tried continuing on and added the gray color to my styles file saved it and now its not showing up in IE, FF, or Chrome Sad (UPDATE 2- Fixed this so it works in Chrome now, miss spelling on my part, but no font or color change in IE or FF)

     

     

     

  • Hello Bob,

    I went through this tutorial and I had a few strange behaviors:

    1) The text font size for the title is displaying incorrectly despite being exactly what you showed (my guess is the reference for my browser (Firefox) is different. It wrapped to a second line.

    2) The code to get the figures to move to the right worked for the second figure but not the first. The text wrapped properly for the second figure but not the first.

    3) and finally the third issue I had was that the navigation section worked properly only for the header and not the footer. For some reason the margin command did not work... I checked it and it is a copy of the first command. (That is how I put it there to begin with).

    Other than those few stylistic issues everything worked properly. (Oddly enough IE did not work very well for me)

  • @ValiantRose:  I fiddled with my window size and the first and second issues resolved themselves (in Firefox and Chrome... IE is still just flat out not working

  • Hi bob Smiley

    its great experience for me...learning html5 andd css3 from your tutotral...

    awesome..tutorial for begginers in html5 ..

     

    can u sughest me....best and good books name for this course....(html5 and css3)

     

    also please tell me any other course u started ..as free  to learn

     

    please acknlowedge me...

  • Hey!

    I love the way you explained all the content...anyway, in video 3 I found a problem to connect html with CSS file. I mean It change font style and background, but any other changes didn't ...

    any suggestion? Please!

  • VicVic

    Hello, Mr Tabor. I am having the common issue of css style sheet not rendering into my HTML file. It does not show the font nor colors at all, when opening up the HTML file into my web browser, chrome. I have tested it into IE9 and didn't work either, I have done literally just about everything you've suggested in all these comments and haven't seemed to work, at all. Maybe is just a small slip up I missed, hope to hear from you!

  • @Drasylera: At this point, you have a caching issue in IE, I think.  You need to Ctrl + F5 to refresh the cache.

    @ValiantRose: Unfortunately, this was not intended to be a guide on how to do responsive programming.  In the future, I'll make sure the examples work when the window is completely expanded.  Others experienced similar glitches when trying to expand the browser to a large width.

    @Nimishkumar049: Thanks ... for books, check out the very last video in this series.

    @Ivan42Bernat: @Vic: I think you have typing errors.  At least, if you look through the 150 comments that precede yours, in most cases that was the cause.  Even one character misspelled or forgotten can cause problems.

     

     

  • JavierJavier

    Just wanted to say that i was having the same problem as others were having with the font and background not changing. Im gonna assume it was notepad because when i switched and used visual studio Everything worked perfectly. So that might be the best solution.

  • Okay first let me warn you that I am fairly new to all of this.  That being said everything was fine until I got to part 3. My HTML document doesn't seem to recognize the CSS document at all. The font is still Times New Roman. I have double even triple checked my work and everything is the same as you did in the video. 

    This is what I added to the HTML 

    <link rel="stylesheet" type="text/css" href="styles.css"

    This is what I put in the CSS

    body{font-family:"Arial,Helvetica,sans-serif;"}

    Any help would be greatly appreciated.

  • @heybartendr: Make sure you're not missing the closing > tag on the link (like you are, above).

    Make sure the styles.css file is named that on your computer, and that it's in the same folder as your .html page.

    Clear out your web browser's cache ... it may not realize you've changed the styles.css since the last time it loaded.

    To verify, use a DIFFERENT BROWSER to check.  If it looks correct in the new browser, then it's a caching issue in the old browser.

    And don't worry, these are common mistakes.

  •  I left something off in the previous comment it is actually 

    <link rel="stylesheet" type="text/css" href="styles.css" media="screen"/>

    I cleared the cache and even tried google chrome instead of IE

     

  • @heybartendr: If you're stilling hitting a wall, please zip up and send to me and I'll take a look:  bob@learnvisualstudio.net

  • AdnanKhanAdnanKhan

    Mr. Bob I've just started taking your tutorials and I was just starting to like them when all of a sudden I realized that I didn't know where to get the Lesson02.zip file, I've searched every inch of channel9 but still haven't found it, so would you be kind enough to give me a link to download that file, so I can complete my course on HTML5 and CSS3 and get a chance to thank you. :)

  • AdnanKhanAdnanKhan

    Sorry for the inconvenience Bob found it. :)

  • @AdnanKhan: No worries.  Good luck!

  • DavidDavidDilley Keepin' On

    GREAT! In addition to the other great CSS tricks you gave, this lesson solved my problem with centering ASP:  items on a page ... neat trick that 'auto', THANKS! ... oh, I also changed the master page to <!DOCTYPE html> Wink ... the original site was started in VS 2008 using the 'STRICT' version before migrating it to 2012.

     

  • Hi Bob,

    Great video and series, but I have been having a problem with not being able to pickup the .CSS file, as a couple of other viewers have had. After a bit of searching and debugging with IE10 F12 Tools I solved the problem.

    All I needed to do was open Tools -> Compatibility View Settings and check the Display intranet sites in compatibility mode.

    This fixed the problem - not the .CSS file is found and works correctly.

     

  • @DavidDilley: Awesome!  Didn't know that tip.

    @cliffh: Great ... good debugging skills .. those will come in handy.  Big Smile

     

  • re: Lesson3 @15:35

    h1/h2/h3 styling you only included the "em" units for the h1; the h2 & h3 sizes are ignored (under IE10/11) .

    FYI: Been working with pre-release Win8.1 w/ IE 11; having to set the F12 (IE developer tools) to force the "Document mode" to "edge" from "7" to get the "section" styles to properly render.

  • Clint RutkasClint I'm a "developer"

    @HerbM1YVR: I just tried the final code sample from this lesson on Win8.1 Preview with IE11 and it rendered as expected.  This is in edge mode.  I tried it in Chrome v29 as well and it rendered fine as well.

  • Matthew friezMatthew friez

    HMM I am following along here however the work I have done making the css does not function at all and I have re done the work several times and even compared it to the after file. I have gone as far as to copy and paste from the after file to the work file with no luck in making it work. I had no issues in lesson 2.

    I am using win8.1 eval copy.

  • matthew friezmatthew friez

    I wrote previously: "HMM I am following along here however the work I have done making the css does not function at all and I have re done the work several times and even compared it to the after file. I have gone as far as to copy and paste from the after file to the work file with no luck in making it work. I had no issues in lesson 2.

    I am using win8.1 eval copy. "

    woohoo! the "unblock" under properties did the trick. I am glad I stumbled across that! WIN 8 makes everything more complicated. is it possible to amend or update the video so others utilizing WIN 8 can understand the issue easier here? I spent a good hour figuring this out!

  • DRZDRZ

    Bob,

    Great Stuff.  Again -- Thanks.  Onto the lesson.

  • Using Windows 7 64-bit and IE10.  I also get the error "This stylesheet cannot be viewed because its source is in a different domain than the page."

    It appears that both files must be from the same source, either:  both created from scratch, or both copied from the unzipped folder.

    One of my files (Lesson03.html) was copied from your "Before" folder while the stylesheet (styles.css) was created from scratch. Perhaps there is some domain ownership still attached to the unzipped classroom files?  In most likelihood, it's probably a security device.

    Creating both files from scratch and cutting and pasting all the information into both lets me view the page without any errors... Interesting behavior with IE10. Chrome doesn't exhibit that problem.

  • Clint RutkasClint I'm a "developer"

    @escott: IE is trying to protect your system.  In this case, it is being a bit over protective.  I have Windows 8 (IE 10) and I'm not seeing this behavior however.  It could be your "intranet" (note that is intra, not inter) settings are set too high in the internet settings.  Mine are set to medium low.

  • kiruthigakiruthiga

    Hai sir this was a greate tutorial and easily understandable
    Thanks for your video sir............

  • NheryNhery

    I am new to HTML, aside from notepad where else can we do html and css? like can we do it on visual basic or Microsoft expressions or something like that? Anyone? Thanks!

  • Duncan MackenzieDuncanma "yeah that's awful close, but that's not why I'm so hard done by"

    @Nhery: Web Matrix is a pretty good option: http://www.microsoft.com/web/webmatrix/ or Visual Studio Express Web: http://www.microsoft.com/visualstudio/eng/products/visual-studio-express-for-web

  • Great tutorial!

    adobe dreamweaver is easy for use!Can or should i use this software?

    it is easy for use!

  • @atif12:  Answered on previous video comments.  Smiley

  • Peace AsukwoPeace Asukwo

    Great vedio it has been very helpful

  • Peace AsukwoPeace Asukwo

    The video is simple and very easy to understand. It has been very useful . . .

  • Thank you Bob !

    @those who encounter the "This Stylesheet cannot be viewed because its source is in a different domain than the page." issue, don't waste a lot of time playing with IE settings (like I did):

    1)See marcusluo7 post
    2) try in other web browsers

  • sir can you look at these codes please, these both codes are same but written not in proper order giving different output.
    there is border missing in the first one written by me, and 2nd one is your code.

    aside{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    background:#eeff99;
    padding:20px;
    border-radius:20px;
    font-size:.8em;
    border:1px solid#696;
    }

    aside{
    width:80%;
    margin-right:auto;
    margin-left:auto;
    font-size:.8em;
    background:#eeff99;
    padding:20px;
    border:1px solid #696;
    border-radius:20px;
    }

     

     

  • sir can you look at these codes please, these both codes are same but written not in proper order giving different output.
    there is border missing in the first one written by me, and 2nd one is your code.

    aside{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    background:#eeff99;
    padding:20px;
    border-radius:20px;
    font-size:.8em;
    border:1px solid#696;
    }

    aside{
    width:80%;
    margin-right:auto;
    margin-left:auto;
    font-size:.8em;
    background:#eeff99;
    padding:20px;
    border:1px solid #696;
    border-radius:20px;
    }

  • @rajendradubey: Ok, what is your question?

  • 1.

    aside{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    background:#eeff99;
    padding:20px;
    border-radius:20px;
    font-size:.8em;
    border:1px solid#696;
    }

    2.

    aside{
    width:80%;
    margin-right:auto;
    margin-left:auto;
    font-size:.8em;
    background:#eeff99;
    padding:20px;
    border:1px solid #696;
    border-radius:20px;
    }

     

    sir my question is that why there is difference in the output when we run these two commands, while they are same only order is different,
    is there any effect of order on the output?

  • Mandeep SinghMandeep Singh

    Hi bob,

    when i use hgroup float left in styles.css its moving the text not bullets. bullets are staying into channel 9 & mess everything. Please help.

  • steve psteve p

    hi Bob

    for some reason in the css when I write the img float:right for the figure one. the text that is on the bottom go on top. browser is i.e.11. any idea why it does that? I have tried changing the number in the clock patter for the distance it did nothing. then I went in the html and put a &lt;br&gt; thinking that it might stop the text going over the top of the image and it did not do it. I think it is probably something new in the browser that render it differently. what do you think Bob?

  • steve psteve p

    that is a <br> not a &lt;br&gt; , also will tell you that in windows 8.1 you need to configure the Html and Css file to open with internet explorer for it to work. also before saving the file that you have created put the setting to view all file extension in the file explorer. it took me a little while to discover how to solve this, I have tried all what was said in here for the style.css to work and it was not working at all.

  • sir one more question, 
    suppose there are 6  paragraph and i want that each individual paragraph have there own different font and style, so in order to do that with css WHICH 6 HTML TAG shall i use for each paragraph

    and if in place of 6 paragraph there are  several paragraph then what to do??

  • @Rajendra_Dubey: Sorry I don't know. I'm sure there's a reason, and it might be different between browsers.

    @Mandeep Singh: Try shrinking your browser to a smaller size ... say, around 900 pixels wide.

    @steve p: Try shrinking your browser to a smaller size ... say, around 900 pixels wide. re: images ... yes, Windows 8.x is more strict on the desktop.  I haven't looked into this extensively (because I usually don't put stuff on the desktop .. I thought it would be easier than using the Documents directory, but unfortunately it caused more confusion).

    @Rajendra_Dubey: You would probably apply a different class name to each paragraph then style it in CSS.  Please watch the remainder of the series for more information.

  • ok thanks..
    sir one more question
    /*<input type="button" value="City Palace" >
    <input type="button" value="delhi station" >
    <input type="button" value="taj mahal" >
    <input type="button" value="new delhi" >*/

    after removing the comments sign
    these codes will create 4 buttons, howto increase the spacing between them ??

  • Clint RutkasClint I'm a "developer"

    @Rajendra_Dubey: you'll want CSS, namely margin property.  http://channel9.msdn.com/Series/HTML5-CSS3-Fundamentals-Development-for-Absolute-Beginners/Understanding-Cascading-Style-Sheets-12

  • @Clint: sir thanks ,
    but i think i got another good property , you must have a look at this,
    its &nbsp

  • Clint RutkasClint I'm a "developer"
    @Rajendra_Dubey:a non breaking space will work but is far more ridged and has to be applied multiple times versus a css style. I suggest going through the series more and seeing what is possible with css
  • steve psteve p

    hi bob it is me again. I have tried the screen resolution it does not solve the problem. is there another way to do this? that would make it work properly. also since the comment section is closed for lesson 11. I have discover in lesson 11 that data and autofocus does not work the same it open a windows with data from past f12 debugging session or data from past online chatting session. is there something new to learn there. I am using windows 8.1 and i.e.11.0.1. thanks again.

  • @steve p: Could you share a screenshot of what you see?  Also, send me your code?  bob at learn visual studio dot net

  • steve psteve p

    I do not see your email address. I only see bob at least visual studio dot net. what do I type for email address bob (commercial a)least visual(dot)net? l I have try to take a screenshot it does not work with one notes the windows is closing when I take the screenshot for lesson 11. so I have take a fee picture of it with camera for data up to pattern it gives same result when I type a letter it open a window with past data execution of f12 tool or chatting session reference by the letter input. also I have save a screenshot of the lesson3 image and it is not in one notes where I add save it. could it be that one notes does not save image capture of i.e. ?

  • steve psteve p

    here is the code for lesson 3 the float right where the text go on top of the img at the place of the side : img {
    float:right;
    margin:0px 0px 10px 10px;
    box-shadow:3px 3px 5px 1px #cccccc;
    }
    and the html is your code so it should be ok.

  • steve psteve p

    <h2>Data List</h2>
    <p><label><span>Data List: </span>
    <input type=text list=somelist>
    <datalist id=someList>
    <option label=first value="First">
    <option label=second value="Second">
    <option label=third value="Third">
    </datalist>
    </label></p>

    <h2>Attribute</h2>

    <p><label><span>autofocus: </span><input type=text autofocus></label></p>
    <p><label><span>pattern: </span><input type=text pattern="^\d{5}(-\d{4})?$"></label>hint: Use a valid/invalid zip code</p>
    <p><label><span>placeholder: </span><input type=text placeholder="Hello World"></label></p>
    <p><label><span>step: </span><input type=number step=5></label>Hint: Must be divisible by 5</p>

    <p><button>Submit</button></p> and this is the code for lesson 11.

  • @BobTabor: I edited the email address ... read it out loud, and copy down what you hear yourself saying.  Smiley  I do that to avoid spambots.  Thank you.

  • steve psteve p

    hi bob I have sent you a email to confirm that I have the right address can you confirm?

  • steve psteve p

    hi bob in lesson 12 this code is not working.

    p:first-letter {
    font-size:3em;
    }

    article:before {
    content: '********';
    }

    p:first-of-type {
    margin-right:200px;
    }

    li:first-child {
    font-style:italic;
    }

    li:last-child {
    font-weight:bold;
    }

    li:nth-of-type(3) {
    text-decoration:underline;
    }

    span[title] {
    color:black;
    }

    span[title="first idea"] {
    text-decoration:line-through;
    }

    a[href^="email"] {
    font-size:2em;
    }

    span[title="idea"] {
    text-decoration:overline;
    }
    is there something new in i.e.11.0.1 that change this?

  • @Clint: sure sir thanks for guiding me Smiley

  • Mark RenshawMark Renshaw

    +1 on unblocking downloaded files to fix strange issues with .css settings not applying. You can use streams.exe from Sysinternals - Microsoft bought them - to unblock all files in a directory including subdirectories. Syntax: streams.exe -s -d *.*

  • @BobTabor: hey Bob, I have enjoyed this video course very much. I even laugh at some pages when I see their HTML codes now that I have a little understanding on the subject. For me, it was like trying to read Chinese (mind you, i can speak Japanese pretty well). Although, while doing some more research, I have seen some topics such as: "responsive web design" which as far as I've seen, it is pretty much handled through CSS. Seems pretty convenient. Would you be posting anything about that in the future? Thanks in advance.

  • 026026

    Hi.

    I encountered a really interesting issue. I created the styles.css file as same as you did in the video at 7:00. But it didn't change font to Arial. However, I copied the styles.css file from the "After" folder to the "Work" folder and delete all other lines but the font-family line, and save it and it worked! I checked everything. What could be different between this files?

  • @026: I have to admit I've read this a couple of times and I can't quite follow the sequence of events and what's different than you expected.  I think you might clear your cache - maybe that helps?

    @PEDR0MEJI4: I would probably recommend learning Bootstrap 3, and Microsoft probably (?) isn't interested in creating videos on that.  However, I'll be adding that to my LearnVisualStudio.NET 2014 curriculum.

  • kusmanakusmana

    hi, I am a beginner, I want to ask, I already follow the instructions, but still can not be as shown in the video, there is no influence of CSS3 to my html download, please the instructions

  • @kusmana: Check, double-check then check one more time your reference from the HTML to the CSS file location.  Then, clear your cache.  Then, try in a different browser.  Then, download and look at MY files that are associated with this lesson (top, under the video).  Good luck!

  • wow! thats amazing...! This is I wanted...! perfect way to teach perfect thing...!! Good Job

     

  • I have windows XP which does not support IE9 or greater so i am using google chrome but i am facing problem that it don't give grey color and i checked everything thousand of time!

  • Just starting the 3rd video. I wanted to make sure that it's OK to open in Notepad ++ instead on Notepad.  I prefer the Notepad ++ because it gives line numbers, thereby making it easier to debug.  Thanks again for all your great videos!!

  • Dog of the OperaDog of the Opera

    LOVE the tutorial! However, I'm in Lesson 3 and Lesson03.txt is not grabbing styles.css when it opens in IE. I've triple (actually quadruple) checked that I've typed everything exactly as you did, and that I saved the file as styles.css with utf-8 encoding. But nothing seems to work. Any thoughts?

  • @Dog of the Opera: I might need to see your code.  BTW, have you downloaded MY code and tried it to see if you get the same behavior?  Have you tried a different web browser?  Just a few things to help diagnose.

  • Dog of the OperaDog of the Opera

    I did download your files and they worked fine. I couldn't see a difference, though--maybe I just missed something. It's like it's not seeing the css file or something, even though they're in the same folder. And I tried this in IE and Firefox.

    Here's the code from my css file:
    body {
    font-family:Arial,Helvetica,sans-serif;
    background-color:#333333;
    }

  • @Dog of the Opera: If my files work and yours don't, then I'm sure it's some really small problem in your code.  No worries ... could you send me both of your files?  Give me a few days ... I'm really busy but I'll help if I can: bob@learnvisualstudio.net

  • dogoftheoperadogoftheope​ra

    No worries--I'm sure you have plenty to keep you busy!! I'll email the files, and when you have the time you can check them out. I'm very much enjoying your course.

  • Hi Bob, It is a great tutorial. I just came across one trouble. After typing the code

    img {
    float:right;
    margin:0px 0px 10px 10px;
    box-shadow: 3px 3px 5px 1px #ccccc;
    }

    Image 1 is aligned to the right, but image 2 is aligned to the left of Image 1. Is there anything that I did wrong. 

  • JaredJared

    I have same issue as @Muthulakshmi.

    The alignments all shift as I resize browser. If browser window is small, it appears like @Jean Alain
    This happens with the files in the Lesson 3>After files provided also. I tried in IE9 and Chrome.

  • i have a trouble when making a new sheet in note pad and create body

    body{

    font-family:Arial,Helvettica,sans,serif

    but after this also there is no change in my font it appear same as before 

    plz help .... :(

  • I have a problem when the window of internet explorer is restore down position the web page looks correct but when maximize the images in web page come together..

    pl z help me out

  • Brent MorrisBrentMorris​RTP Living the Dream

    PLEASE add a Readme.txt file to the .Zip files  - with details to UNBLOCK the provided files. Having to "make" this work - is two hours of my life that was a WASTE. Based on the huge number of repeated POST - a Number of Folks are or have been BURNED by this oversight.

    Thank You for Your Attention.

  • fogpotionfogpotion

    html page
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen">
    css page
    body {
    font-family:Arial,Helvettica,sans-serif;
    background-color:#333333;
    }

    Why isn't my page displaying style characteristics - everything is in the same folder. I'm using Windows 8 - any ideas? Anyone?

  • Partha ChakrabortyPartha Chakraborty

    perfect way to teach.thanks you sir.

  • @BrentMorrisRTP: Sorry, I'm not sure what file blocking issue you're running into.  I've never had that problem.  Are you running with admin privileges?

    @fogpotion: I'm willing to bet your reference to the CSS file is incorrect.  That, or you have a caching issue in your web browser.  Clear your cache and refresh.

     

     

  • ingridingrid

    Hi Bob

    I'm having the same img problems as two others above. the images don't sit correctly under each other as yours does unless the browser window is small and the text doesn't wrap correctly to the image. How do I solve this?

  • @ingrid: Keep watching.  :)

  • MauricioMauricio

    I recently started to learn html5 and css3 towards MVA and let me tell you that is a great way for learn.
    Thanks for share your knowledges.
    PS: Sorry, my english isn't so good.

  • Hi! 

    Where can I get the zip files?

     

  • Mario GehretMario Gehret

    Hi Bob,

    Thanks a lot for these videos. They are so helpful. I'm a beginner and I have two questions actually. I was trying to get the figcaption to be centered under the picture on the webpage we created, but I'm not having any luck.

    Also I validated my CSS3 styles page and and told me that we didn't put units after 1.6 and 1.3, which is the sizes we set for the headings 2 and 3. Is that correct? Should we have included the units?

    Thanks Bob,

    Mario

  • I suppose this is a common problem. I put in the link statement and the first CSS file. They are not exactly huge steps, and I reran the main HTML file with validator to check the link was ok.

    Absolutely zilch. The page is as serify as a very seriffy page. Tried exiting IE. Tried Chrome. Nothing.

    The problem is that there appears to be nothing in the way of debug help. Did it not like a file name? Something in the CSS file? The problem is: When it doesn't work you don't get a clue why or any means to find out. 

    Is it really that tricky?

  • Well I'm back on track but without ever finding the problem, by copying from the Lesson 4 CSS file. My suspicion is that by finger trouble I put a non-print char in the CSS file that caused a glitch.

    But I'm not bothering to find out.

  • jholiwelljholiwell

    When I run the html file, the only style change that occurs is the background color is grey and the font is in Arial. The header does not have the black background with the white writing.

  • sunnysunny

    Hi!

    First of all i want to say that these tutorials are great, really great!
    Second, i had some problems with the css file. Styles file did not change the font nor the background color. i checked to see if i spelled everyting corectly, and tried different solution presented here, but with no result. i eventually solved the problem by unblocking the html file. So, in your work folder, right click on the html file,properties, and then if the file apears as block, check unblock then apply. everything worked perfectly after that.
    i posted this in case somebody else has similar problems. also if what i did was not the best way to approach the problem, or if it will develop future anomalies, please tell me.
    that being said, thx Bob Tabor for these free lessons :). peace!

  • MartinMartin

    Hello.
    First really thanks to Bob for a great job with this tutorial i enjoy it.

    @sunny
    I was stuck with css last 30 mins. After all i do only one thing, i opened Lesson03.html in notepad, than go to File > Save as and do it like Bob (file type ALL encoding UTF-8). Save it as Lesson03-2.html i did it because ctrf+f5 didn't work. And now all works perfect :}

  • jeromyrjeromyr

    Thanks Bob your Tutorial is AWESOME! :)

Remove this comment

Remove this thread

close

Comment on the Post

Already have a Channel 9 account? Please sign in