mNo edit summary |
m (Text replacement - "\<p(.*?)\>(.*?)\<\/p>" to "<span$1>$2</span>") |
||
| (7 intermediate revisions by one other user not shown) | |||
| Line 4: | Line 4: | ||
<table style="width:100%; margin-bottom:-10px; "> | <table style="width:100%; margin-bottom:-10px; "> | ||
<tr><td> | <tr><td> | ||
<div style="font-size: | <div style="font-size:1.2em; font-family:arial">[[FamilySearch HTML Multi-attributes|<< Previous Chapter]] </div> | ||
</td> | </td> | ||
<td> | <td> | ||
<div style="font-size: | <div style="font-size:1.2em; font-family:arial; text-align:right">[[Help:Wiki University HTML-- Padding|Next Chapter >>]] </div> | ||
</td></tr> | </td></tr> | ||
</table> | </table> | ||
---- | |||
==Backgrounds== | ==Backgrounds== | ||
<p style="background-color:lightblue; padding:5px; ">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?</p> | <p style=" | ||
background-color:lightblue; | |||
padding:5px; | |||
">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?</p> | |||
==Changing Backgrounds== | ==Changing Backgrounds== | ||
| Line 19: | Line 22: | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"><font color="blue">background-color:</font><font color="red">select a color</font color></div> | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"><font color="blue">background-color:</font><font color="red">select a color</font color></div> | ||
<p>Let's take our lorem ipsum paragraph and change the background color to blue and the font to white. Here is the attribute coding:<br><br> | <p>Let's take our lorem ipsum paragraph and change the background color to blue and the font to white. Here is the attribute coding:<br><br> | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"><nowiki>< | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"><nowiki><span style="</nowiki><font color="blue">background-color:</font><font color="red">blue; </font><font color="blue">color:</font><font color="red">white</font color>">Lorem ipsum...<nowiki></span></nowiki></font color></div><br> | ||
*Here is the result: | *Here is the result: | ||
< | <span style="color:white; background-color:blue; ">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.</span> | ||
<span>Again, here is the link to a list of colors accepted by all browsers: [http://www.w3schools.com/html/html_colornames.asp list]. </span> | |||
= | <h2 style="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-5px; margin-top:-20px; padding:0px">TRY THESE OUT . . . . . </h2> | ||
[[File:Tests.gif|100px|right]] | [[File:Tests.gif|100px|right]] | ||
<!--Exercises --------------------------------------------------------------> | <!--Exercises --------------------------------------------------------------> | ||
| Line 58: | Line 61: | ||
<table style="width:100%; "> | <table style="width:100%; "> | ||
<tr><td> | <tr><td> | ||
<div style="font-size: | <div style="font-size:1.2em; font-family:arial">[[FamilySearch HTML Multi-attributes|<< Previous Chapter]] </div> | ||
</td> | </td> | ||
<td> | <td> | ||
<div style="font-size: | <div style="font-size:1.2em; font-family:arial; text-align:right">[[Help:Wiki University HTML-- Padding|Next Chapter >>]] </div> | ||
</td></tr> | </td></tr> | ||
</table> | </table> | ||
---- | |||
{{reflist}} | {{reflist}} | ||
</div> | </div> | ||
__NOTOC__ | __NOTOC__ | ||
[[Category:HTML Lessons]] | [[Category:HTML Lessons]] | ||
edits