CSS Tutorial - Chapter 3: The Style attribute

Right, so by now you should understand that HTML sticks a label on every little part of your pages content, and by now you are likely eager to start sticking a few CSS properties on those labels. There are several ways of doing this, and we will start with the one that is most easily applied, to virtually any HTML tag you like throughout your whole document: The Style attribute.

Using the style attribute simply means putting style="" within your start tag and then applying your CSS settings there, within the quotes. If we would like to create a small example of this, we might use the color property for example, which affects the text color of the written text. Like this:

<html>
  <head>
    <title>Styling the text color</title>
  </head>
  <body>
    <h1 style="color: blue;">Apples again</h1>
    <p style="color: red;">
      Here be red apples.
    </p>
    <p style="color: green;">
      These apples shall henceforth be green.
    </p>
  </body>
</html>

As you may have guessed from looking at the code, and as you will see if you copy it to a text file and open it with your browser, the topic will be blue, the first paragraph will have red text, and the second green. It is of course also possible to enter hexadecimal HTML color values as well, for those of you who might know what those are.



Now, one word about this though. By using the style attribute on tags within the HTML code, we're forced to also leave our CSS styling options in the HTML document itself. This means if we make many pages from the same template and later want to update the look of things, we will have to update the style properties on every single page. This would obviously not be very fun to have to do, and in that way it really undermines the very beauty of CSS design.

Therefor, I suggest to you that you'll remember the style attribute as a way to apply CSS settings for temporary testing or whenever you absolutely have to for some odd reason, but that you other than that try to avoid it completely. We will take a look at much better ways of working with CSS styling in the next chapter, namely ID's and Classes.





< Previous: Introduction

robert@eagleowl.se     +46 (0)26-16 13 61     www.eagleowl.se
©2021 EagleOwl