Format an HTML5 Document with Style Elements in the Document Head
Edited by Grimm, Amanda, Eng, Anonymous
You're watching VisiHow. In this tutorial, we are going to teach you how to add in-line style instructions to an HTML5 document.
- 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.
- 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.
- 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.
- 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.
- 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.Advertisement
Video: Format an HTML5 Document with Style Elements in the Document Head
- If you have problems with any of these steps, ask a question for more help, or post in the comments section below.
Categories : Software
Recent edits by: Eng, Amanda, Grimm