FamilySearch Wikitext Inline Styling

Inline styling

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

  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. 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."
  8. 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.

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, tinie wheenie little item is missing. There is no forgiveness in this life or the next one to a computer! They do not read minds and only process what they see. Leaving out a colon, a quotation mark, a semi-colon or misspelling a word will cause the computer to give you who knows what. This will probably be the biggest problem you'll face in programming, that is, leaving out some small item and having great deal of trouble trying find it.

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:value
  • 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:

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

If these three attributes were put in a <description> tag our element would look like this:

<description style="eyecolor:blue; hair:none; height:six feet"></description>
  • Referring back to the border we created for our table, notice that the value in our border attribute has three parts:
  • 1px this tells the thickness of the line.
  • solid this tells the character of the line. It could be dashed, dotted, doubled, etc.
  • black this tells the color of the border.
  • There is no punctuation between these values, only spaces.