HTML105 - HTML Style

I know some of you have been expecting my weekly newsletter on Frontend Development for the past two weeks now. Before I begin with this week's content, I want to sincerely apologise for having not been able to create content for you for the past two weeks. This happened because of unforeseen occurrences that prevented me from creating content for your weekly consumption. Once again, I am sorry for that blank patch and I hope you guys didn't miss me too much though...lol.

Now let's get on with our topic for discussion for this week, shall we?

In the previous edition, we explained the fundamental classification of HTML elements into "Block" and "Inline" elements, discussing the difference between these two classes. We also talked about some of the most common HTML tags there are and how we can use these tags.

We will consider how to style HTML web pages in today's edition. Mind you, we haven't gotten to CSS just yet, we will learn about CSS when the time comes. But what we will be talking about basically is the HTML style attribute.

The HTML style attribute, usually hosted inside the opening tag of an element, is used to add styles to an HTML element. Such styles can be used to affect the colour of a text, the font style, font size and so much more. The HTML style attribute usually has the following syntax:

From the above syntax, one can observe the style attribute inside the opening tag of the element. Just like every other attribute, this too is written as a name-value pair. The difference is that the value, in this case, is not just a value, but another sub-pair of property and value. The “property is indeed a CSS property and the value is a CSS value, these will be discussed in detail when we get to CSS. But for now, let us focus on the application of this property-value pair in this discussion of the style attribute.

Now let us give life to what has just been said. Take for example I have the following content that I want to recreate on a web page:

Style Attribute Example

Below is a dommy to-do list. Click anywhere outside the list to add a new list item. Click an existing list item to change its text to something else.

• This
• List
• Is
• Not
• Working

This to-do list is a dommy and doesn’t really work. (comment this line)

Now let’s, first of all, replicate the above content in our Visual Studio Code, what we will have will look like this:

Hmm! There seems to be a problem here! And no it is not the misspelling of the word “dommy”. Granted that’s an error, as the accurate spelling is “dummy”.

But notice how our paragraph text runs beyond the view width of my computer screen. If you are using a smaller screen than mine, you’ll probably notice this break deeper in the paragraph text, and if you’re using a screen larger than mine, it will be observed further down the line of the paragraph text. However, if you’re using a very large screen, you probably won’t notice this. But it is important to note that when writing code on your Visual Studio Code, the editor tends to run off beyond the width of your screen once the full width of the screen becomes exhausted. This is generally not a problem, because you can always use the horizontal scroll to get to the end of the line. But for me personally, I don’t like using the horizontal scroll. I prefer to have my code on one full view and to make use of the vertical scroll to go up and down the page if I need to. But the horizontal scroll of going left and right is not meant for me. So if you’re like me and don’t like the horizontal scroll as well, you can fix this problem very easily by simply pressing the “alt” + “Z” keys and all text that goes beyond the view page across the entire code base will be wrapped.

You can also elect to use the “enter” button at the point where the overlap starts and this will take your code to the next line. But this is usually not very much efficient, because you will have to repeat this every time your code goes beyond your screen width.

So for me, the first option works just fine, because I only have to do it just one time. Now let us press the “alt” + “Z” keys and see:

That’s much better now, doesn’t it?

As you can see, our little trick causes the paragraph text to wrap and not go beyond the width of our screen or go to the next, as the <p> element remains wrapped on line 11. This trick remains active as long as this code is concerned. If I want to reverse this, all I have to do is press the same “alt” + “Z” keys again. But we don’t want to do that, so let’s just continue.

Also, you will find that the last line is commented and as such will not appear on the browser when the code gets rendered to a browser. This is what our content looks like on a browser when we hit the “Go live” button at the bottom right corner of our Visual Studio Code window:

Now we want to make use of the style attribute to effect some changes to this content. We will be doing the following:

1. We will change the background color of the entire webpage to green.
2. We want to also change the background color of the list section to red.
3. We want to lastly change the font color of the list items.

The are so many changes we can make to HTML elements using the style attribute. But for demonstration, we are going to only stick with these few. Going back to our code to carry out these three tasks, we will have:

Now when this code gets rendered to a browser, what will it display? Let's see the result:

If you observe, you will find that the background color of the entire page is now green as declared in the <body> element, the background color of the list items is now red as declared in the <ul> element and the font color of each of the list items is now white, just as intended.

But, I want to believe that you must have also noticed from the code that the last list item has more than one property-value pair. That was pretty much intentional on my part because I wanted to show you that an HTML style attribute can have more than one property-value pair. In this case, in addition to making the font color of the list item white, I also made the font size bigger than the others.

?

Oh boy! I have written a lot already! I guess if I don’t stop myself at this point, I’d probably continue to write to infinity. That’s how excited I get when teaching others about Frontend Development and what I’ve learnt so far. But anyways, I hope you enjoyed the content this week….I should really just go now. So enjoy!

Don't forget to drop your comments in the comments section, I am always looking forward to your reviews and reactions to this Newsletter. If you have any questions you'd like to ask on the things discussed, or if you need some further clarification, I am just a DM away and will get back to you and answer your questions.

So until I come your way again next week, have a blessed day and a productive week ahead. See you in a bit!

#FrontEnd?#HTML?#Developer?#Software