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.

Format an HTML5 document with style elements in the document head.mp4-canvas323 492511.jpg

Ad

Steps

  1. 1
    Open Notepad.
    Ours is pinned to the taskbar, so we will mouse down to the taskbar and click on the Notepad icon.
    Format an HTML5 document with style elements in the document head.mp4-canvas14 425916.jpg
    Advertisement
    Was this step helpful? Yes | No | I need help

  2. 2
    Click and hold on a ".html" file on the desktop.
    We have one called "visi.html".
    Format an HTML5 document with style elements in the document head.mp4-canvas18 403892.jpg
    Advertisement
    Was this step helpful? Yes | No | I need help

  3. 3
    Drag it over Notepad.
    We will see a plus symbol attached to our cursor.
    Format an HTML5 document with style elements in the document head.mp4-canvas20 274861.jpg
    Was this step helpful? Yes | No | I need help

  4. 4
    Release, 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.
    Format an HTML5 document with style elements in the document head.mp4-canvas22 007851.jpg
    Was this step helpful? Yes | No | I need help

  5. 5
    Find the closing head tag.
    It reads, "</head>". Click just before it, at the beginning of the line, to place the cursor there.
    Format an HTML5 document with style elements in the document head.mp4-canvas69 601568.jpg
    Was this step helpful? Yes | No | I need help

  6. 6
    Give 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.
    Format an HTML5 document with style elements in the document head.mp4-canvas72 276574.jpg
    Was this step helpful? Yes | No | I need help

  7. 7
    Mouse 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.
    Format an HTML5 document with style elements in the document head.mp4-canvas73 647545.jpg
    Was this step helpful? Yes | No | I need help

  8. 8
    Open the style tag.
    Type "<style>".
    Format an HTML5 document with style elements in the document head.mp4-canvas79 73249.jpg
    Was this step helpful? Yes | No | I need help

  9. 9
    Add a carriage return.
    Format an HTML5 document with style elements in the document head.mp4-canvas81 345464.jpg
    Was this step helpful? Yes | No | I need help

  10. 10
    Close 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.
    Format an HTML5 document with style elements in the document head.mp4-canvas83 395452.jpg
    Was this step helpful? Yes | No | I need help

  11. 11
    Mouse 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.
    Format an HTML5 document with style elements in the document head.mp4-canvas85 013429.jpg
    Was this step helpful? Yes | No | I need help

  12. 12
    Tap the space bar four times.
    This extra indentation will help make our code legible and usable.
    Format an HTML5 document with style elements in the document head.mp4-canvas87 369412.jpg
    Was this step helpful? Yes | No | I need help

  13. 13
    Enter the body tag.
    Type "body". Then give one space and add a curly bracket. The whole line will read, "body {".
    Format an HTML5 document with style elements in the document head.mp4-canvas99 874281.jpg
    Was this step helpful? Yes | No | I need help

  14. 14
    Add one carriage return and four spaces.
    Format an HTML5 document with style elements in the document head.mp4-canvas103 619238.jpg
    Was this step helpful? Yes | No | I need help

  15. 15
    Add 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.
    Format an HTML5 document with style elements in the document head.mp4-canvas106 723222.jpg
    Was this step helpful? Yes | No | I need help

  16. 16
    Add one carriage return.
    Format an HTML5 document with style elements in the document head.mp4-canvas141 132902.jpg
    Was this step helpful? Yes | No | I need help

  17. 17
    Tap 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.
    Format an HTML5 document with style elements in the document head.mp4-canvas143 683886.jpg
    Was this step helpful? Yes | No | I need help

  18. 18
    Type in "background-color:".
    This is how we add a background color.
    Format an HTML5 document with style elements in the document head.mp4-canvas164 409758.jpg
    Was this step helpful? Yes | No | I need help

  19. 19
    Type 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.
    Format an HTML5 document with style elements in the document head.mp4-canvas180 533665.jpg
    Was this step helpful? Yes | No | I need help

  20. 20
    Mouse over to the "visi.html" page on the desktop and click to open it.
    Format an HTML5 document with style elements in the document head.mp4-canvas180 698669.jpg
    Was this step helpful? Yes | No | I need help

  21. 21
    Note that the background is currently white.
    Now close the page.
    Format an HTML5 document with style elements in the document head.mp4-canvas184 796664.jpg
    Was this step helpful? Yes | No | I need help

  22. 22
    Click "File".
    Format an HTML5 document with style elements in the document head.mp4-canvas189 657635.jpg
    Was this step helpful? Yes | No | I need help

  23. 23
    Click "Save".
    Format an HTML5 document with style elements in the document head.mp4-canvas190 56861.jpg
    Was this step helpful? Yes | No | I need help

  24. 24
    Click on the file on the desktop once more to open it.
    Format an HTML5 document with style elements in the document head.mp4-canvas191 895624.jpg
    Was this step helpful? Yes | No | I need help

  25. 25
    Note 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.
    Format an HTML5 document with style elements in the document head.mp4-canvas194 50057.jpg
    Was this step helpful? Yes | No | I need help

  26. 26
    Add a carriage return after the end of the closing element for our body tag.
    Format an HTML5 document with style elements in the document head.mp4-canvas208 603483.jpg
    Was this step helpful? Yes | No | I need help

  27. 27
    Add four spaces, to line up with the body tag.
    Format an HTML5 document with style elements in the document head.mp4-canvas209 927475.jpg
    Was this step helpful? Yes | No | I need help

  28. 28
    Type "h1 {".
    This will specify styling for our h1 tag.
    Format an HTML5 document with style elements in the document head.mp4-canvas213 175457.jpg
    Was this step helpful? Yes | No | I need help

  29. 29
    Close the h1 tag.
    Add a carriage return and four spaces, and then the closing bracket, "}".
    Format an HTML5 document with style elements in the document head.mp4-canvas218 856425.jpg
    Was this step helpful? Yes | No | I need help

  30. 30
    Mouse up to the end of the "h1 {" line and add a carriage return.
    Format an HTML5 document with style elements in the document head.mp4-canvas220 529419.jpg
    Was this step helpful? Yes | No | I need help

  31. 31
    Add six spaces.
    This is two spaces in from the "h1" line, which nests the tag contents neatly. Let's change the color.
    Format an HTML5 document with style elements in the document head.mp4-canvas222 526407.jpg
    Was this step helpful? Yes | No | I need help

  32. 32
    Type "color:blue".
    Format an HTML5 document with style elements in the document head.mp4-canvas235 121332.jpg
    Was this step helpful? Yes | No | I need help

  33. 33
    Click "File".
    Format an HTML5 document with style elements in the document head.mp4-canvas237 08932.jpg
    Was this step helpful? Yes | No | I need help

  34. 34
    Click "Save".
    Format an HTML5 document with style elements in the document head.mp4-canvas237 904316.jpg
    Was this step helpful? Yes | No | I need help

  35. 35
    Double-click on the file on the desktop.
    Format an HTML5 document with style elements in the document head.mp4-canvas239 874305.jpg
    Was this step helpful? Yes | No | I need help

  36. 36
    Look 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.
    Format an HTML5 document with style elements in the document head.mp4-canvas254 087223.jpg
    Was this step helpful? Yes | No | I need help

  37. 37
    Add a carriage return after the closing h1 tag.
    Format an HTML5 document with style elements in the document head.mp4-canvas259 262175.jpg
    Was this step helpful? Yes | No | I need help

  38. 38
    Add four spaces to align with the body and h1 tags.
    Format an HTML5 document with style elements in the document head.mp4-canvas261 133144.jpg
    Was this step helpful? Yes | No | I need help

  39. 39
    Open a p tag.
    Type "p {".
    Format an HTML5 document with style elements in the document head.mp4-canvas262 774098.jpg
    Was this step helpful? Yes | No | I need help

  40. 40
    Add a carriage return and four spaces.
    Format an HTML5 document with style elements in the document head.mp4-canvas265 140087.jpg
    Was this step helpful? Yes | No | I need help

  41. 41
    Close the p tag.
    Type "}".
    Format an HTML5 document with style elements in the document head.mp4-canvas266 034083.jpg
    Was this step helpful? Yes | No | I need help

  42. 42
    Mouse back up to the end of the line that opens the p tag, and add a carriage return.
    Format an HTML5 document with style elements in the document head.mp4-canvas267 733074.jpg
    Was this step helpful? Yes | No | I need help

  43. 43
    Tap the space bar six times.
    Let's make the color green.
    Format an HTML5 document with style elements in the document head.mp4-canvas269 231066.jpg
    Was this step helpful? Yes | No | I need help

  44. 44
    Type "color:green".
    Format an HTML5 document with style elements in the document head.mp4-canvas280 924018.jpg
    Was this step helpful? Yes | No | I need help

  45. 45
    Click "File".
    Format an HTML5 document with style elements in the document head.mp4-canvas282 390987.jpg
    Was this step helpful? Yes | No | I need help

  46. 46
    Click "Save".
    Format an HTML5 document with style elements in the document head.mp4-canvas282 861983.jpg
    Was this step helpful? Yes | No | I need help

  47. 47
    Double-click on the ".html" file on the desktop to open it in a browser.
    Format an HTML5 document with style elements in the document head.mp4-canvas284 449973.jpg
    Was this step helpful? Yes | No | I need help

  48. 48
    Note 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.
    Format an HTML5 document with style elements in the document head.mp4-canvas285 790968.jpg
    Was this step helpful? Yes | No | I need help

  49. 49
    Look 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.
    Format an HTML5 document with style elements in the document head.mp4-canvas332 291673.jpg
    Was this step helpful? Yes | No | I need help

  50. 50
    This 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.
    Was this step helpful? Yes | No | I need help

    Advertisement

Video: Format an HTML5 Document with Style Elements in the Document Head

Comments

VisiHow welcomes all comments. If you do not want to be anonymous, register or log in. It is free.




Grimm
Featured Author
811 Articles Started
3,555 Article Edits
154,415 Points
Grimm is a featured author with VisiHow. Grimm has achieved the level of "Colonel" with 154,415 points. Grimm has started 811 articles (including this one) and has also made 3,555 article edits. 2,051,000 people have read Grimm's article contributions.
Grimm's Message Board
Grimm: Hi, my name is Grimm.
Grimm: Can I help you with your problem about "Format an HTML5 Document with Style Elements in the Document Head"?
 

Article Info

Categories : Software

Recent edits by: Eng, Amanda, Grimm

Share this Article:

Thanks to all authors for creating a page that has been read 232 times.

Do you have a question not answered in this article?
Click here to ask one of the writers of this article
x

Thank Our Volunteer Authors.

Would you like to give back to the community by fixing a spelling mistake? Yes | No