HTML colors 🖍️ #12

Hey, it’s your bro, I hope you’re doing well and, in this video, we’re going to be covering some basic coloring techniques using the style attribute in HTML. Let’s get into it. The HTML style attribute is an in-line attribute that contains some information about how to style a whole or part of a webpage. This is going to be more of a hybrid HTML, slash CSS topic, because it’s about time we begin to pivot towards learning CSS, since we are nearing the end of this HTML tutorial series, we’re only going to be covering basic color is using styling, there’s way more, that we can do with styles, but we’ll save it for the CSS series to begin.

Let’s create some sample text for our web page between the body tags, let’s type some sample text.

Let’s add a heading I’ll use an h1 heading since it’s the largest and perhaps for a title. I will type I like colors and then, let’s close this, alright, let’s save refresh. I, like colors, alright, let’s add a sample paragraph to work on if you’re using sublime text, you can just type in lorem and then hit tab and then you’ll have all the sample text to work with. Otherwise you can type in whatever you want here. It doesn’t matter I’m going to save refresh and I believe we should add a pair of paragraph tags before and after this whole paragraph.

Alright, then I’m just going to copy this and let’s paste it and have a second paragraph.

Alright, that looks good enough. For me. All right, the first thing that we’re going to do is that we can apply an inline style attribute to nearly any HTML element. So, let’s begin with the background: color we’ll want to place this style attribute within the opening body tag, so we’re just going to type style equals, and then we have a few options here.

Let’s say that we want to change the background color. We can just type in background color and notice that the text color is changing. This is a CSS property and we’ll type in a colon, and let’s pick a color, the first one that comes to mind. For me is like green, but you don’t have to pick the same color that I do son.

Let’s save this refresh the page and the background color of our webpage is now like green and actually that’s not too bad. If a color, I would say it’s kind of nice, it’s like nature II and with picking colors you’re, not limited to only placing the color name, you can use hexadecimal, color values and if you don’t know how those work or if you need to find a value, I would recommend going to any search engine and just look up hexadecimal color picker, and then you can choose any color that you want.

Let’s say we want like a really dark blue color, maybe like a navy blue of some sort. I don’t know, that’s probably good enough for me, alright, something you can just take this hexadecimal code and we’re going to copy it and replace light green with this value and make sure to get that hashtag symbol.

Let’s save this and reload and the background color is now that dark blue color. However, we can’t see our text anymore, because the background is too dark, the point being with colors. You can either use the color name or you can use the hexadecimal color value and place that instead of the color name, I tend to prefer these values just because you can adjust these, depending on the exact color scheme that you want, or if you’re trying to Match like a logo or something you can get the exact colors instead of just some of the basic generic color names like red or blue, you can actually get a specific value.

Now we can use this in line style element and place this somewhere else within another tag.

Let’s say that we want to change the font color of our title, mostly because we can’t see it anymore because it’s blending in with the dark background, we’re going to type style, equals same process as before. Let’s start with the font colors, so we could just say color and I’ll just pick red, let’s save reload the page, and we can now see the header for our web page and the font. Color is red.

Let’s add a background color to this, so we’re going to place this within the double quotes of our style attribute and we’re going to add a semicolon to separate this and we’re going to type the background. Color and, let’s add a background. Color, I’m goon an pick something that would kind of clash with red. Just for an example.

Let’s say blue, let’s save reload alright, so we can change the background color of this area, specifically as well. However, one problem that I have with just using color names is that these colors tend to be very sharp, and if you use these together, it’s probably going to hurt your eyes and be difficult to read.

So, I much prefer to use these hexadecimal colors.

Instead of these color names, but it works for this example for learning purposes, we can also change the font color and the background color of paragraph elements as well, so we’re going to use the inline style attribute and its goon and be the same process as before.

Let’s change the color so color and I actually picked out a few colors already that I kind of like, so this is what I’m going to type but use whatever colors you want, so I’m going to type for F, C, 1 FF.

And let’s see what this looks like: that’s kind of cool and let’s add a background color as well, so separate this with a semicolon background color and for this color for the background I picked 0, 2, 6, 3 B yeah, that’s not too bad um, I’m not an artist though, okay, this next one’s goon can be fun.

Let’s do this again but pick some random values, so I’m just going to copy this place it within our next paragraph and I’m just going to choose two colors at semi-random, so who, alright, we’re going with blue. I guess, and I’m going to paste that here for the font color.

Let’s do this one more time. I guess red. I don’t know that was my poor attempt at being pseudo-random all right.

Let’s see what these semi random colors look like. Okay, that is horrible. So do not do anything like this. The colors really clash together. Okay, this color scheme was hurting my eyes, so I changed the colors to something. That’s actually a little bit better. I would say just green text on a black background. It’s fairly simple: if you would like a copy of this code, we worked on today.

I’ll include a copy of this in the comments down below and pin it to the top, but yeah.

That is how you can do basic coloring for your website, using the inline style attribute in HTML. Hey you! If you enjoyed this lesson, then you can help me help you in three easy steps by smashing that, like button drop, a comment down below and subscribe, if you’d like to become a fellow bro.

https://clicktrackprofit.com/betozcahsbaez

500 Leads Package download

https://allsolutionsnetwork.com/cgi-bin/d2.cgi/JA72661/myhomepage.htm