Styling Text-Based Elements
Until now, we have seen some of the basic text formattings that HTML allows you to implement on a web page. However, depending on the function and the purpose a web page serves, we might need some styling applied to the text-based elements. Here, we will introduce the common issues surrounding the styling of web page content. We will introduce the different units of measurement, including pixel and relative units. We will then walk through some examples of how to style common web components such as breadcrumbs and navigation bars.
CSS Resets
As you begin styling web pages, you will soon realize that different browsers render your pages slightly differently from each other. This can be very frustrating and makes the task of developing websites that look the same across different browsers a nightmare.
Luckily, there is a well-known solution to alleviate at least some of this frustration. A CSS reset is a style sheet whose sole purpose is to level the playing field across browsers. This file will be loaded before any of your page-specific styles are added. The following is an example of the most basic form of CSS reset code:
* {
margin: 0;
padding: 0;
}
What this will ensure is that all HTML elements will have zero margin and padding before you apply your custom styles to your page. This gets around the issue of different browsers by default adding varying amounts of padding and margin to certain elements.
Although using this reset would be better than having no reset at all, there are more sophisticated CSS resets available. The following shows a popular CSS reset developed by Eric Meyer:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
As you can see, this is more detailed than our first example and would give us a better chance of reducing cross-browser inconsistencies in our web pages.
CSS Text Properties
When styling text-based elements with CSS, there are two main groupings of properties you will see used over and over. These are groups of properties that are based around text and font. We will begin by looking at the most commonly used text-based CSS properties that you will need to become familiar with.
The first property we will look at is color, which, as the name suggests, is used to set the text color. You will typically set the color value using either hexadecimal, RGB, or a name.
For hexadecimal values, you specify two hexadecimal integers for the colors red, green, and blue. The values you provide range from 00 to FF, with FF being the most intense version of the specific color and 00 being the least intense. For example, #FF0000 will be the highest intensity of the color red.
RGB-based colors are different to hexadecimal values because you provide a value between 0 and 255 for each color, with 0 being the lowest intensity and 255 being the maximum intensity.
The following shows some examples of what this would look like in code form:
h1 {
color: green;
}
p {
color: #00ff00;
}
span {
color: rgb(0, 255, 0);
}
We will learn more about text colors and background colors in Chapter 5, Themes, Colors, and Polish.
You may have noticed that all the text we have seen so far aligns to the left by default. With CSS, we have the power to change this using the text-align property. You can style your text to be left-aligned, centered, or right-aligned. The following shows some examples of what this would look like in code form:
p {
text-align: center;
}
A web page for the preceding code would appear as follows:
Figure 3.14: Centrally aligned text as it appears on a web page
Note
The text used for explaining the CSS text properties is a work of Shakespeare sourced from the following: http://www.opensourceshakespeare.org/views/plays/play_view.php?WorkID=hamlet&Act=1&Scene=1&Scope=scene.
If you want to underline some text, you can use the text-decoration property, which gives you the ability to strikethrough text as well:
.underline {
text-decoration: underline;
}
A web page for the preceding code would appear as follows:
Figure 3.15: Underlined text as it appears on a web page
The following code shows how you would use the line-through property:
.line-through {
text-decoration: line-through;
}
A web page for the preceding code would appear as follows:
Figure 3.16: Strikethrough text as it appears on a web page
Another common styling requirement for text is the ability to control how it is capitalized. For this, we have the text-transform property, which gives you the ability to transform the text. By default, the text is set to lowercase, but with this property, you can set the text to all caps or title case. The following code shows how you would use this property:
.uppercase {
text-transform: uppercase;
}
A web page for the preceding code would appear as follows:
Figure 3.17: All-caps text as it appears on a web page
The following code shows how you would use the lowercase property:
.lowercase {
text-transform: lowercase;
}
A web page for the preceding code would appear as follows:
Figure 3.18: Lowercase text as it appears on a web page
The following code shows how you would use the capitalize property:
.capitalize {
text-transform: capitalize;
}
A web page for the preceding code would appear as follows:
Figure 3.19: Title case text as it appears on a web page
Finally, on our tour of the most used text-based CSS properties, we have the line-height property, which is used to control the amount of vertical spacing between lines of text. This is a property you will see used over and over as different types of copy will require different line heights. We will see two extreme examples of how a small and large line-height value affects the readability of the text:
.small-line-height {
line-height: .5;
}
A web page for the preceding code would appear as follows:
Figure 3.20: Small line-height as it appears on a web page
The following code shows how you would use the line-height property:
.large-line-height {
line-height: 1.5;
}
A web page for the preceding code would appear as follows:
Figure 3.21: Large line-height as it appears on a web page
CSS Font Properties
The second group of CSS properties we are concerned with is the font-based properties. These are responsible for defining the font family, the size of the font, and the weight. We will now take a quick tour of the most commonly used CSS font properties that you should become familiar with.
The first property we will look at is the font-family property, which, as you might have guessed, sets the font family. When using this property, you will usually provide a list of different font families in order of priority. If the web browser doesn't support your first choice of font, it will default to the second or until it finds a font family it can load. The following code shows how this property can be used:
body {
font-family: "Times New Roman", Times, serif;
}
The browser will attempt to load the "Times New Roman" font from the user's computer first. If it cannot load the font, then it will try "Times," and, if this fails, it will load the generic "serif" font family.
Now that we know how to set the correct font family for our text, we will need to control the size. For this, we can use the font-size property. You can set the value of the size using pixels or relative units such as ems. The following shows examples of this property's use:
/* pixels */
h1 {
font-size: 50px;
}
p {
font-size: 16px;
}
/* ems */
h1 {
font-size: 3.125em;
}
p {
font-size: 1em;
}
The benefit of using ems for the unit of measurement is that it allows the user to control the font size. By default, a browser's font size is set to 16px, but if a user wants to increase their default font size, they can. With em units, the font sizes will scale according to the base font size. With pixels used as units, you give the user less flexibility in controlling font sizes.
The last font-based CSS property we will look at is the font-weight property. This is used to control the weight of a font, typically to make a font bold as, by default, the weight is set to normal. The following shows you how this would look in code:
span {
font-weight: bold;
}
We now have all the knowledge we require to build a realistic-looking web page. We will put this theory into practice by building components for web pages one by one.
The display Property
Before we move onto the next exercise, we need to look into a new CSS property called display. By default, elements are either set to block or inline. Now, block elements will take up all horizontal space, while inline elements only take up as much horizontal space as their content. An example of a block-level element is a div tag and an example of an inline element is span. Sometimes, you need to style a block element as an inline element and vice versa. You will do this by using the following CSS:
div {
display: inline;
}
span {
display: block;
}
Video Store Product Page (Revisited)
Remember the video store product page examples from Chapter 2, Structure and Layout, where we stepped through several CSS layout techniques? We are going to be using a more detailed version of this page to work through some exercises demonstrating how to code some of the key components on the page. By doing this, we should be able to put most of the theory from this chapter into practice. The following figure is the revised wireframe for the page:
Figure 3.22: Video store product page revisited
Exercise 3.02: Navigation
In this exercise, we will step through the process of writing the HTML and CSS for the navigation component shown in the preceding wireframe. The following figure shows the navigation component in more detail:
Figure 3.23: Navigation
The following are the steps to complete this exercise:
- First, let's create a file called nav.html in VSCode using the following HTML code as a starter file:
<!DOCTYPE html>
<html>
<head>
<title>Exercise 3.02</title>
<style>
/* your CSS will go here */
</style>
</head>
<body>
<!-- your HTML will go here -->
</body>
</html>
- First, we need to decide on how we should semantically mark up this component. We will start with the nav tag, which we learned about in the previous chapter. We will place this in between the opening and closing body tags as follows:
<body>
<nav></nav>
</body>
- For the actual list of navigation links, using ul would be most appropriate as the order isn't of any significance. We will place the code for ul in between our nav tags as follows:
<body>
<nav>
<ul>
<li>Videos to rent</li>
<li>Videos to buy</li>
<li>Used DVDs</li>
<li>Offers</li>
</ul>
</nav>
</body>
- Since users of the web page will want to be able to click on each of the navigation items, we must add anchors for each item. We will place the anchors around the text contained in our list items as follows:
<body>
<nav>
<ul>
<li><a href="">Videos to rent</a></li>
<li><a href="">Videos to buy</a></li>
<li><a href="">Used DVDs</a></li>
<li><a href="">Offers</a></li>
</ul>
</nav>
</body>
- We will now have a look in the browser at what this will look like by default without any custom styling. To do this, right-click on the filename in VSCode on the left-hand side of the screen and select open in default browser. You should see something that resembles the following screenshot:
Figure 3.24: Default navigation
- This is very different from what we want the navigation to look like. To correct this, we will now add some CSS to more closely match the navigation component shown in the wireframe. We will start by adding a basic CSS reset, which will be placed in between the opening and closing style tags as follows:
<style>
* {
margin: 0;
padding: 0;
}
</style>
- We will use the flex layout technique we learned about in Chapter 2, Structure and Layout. We will also remove the default bullets shown to the left of the list items:
<style>
* {
margin: 0;
padding: 0;
}
nav ul {
display: flex;
list-style: none;
}
</style>
- We will now add some styling to the links so that they are no longer blue and more closely resemble the links shown in the wireframe. We will make the text bold, remove the default underline that gets applied to the links, and give the link some padding:
nav a {
color: black;
font-weight: bold;
display: block;
padding: 15px;
text-decoration: none;
}
The following figure shows the output of the web page so far:
Figure 3.25: Output without hover
- Finally, to apply the hover selector on the anchor elements and to set the link text to underline when the user hovers over the text, we will add the following code:
nav a:hover {
text-decoration: underline;
}
If you now right-click on the filename in VSCode on the left-hand side of the screen and select open in default browser, you will see the navigation component in your browser.
You should now see something that looks like the following screenshot:
Figure 3.26: Styled navigation