So, from part 3, you learned how to save and view your page. We also covered a few more tags. Now it’s time for more fun! Let’s change some formatting and fonts.
Objectives
After reading this post, you will be able to:
- Apply correct attributes to the start tag.
- Apply basic formatting to the HTML element using inline CSS.
Remember, you still have access to the Mozilla or W3C tag references provided in part 2. To help us with the styling we’ll be applying, add the W3C CSS Styles Reference to the list.
Where We Left Off
In the previous part, added two lines of text, separated with a line break and a paragraph.
<html>
<head>
</head>
<body>
This is my page!<br>
This is a second line of text.
<p>On this great day, I ask of you. How much wood could a woodchuck chuck if a woodchuck could chuck wood? Also, if a woodchuck could chuck wood, what kind of wood would it chuck? Would it chuck oak? Would it chuck pine? Would it chuck maple? Inquiring minds want to know!</p>
</body>
</html>HTML Span Elements
To introduce the concept of attributes and styling, I’ll introduce you to a new element; the SPAN element. The SPAN element is simply a container to used apply inline styling in HTML. This means, you can nest a SPAN element within many elements inside the BODY element.
In our existing document, let’s say we are really having a great day and we want to emphasize it by making the font color of the word “great” red. We can use the SPAN element to do this. Let’s focus on just the paragraph. I’m going to gray out everything else.
<html>
<head>
</head>
<body>
This is my page!<br>
This is a second line of text.
<p>On this <span>great</span> day, I ask of you. How much wood could a woodchuck chuck if a woodchuck could chuck wood? Also, if a woodchuck could chuck wood, what kind of wood would it chuck? Would it chuck oak? Would it chuck pine? Would it chuck maple? Inquiring minds want to know!</p>
</body>
</html>Attributes
The SPAN element has been applied, but right now, it is just operating as an unformatted container. To apply formatting, we have to describe the SPAN element using attributes. Attributes are basically descriptors for the element. Each attribute comes in a name, value pair and is placed inside of the start tag only. This pair is separated by an equal sign (=). The full syntax is as follows:
<INSTRUCTION name="value"></INSTRUCTION>
Notice you don’t have to explicitly end the attribute. To apply a style to the text within the SPAN element, we apply the style attribute.
<html>
<head>
</head>
<body>
This is my page!<br>
This is a second line of text.
<p>On this <span style="">great</span> day, I ask of you. How much wood could a woodchuck chuck if a woodchuck could chuck wood? Also, if a woodchuck could chuck wood, what kind of wood would it chuck? Would it chuck oak? Would it chuck pine? Would it chuck maple? Inquiring minds want to know!</p>
</body>
</html>Right now, we’re missing the value, so saving and viewing the HTML will render no change. Keep this SPAN element in mind while we briefly visit CSS. CSS will allow us to update the value.
Cascading Style Sheets
Cascading style sheets, or CSS, is an acronym you’ll hear quite often from now on. CSS rules allow us to control several aspects of text and elements on the page like color, font size, font weight background colors, spacing, margins, and padding.
There are several ways to apply CSS to HTML elements:
- EXTERNAL: Linking to a .css file that contains all of the style definitions. This is called an external style sheet.
- INTERNAL: Adding the style definitions within the HTML document using the STYLE element within the HEAD element.
- INLINE: Apply a style definition to a single HTML element within the page using the style attribute inside of the individual HTML element’s start tag. This is the method we will use.
Style rules always have a property and a value. The property names what style you want to change. The value tells what you want to change it to. CSS style rules are entered as such:
property: value;
There are specific properties and values that are accepted in CSS. To change the text color, we simply use the color property. This property accepts either hexadecimal codes, true color names, or colors in rgb(#,#,#) format. I tend to use the hex code option. We want to change the text color to red, so the hexadecimal code for red is #FF0000. See more about working with colors in CSS here. Use this tool for easy conversion. So what we are looking for is:
color: #FF0000;
Now, let’s plug this CSS style rule into the attribute of our SPAN element above.
<html>
<head>
</head>
<body>
This is my page!<br>
This is a second line of text.
<p>On this <span style="color: #FF0000;">great</span> day, I ask of you. How much wood could a woodchuck chuck if a woodchuck could chuck wood? Also, if a woodchuck could chuck wood, what kind of wood would it chuck? Would it chuck oak? Would it chuck pine? Would it chuck maple? Inquiring minds want to know!</p>
</body>
</html>We’re ready to save and preview in the browser!
Let’s also underline great, because, after all, it is a great day! For that, we apply the text-decoration style rule with a value of underline to the same style attribute because we want it to affect the same text. That rule isn’t as intuitive as color, which is why it helps to have a reference handy.
<html>
<head>
</head>
<body>
This is my page!<br>
This is a second line of text.
<p>On this <span style="color: #FF0000; text-decoration: underline;">great</span> day, I ask of you. How much wood could a woodchuck chuck if a woodchuck could chuck wood? Also, if a woodchuck could chuck wood, what kind of wood would it chuck? Would it chuck oak? Would it chuck pine? Would it chuck maple? Inquiring minds want to know!</p>
</body>
</html>
Now, let’s change the page’s background color. For this, we use the style attribute with the CSS background-color style rule. This rule accepts the same values as the color style rule. Let’s change the page’s background color to yellow (hex: #FFFF00). No need for a SPAN element for this, instead, we apply the style attribute to the BODY element. Remember, the body represents what shows in the browser window.
<html>
<head>
</head>
<body style="background-color: #FFFF00;">
This is my page!<br>
This is a second line of text.
<p>On this <span style="color: #FF0000; text-decoration: underline;">great</span> day, I ask of you. How much wood could a woodchuck chuck if a woodchuck could chuck wood? Also, if a woodchuck could chuck wood, what kind of wood would it chuck? Would it chuck oak? Would it chuck pine? Would it chuck maple? Inquiring minds want to know!</p>
</body>
</html>
Look at you!
The Anchor Element
The final work on this page is applying a hyperlink. A hyperlink is a basic building block of the internet. It allows page visitors to navigate from page to page and site to site. Hyperlinks are added using the A element. “A” is a weird choice, right? Well, the A element means anchor. Anchors are references to another page, document, or even section of a page.
There is a specific attribute used to designate the hypertext reference (href), or the location of the item to be linked (or anchored). This is the href attribute. The value of this attribute is most often a URL or a relative file reference. We’re going to put the hyperlink below the P element (or paragraph). Remember, it still must be nested within the BODY element to show on the screen. Let’s do a shameless plug, and link to my website: https://tinagates.com. The text you place between the start and end anchor tags is what shows on the page as the hyperlink, so usually this text is a descriptor of what is being linked.
This alone will open the link within the same browser tab, which can be annoying. So you can employ the target attribute with the _blank value to open the link in a new browser tab or window. This will give you two attributes within the same element, which is definitely allowed.
<html>
<head>
</head>
<body style="background-color: #FFFF00;">
This is my page!<br>
This is a second line of text.
<p>On this <span style="color: #FF0000; text-decoration: underline;">great</span> day, I ask of you. How much wood could a woodchuck chuck if a woodchuck could chuck wood? Also, if a woodchuck could chuck wood, what kind of wood would it chuck? Would it chuck oak? Would it chuck pine? Would it chuck maple? Inquiring minds want to know!</p>
<a href="https://tinagates.com" target="_blank">Tina's Website</a>
</body>
</html>
In previous versions of HTML, all of the formatting covered (background color, text color, underline) were accomplished with different tags and attributes. In HTML, some of those tags have been deprecated in favor of deeper CSS integration with HTML.
Before we go, check the reference section for a list of the most common basic formatting CSS properties and accepted values. This is not a comprehensive list, but enough to get you started.
Well, that’s all for now! In the next lesson, we’ll cover HTML image elements. Stay tuned!
Check Your Understanding (2 Activities)
Relevant Vocabulary
| Term | Definition |
|---|---|
| Anchor | Inserts a hyperlink to another document or another part of the page |
| Attribute | An added description of how the element should impact the page |
| Cascading Style Sheets (CSS) | A set of rules impacting style through formatting and structure |
| Hyperlink | Text, usually clickable, that directs a user to another page |
| Inline CSS | CSS that affects a single element. Included using the STYLE attribute |
| Property (CSS) | The style feature of an element you are looking to change with CSS |
| Value (CSS) | The specific effect that will be imposed using CSS |
Reference
| Property | Some Accepted Values |
|---|---|
| background-color | hex value, color name, rgb(red_value, green_value, blue_value) |
| color | hex value, color name, rgb(red_value, green_value, blue_value) |
| font-family | a valid font name. If the font name is more than one word, enclose it in single quotes. |
| font-size | a font size (number) in pixels (px) or points (pt). Other units/values are accepted, but let’s focus on these for now. |
| font-weight | normal | bold | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 . The larger the number, the heavier (bolder the text). |
| text-decoration | underline | overline | linethrough . Other values are accepted, but let’s focus on these for now. |
Examples
background-color: #FFFFFF;
background-color: orange;
background-color: rgb(180, 100, 120);
color: #000000;
color: blue;
color: rgb(120, 100, 180);
font-family: 'Times New Roman';
font-family: sans-serif;
font-size: 12px;
font-size: 14pt;
font-weight: bold;
font-weight: 300;
text-decoration: underline;