Styling CSS font properties will alter the appearance of text elements in a HTML5 document. First of all a html5 document needs to be created that has a link to a ‘styles.css’ file in the ‘css’ folder. The html5 document should be named ‘index.html’ and the ‘css’ folder should be created in the same location as ‘index.html’. For this post both the ‘index.html’ file and the ‘css’ folder are created in a folder named ‘website’.

Styling CSS Font Properties. A website folder and file structure.
Organisation of files and folders for the website.

On line 6 the ‘index.html’ file has a link to the ‘styles.css’ file. On line 9 is a ‘h1’ element, on line 10 is a ‘h2’ element and on line 11 is a ‘p’ element. Each element has some text inserted between their opening and closing tags.

Styling CSS Font Properties.
A webpage with some text elements.

font-family:

The css font-family property allows the typeface displayed in a webpage to be defined. The current typeface is set by the browser and can be seen by opening the development tools.

Styling CSS Font Properties. Font family Times.

In the ‘styles.css’ file the ‘h1’ can be given a different ‘font-family’. The font-family ‘helvetica‘ can be applied instead of ‘Times‘.

Styling CSS Font Properties. A h1 heading with Helvetica typeface.
The ‘h1’ heading element now has a font-family of ‘helvetica’.

The ‘helvetica’ typeface is a ‘sans-serif’ typeface. A ‘serif’ is a slight stroke or line that protrudes from the letters in a typeface. In the french language ‘sans’ means ‘without’ so ‘sans-serif’ means without the strokes. The difference between ‘serif’ and ‘sans-serif’ typefaces is that ‘serif’ typefaces have small lines at the end of characters.

In addition to changing the ‘h1’ font-family we can also change the ‘h2’ element below the ‘h1’. This time the ‘arial’ font-family is applied.

Styling CSS Font Properties.
The Arial typeface is also a ‘sans-serif’ typeface.

The ‘Arial‘ typeface is similar to the ‘Helvetica’ typeface. Lets change the it from ‘arial’ to ‘fantasy’.

Styling CSS Font Properties.
The ‘h2’ elements font-family property now has a ‘fantasy’ value.

And finally on line we can change the font-family value for the ‘p’ element.

Styling CSS Font Properties.
The ‘p’ element now has a font-family property of ‘Courier’ applied.

CSS Font Properties

More css font properties can be added. Other css font properties include:

  • font-size
  • font-weight
  • font-variant
  • color

Lets add some more styles to our ‘styles.css’ stylesheet.

Styling CSS Font Properties.
Several css font properties have been added.

Study the different css font properties and then experiment with combinations.


CSS3 logo. Styling CSS Font Properties

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *