Styling Your First HTML5 Web Page with CSS3 - 03

Great tutorial!

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

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

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.

that's great!!

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.    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!  

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!

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.

@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!

Very easy to understand. Thanks a lot!

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!

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.

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.

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

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!

@Craighappyface: 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

@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 

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!

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

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!

@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.

@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!

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.

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.

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!

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?

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?

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.

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!

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/

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!

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?  

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.

Excellent tutorials. Very concise and easy to follow.

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 ...

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 .. thanks

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

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?

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?

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

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:(

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.

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!

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.

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.  

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.

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!  

@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.

@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!

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.

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

@FOla: Ah, cool.  Thanks for that!

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

Hello Bob !

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

Aug 11, 2012 at 9:22 AM, 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!

1 day ago, 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!

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!

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.

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.  

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.

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;
}

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.

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.  

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!

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 . Big thanks from Nigeria

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.

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.  +1 to you Sir

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

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

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

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.)

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!

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.