Style Attributes in CSS

Transcript

In previous lessons, we learned that browsers give tags default styles. Some of these default styles include properties you haven't learned yet.  In this lesson, I'm going to teach you what some of these properties are, and when it makes sense to change them. 

Lets start with underlining text. The anchor tag has a blue color and an underline by default. To get a line underneath text, you have to use the text decoration property. text decoration can take the values none and underlined.  And as I'm sure you've guessed, <a> tags use underline.

A lot of web developers remove the underline from their anchor tags by giving them a text decoration of none.  This is what I did for the anchors in my table of contents. 

It's also common to make the font of anchor tags thicker, you can change the thickness of a tags font by using the font weight property, and one of its two values, bold or normal. Since I wanted to make my anchors font thicker, I gave them font weight bold. 

You're probably used to seeing this font weight since it's the default for strong tags and all of the headings. Be careful when changing the default styles of tags. Sometimes it's a good idea, like when removing the underline from anchor tags.  This looks nice and the cursor turns into a little hand when you hover over anchors. So users still know that can click that text to go to another location. 

Lets recognize that people have grown used to certain default styles. For instance, making the font weight of strong tags normal might not make much sense. Most people expect urgent text to be bold and would be a little confused if you removed the boldness. They might not even realize that the text is supposed to be really important anymore. 

To be an awesome web developer, you'll have to find the perfect balance between changing the default styles of tags and leaving them alone. Remember it is about page intent – what do you want them to do on the page? Your styling needs to support that.

Great lesson. I enjoyed that. 

See you next time.