http://www.insidegeek.ca - In this tutorial we will be going over how to use stylesheets in XHTML. This tutorial will include material on attaching an external stylesheet, embedding styles, and adding inline styles. Distributed by Tubemogul.


More DIY videos at 5min.com

Video Transcription

Inside Geek Canada is a proud member of the Tech Podcast Network. If it's tech it's here. For other great shows please visit techpodcasts.com. Hello everyone and thank you for tuning in the Inside Geek Canada. My name is Evan Thies and today is your Application Tech feature, and today it's going to mean XHTML tutorial on how to attach a stylesheet and add styles. So I am going to do with the three different techniques that are really out there for adding styles. The first one is going to be attaching a stylesheet, having an external stylesheet, they use the reference you created. It's a separate file, you save it out, and then you attach it to your HTML file. I am also going to show you how to do embedded styles which are the ones basically at the top. They are in the individual files, so this would be styling the way you need just for that one file, but you don't need universally and you need to put it there. Then I am also going to go over how to do Inline styles for a thing like an image or just a paragraph where it's only that one particular element that's going to be that way and you really need to create a rule for that, because that's unnecessary. So I'll show you basically how to create that Inline style. Once again I am using Dreamweaver, because that is my editor of choice, but I am in the code view. I don't really use it as a WYSIWYG, just because I believe more encoding pages myself. So this will work in any text editor or Word Processor or whatever you're using to write your code. I am just using Dreamweaver as my base, because it helps laid out what the color is and stuff. So it's easier to see, but any general HTML editor will work for this. So we are in Dreamweaver here and as I said before we are in the code view. So this will work with any text editor or HTML editor that you would like to use. And here we have a valid XHTML page. Now I have discussed stuff like doctype in the past, so you might want to check out those videos. But if you go up here, if we just have the doctype to declaring that it's XHTML 1.0 Strict. We have all the encoding standards set and then we just have a basic head tag with the title in it here and then the body with the basic paragraph in it there. So what we are going to talk about is, how to attach different types of stylesheets? So two of them will be done in the head. So let's add a bit of space up here. The first what I am going to discuss is how to attach a Link stylesheet. So what you should go out and going to want to do is type the link href= and in there we are going to -- this is the file, so I am just going to put it, style.css, and this is local to where you are saving this HTML file. So if you've index.html and right next to it style.css, this will work. But if you're saving at, say, in a different folder called, you know, style, so you have a bunch of them that you could do, style/ like that. But we are just going to leave it like this for now. Next, we are going to put type. For the type this is text/css, because it is css. Next, we're going to do rel, which just basically stands for relation and what relationship does this have to the HTML page and that is stylesheet. Now last part here some people tend to forget, is going to be media and that basically defines what kind of stylesheet this is. For today's example I am going to use screen. Now the reason I am using screen is, because this page would typically be displayed on a computer screen. If wanted to do print, you could add print there. This is basically for defining on different portable devices or when they are printing, how the web page is going to render. So that's basically a Link stylesheet. That's telling it, to grab style.css from the root directory and it's a text CSS document. It's a stylesheet relation of the HTML and it's media type is screen. So basically that's where you can pull out. You can go create that new file and you put your styles inside there. But the next I want to show you is, how do we include specifically on this page that we call embedded styles? They are basically just on the certain page so you have a certain paragraph layout but only on this page, you need them. You are going to put it there instead of doing in the text one. So for that we can just open a tag and type, style, next put type = "text/css" because that's what it is and right away here we are just going to of media and I get them set at the screen, but like I said, you can set it to print or whatever you might need. And this one has to be closed. So Dreamweaver helps me fill that in with the /style. Then in here this is where you can style things. So let's say we want to just change the body which you wouldn't typically do in this kind of style sheet, but just as an example, you can do body and say let's do background. See, Dreamweaver is quite useful in hat sense. You can just get the code here, background color and let's just do black. Let me close that there and then I'll basically make the background color on this page black and that's using an embedded style, you wouldn't typically use the body background color in here, but this is just an example. And the last type is Inline which can be used on almost every element. So I'll do a couple of examples here. So on this paragraph we can go style and this is inline right in the paragraph here, and let's just give it a margin of let's say 5em, and that'll basically make the space all around it, but let's say here, you could even do this on a div. Let's create a div here, which is just basically a literal divider and so you want this to be an actual box. So you could do style = and then you could to width of 200 pixels and a height of 200 pixels, and let's say even a border. You can make it 2 pixels solid, black, and basically that will be 200X200 box, that's all black and that's basically done inline, but what you could also do, if say you didn't want to do that one, just copy this piece of code here. You can just delete that and you could make this say, id= "div1" and just call it div1 or something like that, and in main line here you can go div1, you could just take those and paste them in there. And now that's still telling at the div1, actually you've to put the hash tag here, that tells it. In fact, I'll even go for as far to do this for my benefit for organization, I'll go div, so basically I know it's a div and hash tag, div1 (div#div1). So that's what kind of element it is the id, and then say width. But you get the idea, width 200 pixels height 200 pixels, border 2 pixels solid black and that's basically just for this page. Now you could also add that to the general stylesheet, if you are going to have a whole bunch of these different divs and you can give it like a class element. But this is just a simple way to basically style your page and as you probably know, I am big of fan of keeping presentation and XHTML markup separate from each other. So I try to steer away from doing the Inline, if possible. I do that for somethings if I can really come up with the class or idea for it's only going to be used definitely once. But definitely try to actually create ids and classes and in that way you can actually put them in the text stylesheet, and really separate the presentation. And up here you could even go as far to copy this and make it this one called print and change this to like print style.css and that way it knows that it is printing when they go File>Print, they will actually you would see different render when they print it that way. You can strip out images, strip out unnecessary color and just kind of put the textual content. So that was just the three ways you can add styles to your XHTML documents whether that be attaching an external stylesheet or embedding in the individual pages there or by doing it Inline in the paragraph or an image and just adding the style tag in there. If you've any other suggestions for the application tech feature, maybe that be a tutorial you want to see in Photoshop or Final Cut, I've quite a few different programs so you can just shoot me an email and see if I can do some tutorials in there. I also take general tech related questions and