Starting to Build Our Style Sheet
The style sheet is ready to be used: it’s saved in the right location, and all of your web pages (all three — count ’em) are linked to it correctly. All we need to do is set some styles.
One of the first changes that people often make to a web site’s default styling is to alter the font (or typeface) that’s used. On Windows, most browsers use Times New Roman as the default — it’s the font that has been used in all the screen shots we’ve seen so far. For many people, though, it’s a little bit dull, probably because this font is used more than any other. It’s very easy to change fonts using CSS’s
The best place to use this is within the
body element, as shown below:
Here, I’ve chosen to use the Verdana font. It’s applied to the
body element because
body contains every element that you will see on the web page. The nature of the way in which CSS is applied means that every element contained in the
body element will take on the same font (unless another font is specified for a given element or elements within
body — but more on that a little later).
Great: Verdana it is! But … what if some people who view your site don’t have Verdana installed on their computers? Hmm, that’s a tricky one. The short answer is that the browser will make its best guess about which font it should use instead, but we don’t have to make the browser do all the guesswork. The
font-family property allows us to enter multiple fonts in the order in which we’d prefer them to be used. So, we could type the following:
This translates as: “Please style everything in the body of my web page so that the text appears as Verdana. Failing that, please try using Helvetica and, failing that, Arial. If none of the above are installed, just use whatever sans-serif font is available.”
We’ll use this selection of fonts in our diving site, so let’s open the style sheet file and play around with some CSS.
- Type the above CSS into
- Save the file, then open the homepage (
index.html) in your browser.
If everything went to plan, your web page (all three of them, actually) should display slightly differently than they did before. The figure below shows the appearance of our newly-styled homepage.
Tip: Sans-serif Fonts: Better for On-screen Viewing
A serif font is one that has all those little flourishes at the ends of each letter. These flourishes, which are shown below, “Highlighting the serifs of a serif font (Georgia)”, are known as serifs. They’re great for reading printed material, as they give a little shape to the words, making them easier to read.
However, on the screen, serif fonts can become a little messy, especially when they’re used for smaller type — there simply aren’t enough pixels on the screen to do these little flourishes justice. For this reason, you’ll notice that many web sites use sans-serif fonts (from French, translating as “without serif”) when the font size is set quite small.
Note that when you refer to a sans-serif font in CSS, you must hyphenate the two words, i.e.
The first element that we’ll style is our level 1 headings, denoted by the
h1 element. Let’s add some rules to our CSS file to see what’s possible when it comes to those headings. In your text editor, add the following to
Save the CSS file and refresh your view of the homepage in your browser. Can you see what’s changed? All the first-level headings now display in the Trebuchet MS font, while everything else displays in Verdana.
The font we’ve chosen is another sans-serif font, but it’s different enough to provide plenty of contrast with the paragraphs.
Note: Some Font Names Deserve Quotes
In the code example above, “Trebuchet MS” appeared in quotation marks. You don’t need to bother wrapping quote marks around font names, unless the font comprises several words, such as “Courier New” or “Times New Roman.” A single-word font name, such as Arial or Verdana, does not need to be wrapped inside quotes.
Have a quick look around all three pages of the web site and you’ll see that your new styles have been applied to all your web pages. Let’s go a step (or two) further.
Tip: What’s Going on? Nothing’s Changed!
If you try refreshing your browser’s view of a page and nothing appears to change, first check that you saved the changes you made to the CSS file. If you have saved the altered file, check that you typed the CSS exactly as described. If you did, you may be experiencing a caching problem with your browser.
Web browsers “cache” some content. Caching is when your browser accesses files previously saved to the hard drive when you visit a given web page, rather than downloading new files each time. For example, you enter the URL, and the browser pulls the page stored in its cache. This speeds up the process of displaying a web page that has been loaded before. Unfortunately, your cache can soon become out-of-date, and when that happens, the page you visit might not display the most recent data.
This happens most frequently with images, but it can also occur using CSS files. The good news is that you have control over your browser’s cache settings. Therefore, the amount of space the cache takes up on your hard disk before cached content is replaced with newer data can be adjusted. You can poke around your browser’s settings for terms like “Cache” or “Temporary Internet Files” to change these settings; however, most users opt to leave their caches to the default settings.
If you’re positive that you’ve made the necessary changes to your CSS file (and saved them) correctly, you may need to force-reload the CSS file in your browser.
To stop the caching problem and force the browser to retrieve the most up-to-date version of your CSS file, simply hold down the Shift key and click on the Refresh (or Reload) icon on your browser’s toolbar.
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Your First Year in Code