Browsers come with default settings for normal text and for headings. But you will certainly want to use something different on your pages from time to time.
Unfortunately, with old HTML methods you must make the changes to each spot yourself. But with CSS you can use styles to change all tags of a particular type to a different font and style at once. Plus you can create special styles to use in special places. That's why CSS is worth using!
font-family, font-size (xx-large), color, text-shadow (a CSS3 feature)
font-family, color, font-variant (small caps), width, background-color, text-align (center in width)
font-family, font-size (x-small), color, font-weight (bolder), font-style (italic), text-align (center)
font-family (downloaded Tangerine), font-size (x-large),color, text-align (right)
Downloadable Fonts: The fourth example above downloads a free font (IF you are online!) that probably is not on your computer. It's from Google Fonts. (See the screenshots below for how different browsers display this.) Google does part of the coding for you. Complete directions for Google Fonts You just have to add one LINK line and then create a style that uses the font. Google does the heavy lifting. It detects which browser you are using and sends the font in a file format that your browser can use. This process uses the @font-face feature of CSS to tell the browser where to go online to find the font.
Unfortunately, some browsers/versions do not understand @font-face. Some will only accept certain font file formats, which makes it harder to use the @font-face method on your own. There are many ways for things to go wrong! That's why you should include several fonts in a font-family and not just one font, even when you are providing the font!
You really, truly don't know what your viewer will see.
Here are screenshots of how the three major browsers showed the four examples of formatted text above on the same computer. (You can open it separately.) The page does not look quite the same in all browsers. Glitches occurred which I cannot explain.
The windows were sized to be the same width for the screen shots below. The first three formatting examples use fonts that should be on a recent Windows PC - Arial Black, Arial, and Verdana. The fourth example uses Tangerine, a Google Web Font that should download automatically.
What differences do you see? Note that IE 9 and earlier will not render the text-shadow.
In Example 1: Firefox did not use the first font in the font-family list, Arial Black, but used the next one Calibri. This is a glitch. Arial Black was on the computer because the other two browsers used it! On another computer, Firefox correctly used Arial Black. Firefox seems to ignore fonts that have names with more than one word, even when the names are correctly typed between quote marks. There are more ways for things to go wrong than my poor brain can hold!
Different fonts cause other differences
In Example 2: The colored background is a slightly different height in each browser. This is related to the difference in font height and line spacing. Each browser apparently handles 'small caps' a little differently.
There is a LONG list of CSS properties and CSS3 has a lot of new features. But many of those features are not yet supported by any browsers. Some features have an equivalent feature that is specific to that browser. So you can use those features only if you include the special codes for each browser. Oh, for an agreement among the browsers!
Example of special property codes: BORDER-IMAGE property
Creating a border using an image is defined in CSS3 but it took a while for the major browsers to accept the CSS3 coding. IE did not support the border-image property at all until IE11. Chrome, Firefox, Safari, and Opera supported it with their own interpretations at first but now support the CSS3 coding. Wonder why they found that easier than doing it the CSS3 way to start with?
Example of coding for individual browsers:
Interactive example at W3Schools.com
New CSS3 Properties: Visit W3Schools for a complete list of which browsers support which features. The version number listed is the first one that supports the property.
At the left on that page is a
complete list of CSS properties. Some items expand to show variations. The
pages on the W3Schools.com site are a great reference source about HTML, HTML5,
When you want to use your styles on more than one sheet, you can put them all in an external style sheet. Hector's site does not need such an external style sheet yet. It only has one page! But we need to plan for the future.
Remember that a CSS file does not need the code that an HTML page needs. No DOCTYPE or HTML or HEAD or BODY tags. Just a simple statement of the various styles.
Step-by-Step: Format Text
|What you will learn:|| to center an image on the page
to create an external style sheet
to style H2 - font-family, color, text-align
to style H3 - font-family, color
to style H4, P, and create a class
to make text bold and italic
to use a downloadable font
Start with: , hector 19-Lastname-Firstname.htm, resource files
You will be making some changes to make Hector's page more appealing and colorful. By changing the title to use just the text graphic of Hector's signature, the top of the page will look cleaner. Then you will change the font, size, and color of the headings.
If necessary, open hector19-Lastname-Firstname.htm in your text editor.
Save as hector20-Lastname-Firstname.htm.
Switch to your browser and view the page.
The signature image is still there, floating at the right, but the H1 text is gone.
To center an image, you need to center its container, often a P or DIV tag. But first you need to remove some styling you added earlier.
If you wanted all H1 headings to be centered, you would create a declaration in an external style sheet for that.
About the cascade: The style that floats the image would override any alignment from any other styles. So the floating has tobe removed so that the paragraph alignment will center the image.
You are going to move the current internal styles to a separate external style sheet.
Save as hchavez-Lastname-Firstname.css to the same folder on your Class disk as the various versions of Hector's page. Change the Lastname-Firstname part to your own name, of course.
An external style sheet does NOT have a BODY tag or an HTML tag or a HEAD section. Adding extra parts will usually keep the style sheet from being used.
It is a common design practice to use a sans-serif font for headings and a serif font for text, or the other way around. You will find different recommendations about which type is best for body text and for headings. The current recommendations lean toward using sans-serif fonts for quantities of text on screen but to use serif fonts for printed material. Your browser defaults probably do not follow this recommendation!
Arial and Calibri are sans-serif fonts. The letters in these fonts do not have the little extra pieces like Times New Roman and Georgia use, which are serif fonts.
The browser default style for an H2 heading is usually larger and bolder than regular text. You will add some formatting to that using an external style sheet.
Switch to your browser and view hector20-Lastname-Firstname.htm
Nothing has changed! Whoops. You have to add a LINK to the HEAD of the page.
Switch to the editor window that shows hector20-Lastname-Firstname.htm.
Delete the STYLE section since you moved it to the external style sheet.
Browsers have default settings for the headings - H1, H2, H3, H4, H5, H6. They are sized relative to the default browser text size. When you format the headings, these default sizes still apply unless you apply a particular font size.
Add a style for H3 with the same color and font-family that
you used for H2.
Do not center this element.
Switch to your browser and Refresh.
The subheadings under My Hobbies are in term/description form. That's not what those tags are really for. We used them just to illustrate one of the types of list. What we really need is a couple of styles that will create a new look.
Edit the list under My Hobbies so that the subtitles, like Travel and Fishing are H4 tags.
Remove the <dl> and </dl> tags.
Change the DT tags to H4.
Don't forget to edit both the opening and the closing tags! <dt> becomes <h4> and </dt> becomes </h4>.
Similarly, change the DD tags to P.
Switch to your browser and Refresh.
The subtitles are shown as bold, using the default font.
Add a new style for H4 tags that sets the font-family to 'Trebuchet MS', Arial, sans-serif and the font size to large.
Add a new class named hobby which sets the right margin at 100px and justifies the text.
Switch to your text editor to edit hector20-Lastname-Firstname.htm.
Edit the P tags in the Hobbies list to use the new class, hobby.
Switch to your browser and Refresh.
You may need to make the window narrower to see the effect of using the class 'hobby'.
Most browsers will render the logical tags
<em> the same as the tags
bold and italic. But text readers use vocal emphasis for STRONG and EM but
may not for B and I tagged text.
[Remember that your code may wrap differently in your editor and your page may wrap differently in your browser.]
In the section My Job, find the name of the newsletter, Here and There.
CSS3 has a new feature, @font-face, which allows the browser to download a font to use on the page. BUT, you must have permission from the copyright holder of the font to share the font in this way. Most of the fonts on your computer came with programs that you or your school or company paid for. That gave you the right to use those fonts in those programs. It did not give you the right to give those fonts away over the Internet.
Google Web Fonts and several other sites offer free fonts. You could use a free font for special effects on your web pages but to make sure your viewers see that special font, you must upload it to your web space and then use the @font-face feature to send out the font from your web server.
Instead, for this topic, you will use Google Web Fonts. That way we won't have to worry about whether you have a place to upload a font!
Be careful to include back-up fonts in your font-family in case something goes wrong and the viewer's browser does not get to use your special font. Glitches in the process seem to be common!
Click this link Google Web Fonts to open the site in your browser.
Type Comments & Suggestions in place of whatever text shows in the first example.
This is the text that you will format with a font from this site. The default text may not show the ampersand, which is important in this heading.
Click the button Apply to All.
Scroll through several fonts and see the
inventiveness of font designers.
How many different shapes for an ampersand did you see?
Do you find it hard to pick out favorites?
Suggestion: Use your mouse scroll wheel, if you have one, to scroll the previews.
It can take a LONG time to view all of the fonts. There were 804 when I took the screen shot.[June 2016]
Tips: You can search for a name, if you already know one. Or, choose a category or another feature to shorten the list.
Now you will use one of these lovely fonts! It takes two steps. You will have to add a LINK tag to
the HEAD and then create a style that uses the font.
In the Search box, type swash.
The previews automatically change to show only fonts with 'Swash' in the name.
Berkshire Swash has a nice look with a fancy ampersand, &.
No Berkshire Swash found
Solution: Are the filters off? If not, Clear Filters.
If they are, use another font with an interesting look. Your instructor may have a preference.
In the preview for Berkshire Swash, click on Bershire Swash.
A page opens that displays all of the characters.
The directions for using this font appear.
Click on SELECT THIS FONT.
A popup at the bottom of the window shows that one font has been selected.
Switch to your text editor to the source code for Hector's page.
LINK code: In the HEAD section paste the code you
This code tells the browser where to go to find the font named Berkshire Swash.
Notice that there is a + where there would usually be a space in the font name. This is important!
The same code will work for any of Google's fonts if you change the font name.
Edit the H3 tag that contains the text
"Comments and Suggestions" to include an ampersand & instead of the word 'and'.
If you just type &, your browser might figure out what you meant or it might get very confused. It is not worth the risk! Always use HTML code for characters that are used in scripting!
The single quotes around the font names with spaces are very important, too!
Usually you want to choose similar fonts to list in the font-family. Britannic Bold is not much like Berkshire Swash. This time we want to be able to tell easily if the download process worked.
Switch to the browser and Refresh.
What do you see? Different browsers/versions may show different results!
IE: Used the downloaded the font at normal font weight instead of the Bold style that is part of the default H3 definition. Versions of Internet Explorer before IE11 fail to download the font.
Chrome: Used the downloaded font at normal font weight
Firefox: Using downloaded font at Bold font weight from H3 default style.
Perhaps we should have included a font-weight property to override the default H3 styling. <sigh>