Bonus Lesson: Attributes, Styles, & Hex Codes

Attributes, Style, & Hex Codes

While you've already got the foundation for getting started with HTML, there are three more main points for us to cover! This is entirely optional information; you don't need to understand these concepts to be successful in this course, but they sure help, especially when it comes to troubleshooting when the code isn't working!

Attributes

An HTML attribute simply tells us more about a tag. Attributes show up all the time, but you'll likely see them most often when creating links and adding special styles (which we'll explain in just a second). For example, the code for this home page link looks like this:

See that href? That's an attribute of the <a></a> tag! (<a> is the anchor tag)! It tells your browser where to take you when you click the hyperlink.

Style

Next, we'll talk very briefly about the style attribute. Style gets its own section because it's one of the single most common attributes we'll use in this course. Style lets you change things like font size, background color, and borders. For example, let's take a look at some simple code that makes text larger!

The tag for that code is <span>, which on its own doesn't really do anything, but when we add the style attribute and font size property, it'll make anything within that span of text size 18. Let's look at a more complicated example: part of that snazzy shadow text box up top!

That looks a whole lot more complicated, right? But it's really the same concept. We have a tag (<div>), the style attribute, and a bunch of style properties (like position, padding, background, and border).

Please note: HTML is a very sensitive language; everything has to be just right for it to work. Luckily, you don't need to know how to type out all those properties. You just need to know how to cut and paste them, and, potentially, to alter what's in them!

Hex Codes

Alright, we saved the best part for last: hex codes. A hex code (think six, like a hexagon) is a code that corresponds to a color. Every hex code is made up of the number symbol (#) and six numbers or letters. For example, the hex code for the pale green color in the shadow text box above is #ddeedd, and the hex code for the color black is #000000.

Luckily, you also don't need to know how to write hex codes! In your course navigation, you'll see an HTML Colors Links to an external site. link that will take you to a wonderful site full of hex codes ready for you to use in every shade and variety you can think of! As a bonus, you'll also be able to see how text looks on that color to make sure you have enough contrast. There are a lot of useful side tabs there, too, so play around!

To use a hex code, just replace the hex code value in your code snippet with the color you want!

Danielle's Note!