Difference between revisions of "Help:Wiki University HTML-- Sizing Fonts"

From FamilySearch Wiki
Jump to: navigation, search
m
m
Line 25: Line 25:
 
*Use this coding in the opening header tag to enlarge the font in a header:
 
*Use this coding in the opening header tag to enlarge the font in a header:
 
<div style="border:2px solid crimson; background-color:moccasin;  
 
<div style="border:2px solid crimson; background-color:moccasin;  
padding:10px; width:100%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><h1</nowiki></font color><nowiki> style="</nowiki><font color="blue">font-size:</font color><font color="red">20pt</font color>">Enlarging Headers<font color="red"><nowiki></h1></nowiki></font color></div><br>
+
padding:10px; width:100%; font-size:10px; font-family:Courier New"><font color="red"><nowiki><h1</nowiki></font color><nowiki> style="</nowiki><font color="blue">font-size:</font color><font color="red">20px</font color>">Enlarging Headers<font color="red"><nowiki></h1></nowiki></font color></div><br>
  
 
{|
 
{|
Line 39: Line 39:
 
<!--Exercises -------------------------------------------------------------->
 
<!--Exercises -------------------------------------------------------------->
 
<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; ">
 
<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; ">
<div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises</div>
+
<div style="font-size:14px; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises</div>
 
<div style="padding-top:12px; padding-left:10px; ">
 
<div style="padding-top:12px; padding-left:10px; ">
*Enlarge the lorem ipsum paragraph to 20pt.
+
*Enlarge the lorem ipsum paragraph to 20px.
*Enlarge a header to 36pt.
+
*Enlarge a header to 36px.
  
 
</div>
 
</div>
Line 53: Line 53:
  
 
<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; ">
 
<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; ">
<div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgray; ">Quick Quiz</div>
+
<div style="font-size:14px; width:100%; height:30px; vertical-align:middle; background-color:lightgray; ">Quick Quiz</div>
 
<div style="padding-top:12px; padding-left:10px; ">
 
<div style="padding-top:12px; padding-left:10px; ">
 
*You cannot enlarge headers
 
*You cannot enlarge headers

Revision as of 17:47, 18 January 2018

MAIN PAGE
WIKI
WIKI MISSIONARY
WIKITEXT
HTML/CSS
FAMILY HISTORY CENTERS
VISUAL EDITOR

Lessons

  1. HOME
  2. Introduction
  3. Headers
  4. Lists
  5. Nesting Lists
  6. Comments
  7. Paragraphs
  8. Fonts - Changing
  9. Font Size
  10. Font Colors
  11. Font Bold-Italics
  12. Padding
  13. Margins
  14. Borders
  15. Width and Height
  16. Alignment
  17. Tables
  18. Tables - Borders
  19. Tables - Widths
  20. Tables - Captions
  21. Tables - Col Labels
  22. Tables - Cells
  23. Tables - Rows
  24. Tables - Placement
  25. Tables - Sorting
  26. Tables - Scrolling
  27. Tables - Col Only
  28. Tables - Col Spans
  29. Tables - Row Spans
  30. Infobox - Creating
  31. Infobox - Placing
  32. Infobox - If function
  33. Sidebars
  34. Navboxes
  35. Position - Relative
  36. Position - Absolute
  37. Misc

Flexbox/CSS Grid

  1. Flexbox Training

Additional Helps


ENLARGING FONTS

Large font.png

Normal size of the default font is about 14px or 14 pixels. Let's say we want to increase the font to 20 pixels. To make the font larger you insert the attribute font-size:20px in the paragraph tag coding:

<p style="font-size:16px">

Here is the paragraph with the enlarged font:

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.


ENLARGING HEADERS

  • Not only can you enlarge the font in paragraphs, but you can enlarge the font in the headers as well.
  • Use this coding in the opening header tag to enlarge the font in a header:
<h1 style="font-size:20px">Enlarging Headers</h1>

Html7.jpg

When you use the "header tag" <h1> instead of equal signs =, you lose the little edit box to the right of the header. This is sometimes desirable as these little edit boxes can get in the way of other things.


TRY THESE OUT . . . . .

Exercises
  • Enlarge the lorem ipsum paragraph to 20px.
  • Enlarge a header to 36px.


Quick Quiz
  • You cannot enlarge headers
A. True
B. False
  • You can add the "font-size" attribute between the = sign and the words of the header
A. True
B. False