Help:Wiki University HTML-- Changing Fonts

From FamilySearch Wiki
Jump to: navigation, search
MAIN PAGE
WIKI
WIKITEXT
HTML/CSS
FAMILY HISTORY CENTERS
VISUAL EDITOR

Lessons


Flexbox/CSS Grid

Additional Helps

Fonts-1.jpg
  • To change the font, we add the following inline style code between the

    in the opening paragraph tag:

<p style="font-family:times new roman"></p>

We will change the default font to times new roman[1] text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Inline styling

Inline style.jpg

Lets look closely at the inline style code and break it down into pieces.


<p style="font-family:times new roman"></p>

  1. Space after the <p.
  2. Next the word style.
  3. Followed by an equal sign =.
  4. Then a quotation mark ".
  5. The item to be changed or property: in this case font-family.
  6. A colon : .
  7. The change we want to make to the property or what value we want to give to the property. In this case we want to change the default font to times new roman.
  8. Add another quotation mark " followed by an angle bracket >.
  • You cannot leave out any of the quotation marks or angle brackets. The coding will not process if any of them are missing.
  • Study the coding again and impress it in your minds. You will be using it over and over again.

style="font-family:times new roman"

Tip Post it Pin.png Be sure all these symbols and parts of the coding are present. Your code will not execute even if one itty bitty, little symbol is missing. There is no forgiveness in this life or the next for a computer! They do not read minds and only process what they see. Leaving out a colon, a quotation mark, etc will cause the browser to give you who knows what.

Attributes

Attributes.jpg
  • The combination of property - value is referred to as an attribute.
  • Let's use more familiar terms to perhaps make the concept of attributes with their properties and values more clear.
  • To describe a person we might state their physical attributes in the property:value form:

eyecolor:blue or hair:none or height:six feet

If any of these three attributes were put in a <p> tag, the coding would look like this:

  • <p style="eyecolor:blue">
  • <p style="hair:none">
  • <p style="height:six feet">

Html7.jpg

We will be referring to the combination of property and value as attributes from now on.


TRY THESE OUT . . . . .

Tests.gif
Exercises
  • Take our Lorem ipsum paragraph and change the default font to a font that is listed in your word processing program.
  • Try a couple of other fonts as well.


Quick Quiz
  • How many attributes can you put in the paragraph tag?
A. No more than 5
B. No more than 8
C. No more than 20
D. None of the above
  • What symbol do you use to separate a property from a value?
A. Colon
B. Semi-colon
C. Comma
D. All of the above
  1. "Times new roman" font is a popular font used in books and magazines. You can, however, use any font you want. Check your word processing program if you would like other fonts to select from. It will have a list of fonts, most if not all, you can use in FamilySearch Wiki.

Navigation menu