Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Generally speaking, formatting text and other elements is best accomplished with CSS. This course is really about HTML, but for better or worse, HTML has abandoned many of its formatting and presentation features and has become dependent upon CSS for these capabilities. There's a brief primer on CSS later in this course and I have a more complete course on this subject in the lynda.com online training library called CSS for Developers, but at this point there are a few things you need to know about CSS and styles.
Let's start by making a working copy of style.html and I'll name my copy as style-working.html. I am going to open it in my text editor, and I am going to go ahead and also open it in my browser, and there we have, side-by-side, we have the text editor on the left here and you notice I have Line Wrapping on, and so we can see all of this. And we have same document opened in the browser, and you notice that the browser is displaying this document.
It's just got a header and a couple of paragraphs and it's displaying it with all of its default styling, its default formatting for the browser. We haven't added any style to this yet. So we'll go ahead and add some style, and so here in our exercise files in the Chap02 folder we have a file called main.css. I am going to open that in my text editor as well. I am just going to show it to you real quick. It's a pretty simple stylesheet. It basically just resets things so that they have a different set of defaults, but a more consistent set of defaults than those of the browser.
This way it will display the same way in a number of different browsers on a number of different platforms. So if I want to link that stylesheet in I come in here in my HTML document and in the head section I am going to put it right after the title element. I am going to type link rel="stylesheet" type="text/css" href="main.css" and I'm going to close the element with the shortcut for an empty element.
I am going to save that. So the most common way for an HTML file to incorporate styles is to link to an external CSS stylesheet. And this link tag is the way that that's done. So the link tag goes in the head section, inside of the head element and that's the syntax. The rel attribute has stylesheet, which tells that the relationship between this document and the document that's being included is that it's a stylesheet. And the type is text/css which is the Mime type for CSS.
You just always going to use that string for type. And href refers to where the location of the file is, and in this case it's main.css in the same folder as the style-working.html file. So we'll save that and then we are going to bring up the browser and press Reload, and you see that our document now changes in it. Now it has the style from the stylesheet. So you see the text is in a different font and the header is in a different font, and that's because it's using this stylesheet.
Now for some purposes it may be more convenient to put the stylesheet within the document. You can do this with the style element also within the head. So I am going to go ahead and I am going to take out this link and I am going to say style and close style. So we have a style element that's a container and inside of here I am just going to say p and color: green. And again, we'll learn more about CSS later on in this course and there are other courses on lynda.com that teach you about CSS.
So if I go ahead and save this and reload in the browser, you'll see that we're back in the original formatting except that now these paragraphs are green because I told it that all of the p elements will have green text. Now instead I can say that the h1 elements should have green text, and so I just change that to h1, and I save this, and reload in the browser, and you see now the heading has green text. Or I am going to go ahead and put that back to the p element, sometimes it's more convenient to apply the style to an individual element.
So you can use the style attribute for this. if I come down here to the h1 element and I say style= and I can say color and make it blue, and if I save that and reload, now the header is blue and all of the other text in the paragraphs is green. On the other hand, and I am just going to undo that for a moment, you may want to apply a style to a number of elements, so you can use the class attribute like this. Come up here and I'm going to just change this and I am going to say .blue and color all in blue like that, and all elements support the style and class attributes.
So I can just come down here and I can say class="blue" like that, and I can maybe do the same on the h1. I can say class equals blue, and it will apply this style. It's named blue with a dot, the dot is a class selector. So whenever we use class, it matches with anything with the dot that has the same name, so that's blue and this is blue and this is blue. So when I save this and come over here to the browser and reload, we see that we get the header and that first paragraph are in blue. On the other hand, you may want to style just a particular element.
So I am going to come in here and I am going to use an ID selector which is the pound sign and I am going to say x01. What an ID selector does, let me give this a font-style of italic and save that. What an ID selector does is it allows you to select an individual element; an ID selector can only be applied to one element, whereas class could be applied to a number of different elements. So this is class blue and this is class blue. If I have an ID that says x01, only one element in the entire document can have that ID.
So here I say id=x01 and when I reload this that paragraph is still blue because it's got the class="blue," but it now has italic because it's that id="x01" which is only that element and it's set to italic. So I am going to go ahead and I am going to remove all of these styles, and I am going to save the document. I am going to show you a couple of special tags that are designed to allow style to be applied to ranges of a document. So the div tag, I am just going to come up here and I am going to say div.
The div tag is a block level element. I am going to end it down here. So all of these elements inside of this div are going to be part of the div element now and I can just say style="color: blue". And now I am applying a style to a block of the document. So div is a block level element. I'm going to Save that and reload here in the document, and you can see we have blue there and blue there. We'll cover more about what block level and inline level means later on in the course, but for now you'll want to see the div and span; span is the inline level version of this, are commonly used for applying style.
And I am going to take this text and I am going to put that within a span tag. I am going to say style="font-style: italic" and close the span here. So span is inline level, so you can put it in the middle of a paragraph, whereas with div, which is block level, you cannot. So if I save that and reload over here, you'll see that those words, wrapped at the margins and with a blank line separating the--are now in italic. So we'll learn more about block and inline level elements later on in this chapter.
Applying style with CSS is a fundamental skill for HTML documents these days. As you can see, HTML has a flexible set of features for supporting CSS styles.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 100984 Viewers
61 Video lessons · 87767 Viewers
71 Video lessons · 71655 Viewers
56 Video lessons · 103544 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.