FamilySearch HTML Backgrounds: Difference between revisions
m (Text replacement - "\<p(.*?)\>(.*?)\<\/p>" to "<span$1>$2</span>") |
(Changed "Rating" to "Content".) |
||
| Line 49: | Line 49: | ||
<div style="padding-top:12px; padding-left:10px; "> | <div style="padding-top:12px; padding-left:10px; "> | ||
*How to make text invisible on a page without erasing it. | *How to make text invisible on a page without erasing it. | ||
{{Block indent|A. Black text on a black background.}} | |||
{{Block indent|B. White text on a white background.}} | |||
{{Block indent|C. All of the above.}} | |||
</div> | </div> | ||
<div style="background-color:lightgray; width:100%; height:35px; padding-top:10px; "> | <div style="background-color:lightgray; width:100%; height:35px; padding-top:10px; "> | ||
Latest revision as of 12:52, 19 August 2025
Lessons
- HOME
- Introduction
- Headers
- Lists
- Nesting Lists
- Comments
- Paragraphs
- Fonts - Changing
- Font Size
- Font Colors
- Font Bold-Italics
- Padding
- Margins
- Borders
- Width and Height
- Alignment
- Tables
- Tables - Borders
- Tables - Widths
- Tables - Captions
- Tables - Col Labels
- Tables - Cells
- Tables - Rows
- Tables - Placement
- Tables - Sorting
- Tables - Scrolling
- Tables - Col Only
- Tables - Col Spans
- Tables - Row Spans
- Infobox - Creating
- Infobox - Placing
- Infobox - If function
- Sidebars
- Navboxes
- Position - Relative
- Position - Absolute
- Misc
Flexbox/CSS Grid
Additional Helps
Backgrounds[edit | edit source]
You have leaned how to change the font, size of the font, and the color of the font inside a paragraph. What if we only want to change the color of the background of a paragraph for emphasis?
Changing Backgrounds[edit | edit source]
- To change the background color we use the following attribute:
background-color:select a color
Let's take our lorem ipsum paragraph and change the background color to blue and the font to white. Here is the attribute coding:
<span style="background-color:blue; color:white">Lorem ipsum...</span>
- Here is the result:
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.
Again, here is the link to a list of colors accepted by all browsers: list.
TRY THESE OUT . . . . .
Exercises
- What is the coding to change the color of the background of the lorem ipsum paragraph to green and the text to orange?
- Create a paragraph of your favorite color for the background of the lorem ipsum paragraph and another color for the text from the list of colors.