Tag Archives: font

CSS Font properties

In this tutorial we will look at how to use CSS font properties in an external style sheet. We will look at how to change the font-weight (eg. normal or bold), font-style (eg. normal or italic), font-size (eg. 12pt, 10px, 1em or 100%), font-family (eg. Arial or Tahoma), font-variant (eg. normal or small-caps), and the line-height. We will also look at how to add comments to our CSS.

There are two ways that we can change the values for different font properties:

  • On multiple lines
  • On one line

When we specify the font properties over multiple lines, it will look like this:

Font properties on individual lines in CSS file.
Font properties on individual lines in CSS file.

When we specify the font properties on one line it looks like this (note that there are required property values and some order to the values – watch the video to find out more):

Font property values on one line in a CSS file.
Font property values on one line in a CSS file.

Watch the video below and then scroll down to find out more about web-friendly fonts and to see the sample code.

The sample code below is for a CSS file with the font property values specified on multiple lines:

p{
 font-family: Georgia;
 font-weight: bold;
 font-style: italic;
 font-size: 1em;
}

Here is the code for a CSS file with the font property values specified on one line – much neater, right? A line of comments has been added to show the order of the values.

p{
 font: italic bold 1em Georgia; /* font-style, font-weight, font-size, font-family */
}

And here is the code for the HTML file that references the stylesheet.css file:

<!DOCTYPE html>
<html>
<head>
 <title>CSS font properties</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
</head>
 
<body>
 <h1>This is a heading.</h1>
 <h2>This is a smaller heading</h2>
 <p>This is a paragraph</p>
 <p>This is a paragraph</p>
</body>
 
</html>

Font-size units:

It is important to have an understanding of the four different units for the font-size property. The four different units are:

  • em – the em is scalable and is used in web documents. An em is equal to the current font-size of the web document. For example, if the document size is 12pt, then 1em will be equal to 12pt. 2em would therefore be equal to 24pt. You can also use decimals eg. 1.5 em. Ems are popular on the web because they are mobile-friendly and are used in ‘responsive’ web design.
  • px – Pixels (px) are fixed-size units that are designed for media that will be read on a screen. 1 pixel is the equivalent of one dot on the computer screen. The downside of pixels is that they do not scale to fit mobile devices or screen readers for the visually impaired.
  • pt – Points (pt) are usually used for print media and are also fixed-size units that cannot scale to fit mobile devices. 1 pt = 1/72 of an inch.
  • % – Percent (%) unit is like the em unit as it is also scalable. Eg. the current font size of 12pt = 100%.

In summary, the em and % units are really what you want to use for the font-size property, especially if you wish to develop mobile-friendly or responsive websites.  Stay away from px and pt as they do not scale for mobile devices. Try getting used to using em and % instead. Find out more information on font-size units here.

And lastly, here is an overview of some of the web-safe fonts that you can include in CSS:

Serif fonts:

  • Georgia, serif
  • Palatino Linotype
  • Book Antiqua
  • Palatino, serif
  • Times New Roman

Sans-serif fonts:

  • Arial
  • Helvetica, sans-serif
  • Arial Black
  • Gadget sans-serif
  • Comic Sans MS
  • Impact
  • Charcoal
  • Lucida Sans Unicode
  • Tahoma
  • Geneva
  • Trebuchet MS
  • Verdana

Monospace fonts:

  • Courier New
  • Courier, monospace
  • Lucida Console
  • Monaco, monospace

Text shadows

Another effect you might like to use (not mentioned in the video) is a text shadow using the text-shadow property. The text-shadow property has four different attributes separated by spaces.

The first attribute is the horizontal shadow (how much the shadow is to the left or right of the text). A positive number (eg. 3px) will display a shadow to the right of the text and a negative number (eg. -3px) will display a shadow to the left.

The second attribute is the vertical shadow (how much the shadow is above or below the text – this can also be a positive or negative number).

The third attribute is the blur radius (how much blur you want for the shadow). And the last attribute is the colour for the shadow.

Here is some sample CSS code for a text-shadow with a horizontal shadow of 3px, vertical shadow of 3px, blur radius and 5 and the colour blue for the shadow.

text-shadow: 3px 3px 5px blue;

And this is what it would look like:

text-shadow-effect-css

Using CSS to style your webpage

CSS stands for Cascading Style Sheets and is a style sheet language that is used to describe the look and style of web pages. CSS can be used to create a theme by modifying the layout, colours, and fonts.

Without any special styling or formatting, the web pages that we create don’t look very exciting. That’s where CSS comes in! We can use CSS to change the colour of text and backgrounds, use different font styles, and change the layout and overall theme of our site. This tutorial explains how to use CSS in a webpage.

There are three different ways of applying CSS:

  • Inline styling – the style attribute is applied within the HTML tag
  • Internal style sheet – style attributes are applied to selectors inside the head section of a webpage
  • External style sheets – style attributes are applied in a separate CSS file that can be used across a website

Below is an example of how to use inline styling within a HTML tag:

Inline styling
Inline styling

Below is an example of how to place the styling within the style tag inside the head section of a webpage:

Adding CSS using the style tag in the head section.
Adding CSS using the style tag in the head section.

This video tutorial will focus on using inline styling and internal style sheets. The next tutorial will explain how to use external style sheets. Watch the video below to see how to use CSS and then scroll down to see the sample code.

The sample code below shows how to use inline styling:

<!DOCTYPE html>
<html>
<head>
 <title>Adding CSS to a webpage</title>
 <meta charset="utf-8"/>
</head>

<body>
 <h1 style="color:red">This heading is red.</h1>
 <h2 style="color: #FE2EF7; border: solid 1px">This heading is pink with a border</h2>
 <p style="color:blue">This text is blue.</p>
 <p style="color:green; background-color: yellow">This text is green on a yellow background</p>
</body>

</html>

The sample code below shows how to use an internal style sheet:

<!DOCTYPE html>
<html>
<head>
 <title>Adding CSS to a webpage using internal stylesheets</title>
 <meta charset="utf-8"/>
 <style type="text/css">
 p{
 color:blue;
 }
 </style>
</head>

<body>
 <p>This is a paragraph of text. Because a style has been applied using the p selector, this paragraph will be blue.</p>
</body>

</html>

Tip:

The sample code for inline styling uses the HTML colour code #FE2EF7 for the colour pink. You can use the names of colours  for basic colours such as ‘blue’ or ‘red’ but for other specific colours you will need to use the HTML colour code (a combination of letters and numbers after a hashtag). You don’t need to remember all the colour codes but it is good to remember  #000000 for black and #FFFFFF for white. You can see all the colour codes here.