Styling content

You can use external CSS to control nearly everything about a web page. To help you familiarise yourself with CSS attributes, let’s start with styling some basic HTML elements: fonts, text layouts, lists, and links. As you work through this activity, you will see many of the same attributes that you learned about in the previous weeks. But instead of specifying them in the HTML, you will add them to your external CSS instead.

Fonts

Fonts are set using the <font-family> property. This property is used to specify a font, or list of fonts to choose from, to apply to the specified element.

p {
 font-family: Helvetica, Arial, sans-serif;
}

In this example, all instances of <p> will be rendered in the Helvetica, Arial, sans-serif font family.

Web browsers can only apply the fonts they have available; as such, it’s best to stick with ‘web-safe’ fonts that are most commonly available in almost every device.

html {
 font-family: Helvetica, Arial, sans-serif;
 font-size: 20px;
 colour: black;
}

Text layout

• <left>
• <right>
• <center>
• <justify>.

Lists

• <list-style-type>: sets bullets to be squares or circles in unordered lists (<ul>); sets an ordered list (<ol>)to display items with numbers, letters, or Roman numerals; or hides the bullet entirely.
• <list-style-position>: positions bullets inside or outside a list item.
• <list-style-image>: specifies a custom image for a bullet.

Note that setting <list-style-type:none;> might come in handy when you style your list items and you don’t want to display a bullet point.

Links

When browsing the web, you might notice some links appear differently depending on whether you have visited the link or not, or when you hover your mouse over them.

Last week, you learned about the class attribute that you can use to identify customised elements for styling purposes. As an element, links have their own set of pseudo-classes to indicate the state of a link. These pseudo-classes are built in, but you can also customise their attributes with CSS. They are identified in CSS using a colon.

This table outlines the pseudo-classes and how they work:

You can vary this behaviour by altering the <color>, <cursor>, or <outline> properties. (When dabbling with <outline>, be aware that this property is a useful accessibility aid, and you should ensure that focus is equally visible with your own styles.)

In the following example, we have removed the underline and disabled the outline, replacing it with a solid bottom border and background colour when the link has focus, or is hovered over.

a {
 outline: none;
 text-decoration: none;
}
a:focus {
 border-bottom: 1px solid;
 background: #FFFCC2;
}
a:hover {
 border-bottom: 1px solid; 
 background: #CDFEAA;
}

Try adding this code to the CSS in JSFiddle and then create a hyperlink in the HTML. Once you get it working, try adjusting the CSS to change the style of your hyperlink.

In the previous example, you can also see the cascading nature of CSS. Think of :focus and :hover as subclasses of a. This means they both inherit the basic attributes of a (outline and text-decoration cascade down to each subclass automatically) and add their specific attributes (border-bottom and background) to those common features. CSS uses a hierarchical structure to organise these variations under their overarching style class. This useful feature avoids repetition and results in leaner, more efficient code: you only need to specify the common attributes of the subclasses once in the parent class.