FamilySearch Wikitext Inline Styling: Difference between revisions
m (added category) |
(Changed "Rating" to "Content".) |
||
(2 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
====Inline styling==== | ====Inline styling==== | ||
< | <span>Lets look closely at the inline style code and break it down into pieces.</span> | ||
#Space after the p. | #Space after the p. | ||
#Next the word "style" | #Next the word "style" | ||
Line 9: | Line 9: | ||
#What change you want to make for the <font color="red">property</font color> or what <font color="red">value</font color> you want the property to now have. In this case change the font to "times new roman." | #What change you want to make for the <font color="red">property</font color> or what <font color="red">value</font color> you want the property to now have. In this case change the font to "times new roman." | ||
#Add another quotation mark ". You cannot leave out any of the quotation marks. The coding will not process if any of them are missing. | #Add another quotation mark ". You cannot leave out any of the quotation marks. The coding will not process if any of them are missing. | ||
< | <span>Study the coding again and impress it in your minds. You will be using it over and over again.</span> | ||
<p <font color="red"><nowiki>style="font-family:times new roman"</nowiki></font color>> | <p <font color="red"><nowiki>style="font-family:times new roman"</nowiki></font color>> | ||
< | <span><i>The number of attributes you can put into a tag is unlimited.</i></span> | ||
{| | {| | ||
Line 27: | Line 27: | ||
*<font color="red">Attributes</font> are made up of two parts: '''<font color="red">property</font>''' and '''<font color="red">value</font>''' separated by a colon. | *<font color="red">Attributes</font> are made up of two parts: '''<font color="red">property</font>''' and '''<font color="red">value</font>''' separated by a colon. | ||
{{Block indent|1=<font color="red">property:value</font>|2=2}} | |||
*<font color="red">Property</font> gives the name of the <font color="red">attribute</font> we want to install. | *<font color="red">Property</font> gives the name of the <font color="red">attribute</font> we want to install. | ||
Line 34: | Line 34: | ||
To perhaps to make the concept of attributes with their properties and values more clear, let's use more familiar terms. To describe a person we might state their physical attributes in the property:value form like so: | To perhaps to make the concept of attributes with their properties and values more clear, let's use more familiar terms. To describe a person we might state their physical attributes in the property:value form like so: | ||
{{Block indent|1=<font color="red">eyecolor:blue</font> or <font color="red">hair:none</font> or <font color="red">height:six feet</font>|2=2}} | |||
If these three attributes were put in a <font color="green"><nowiki><description></nowiki></font> tag our element would look like this: | If these three attributes were put in a <font color="green"><nowiki><description></nowiki></font> tag our element would look like this: | ||
{{Block indent|1=<font color="green"><nowiki><description</nowiki></font> <font color="blue">style=</font><font color="red">"eyecolor:blue; hair:none; height:six feet"</font><font color="green">></description></font>|2=2}} | |||
*Referring back to the border we created for our table, notice that the <font color="red">value</font> in our border attribute has three parts: | *Referring back to the border we created for our table, notice that the <font color="red">value</font> in our border attribute has three parts: | ||
{{Block indent|1=*<font color="red">1px</font> this tells the thickness of the line. |2=1}} | |||
{{Block indent|1=*<font color="red">solid</font> this tells the character of the line. It could be dashed, dotted, doubled, etc. |2=1}} | |||
{{Block indent|1=*<font color="red">black</font> this tells the color of the border. |2=1}} | |||
{{Block indent|*There is no punctuation between these values, only spaces.}} | |||
---- | ---- | ||
[[Category: | [[Category:Lesson Archives]] |
Latest revision as of 12:52, 19 August 2025
Inline styling
Lets look closely at the inline style code and break it down into pieces.
- Space after the p.
- Next the word "style"
- Followed by an equal sign =.
- Then a quotation mark ".
- The item to be changed or property. In this case "font-family."
- A colon :.
- What change you want to make for the property or what value you want the property to now have. In this case change the font to "times new roman."
- Add another quotation mark ". You cannot leave out any of the quotation marks. 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. <p style="font-family:times new roman"> The number of attributes you can put into a tag is unlimited.
Attributes
Let's take a minute to explain attributes.
- Attributes give character to elements.
- If we want to change how an element looks on the page, we install an attribute.
- Attributes are made up of two parts: property and value separated by a colon.
- Property gives the name of the attribute we want to install.
- Value states what the attribute will look like such as bold, large, color, etc.
To perhaps to make the concept of attributes with their properties and values more clear, let's use more familiar terms. To describe a person we might state their physical attributes in the property:value form like so:
If these three attributes were put in a <description> tag our element would look like this:
- Referring back to the border we created for our table, notice that the value in our border attribute has three parts: