Format an HTML5 Document with Style Elements in the Document Head
Edited by Grimm, Amanda, Eng
4 Parts:
You're watching VisiHow. In this tutorial, we are going to teach you how to add in-line style instructions to an HTML5 document.
Contents
Steps
- 1Open Notepad. Ours is pinned to the taskbar, so we will mouse down to the taskbar and click on the Notepad icon.
Advertisement - 2Click and hold on a ".html" file on the desktop. We have one called "visi.html".
Advertisement - 3Drag it over Notepad. We will see a plus symbol attached to our cursor.
- 4Release, and view the code that has dropped in. We have a basic HTML5 page, which we've been working on in our VisiHow HTML5 tutorials. What we need to do now is add some styling. Style is basically an attribute that can be added to a particular web page that is not part of the CSS document. Usually, we're going to want to have CSS, especially for larger sites. Really good coding, good programming, has everything to do with CSS when it comes to creating a website. We will discuss that in other tutorials. But for now, we will demonstrate how to add a quick style change to the page. This will give a basic understanding of how CSS works and show that really, it's not as difficult as one might think. We're going to add these elements one at a time to make it easy.
- 5Find the closing head tag. It reads, "</head>". Click just before it, at the beginning of the line, to place the cursor there.
- 6Give a quick carriage return. This is done with one tap of the "Enter" or "Return" key, and will move our closing head tag down one line.
- 7Mouse up to the new blank line and tap the space bar twice. We want to make sure our code is formatted and easy to read. For more information on this, please see our tutorial on how to format HTML5 code for easy reading and editing.
- 8Open the style tag. Type "<style>".
- 9Add a carriage return.
- 10Close the style tag. Type "</style>". Closing a tag before we fill in the contents is good coding practice. For more information, please see our tutorial on how to add head and title attributes to an HTML5 document.
- 11Mouse up to the end of the opening of the style tag. Add a carriage return. This places a blank line between the two style tags.
- 12Tap the space bar four times. This extra indentation will help make our code legible and usable.
- 13Enter the body tag. Type "body". Then give one space and add a curly bracket. The whole line will read, "body {".
- 14Add one carriage return and four spaces.
- 15Add a closing curly bracket. It will look like, "}". The reason we close them like this is because having the closing tag here like this will let us see, if we're trying to troubleshoot a problem with the CSS, exactly where whatever it was changed. We can put these in-line, but sometimes we'll have quite a few different things to add. We might have a font selection, a border, padding, colors. All of these things become more difficult to change if they're not individually separated. In order to individually separate these, we put them on their own lines, and we indent them again.
- 16Add one carriage return.
- 17Tap the space bar six times. Each time we nest something, we are indenting by two more spaces than the previous line. This helps us, because it makes the body piece of code stand out.
- 18Type in "background-color:". This is how we add a background color.
- 19Type in a color name. This specifies what the color will be. Let's do light gray. It will read, "background-color:lightgray". We're working in American, and it's easy to remember that "gray" is spelled with an "a" because it rhymes, and because "America" starts with an "a". It's spelled with an "e" if you're in "England". But in HTML, it's an "a" because it's an American thing.
- 20Mouse over to the "visi.html" page on the desktop and click to open it.
- 21Note that the background is currently white. Now close the page.
- 22Click "File".
- 23Click "Save".
- 24Click on the file on the desktop once more to open it.
- 25Note that the background color has changed to gray. Now, let's change the Heading 1 tag and our Para 1 tag. Close the browser. We will do these one at a time.
- 26Add a carriage return after the end of the closing element for our body tag.
- 27Add four spaces, to line up with the body tag.
- 28Type "h1 {". This will specify styling for our h1 tag.
- 29Close the h1 tag. Add a carriage return and four spaces, and then the closing bracket, "}".
- 30Mouse up to the end of the "h1 {" line and add a carriage return.
- 31Add six spaces. This is two spaces in from the "h1" line, which nests the tag contents neatly. Let's change the color.
- 32Type "color:blue".
- 33Click "File".
- 34Click "Save".
- 35Double-click on the file on the desktop.
- 36Look at "Heading 1". We can see that it has now changed to blue. This change only applies to Heading 1. Heading 2 has not changed. Neither has Heading 3. If we wanted to change them, we could, but we're not going to do that now. Close the browser. Let's add in one more tag.
- 37Add a carriage return after the closing h1 tag.
- 38Add four spaces to align with the body and h1 tags.
- 39Open a p tag. Type "p {".
- 40Add a carriage return and four spaces.
- 41Close the p tag. Type "}".
- 42Mouse back up to the end of the line that opens the p tag, and add a carriage return.
- 43Tap the space bar six times. Let's make the color green.
- 44Type "color:green".
- 45Click "File".
- 46Click "Save".
- 47Double-click on the ".html" file on the desktop to open it in a browser.
- 48Note that every paragraph displays in a lovely shade of VisiHow green. This is how you add in-line style to a document. We can also add individual attributes as we go down. We could have added those attributes in-line with the actual heading or the actual paragraph, and changed them on an element-by-element basis. However, that's a cumbersome way to code web pages. We're showing it now to give a basic foundation knowledge of how these things work and to show that it's actually pretty easy. Close the browser.
- 49Look at the style code that was added. It's pretty easy. It's not the sort of thing that is impossibly difficult. There are other parts that can get quite difficult, but this is not that bad.
- 50This concludes our tutorial on adding in-line style to the head of an HTML5 document to control on-page elements. Thank you for choosing VisiHow. I do hope you have a great day. If you've got questions, comments, suggestions, this is VisiHow, we've got answers. Talk to us in the section below. Have a great day.
Video: Format an HTML5 Document with Style Elements in the Document Head
If you have problems with any of the steps in this article, please ask a question for more help, or post in the comments section below.
Comments
User Reviews
There is no user reviews.
Article Info
Categories : Software
Recent edits by: Amanda, Grimm
