Help:Wiki University HTML-- Multi-attributes

From FamilySearch Wiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Lessons


Flexbox/CSS Grid

Additional Helps


BOLD & ITALICIZED SENTENCES

We can apply more than one attribute to a single item. To do so, we separate attributes with semi-colons as shown below. Here we are installing both bold and italicized coding to our Lorem ipsum sentence.

<p style="font-weight:bold; font-style:italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  • NOTICE again the semi-colon separating the two attributes. How many attributes can you apply to an individual bit of coding? As many as you want. There is no limit.

Our Lorem ipsum now looks like this with its two attributes:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

HTML Wikitext

<p style="font-weight:bold; font-style:italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

''''Lorem ipsum dolor sit amet, consectetur adipiscing elit.''''

MORE ON APPLYING MULTIPLE ATTRIBUTES

Here is more examples of applying more than one attribute keeping in mind that they are always separated by semi-colons:

  • Here we are going to change the font, font-size and color of the text.
<p style="font-family:times new roman; font-size:18px; color:blue">

  • NOTICE again that the semi-colon that separates the attributes.

This is what our paragraph will look like with all three attributes:

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.

Sometimes it is helpful to place the attributes on separate lines. This can make following your code a bit easier

<p style="
font-family:times new roman;
font-size:18px;
color:blue">
</p>

Html7.jpg

Just keep in mind; the number of attributes you can install in a tag is unlimited but they always have to separated by a semi-colon.


TRY THESE OUT . . . . .

Tests.gif
Exercises
  • To make our lorem ipsum paragraph text red, the font-size 12 points and with arial font, what is the code?


Quick Quiz
  • Attributes are separated with?
A. Comma
B. Colon
C. Semi-colon
D. None of the above
  • How many attributes can you put in the paragraph tag?
A. No more than 5
B. No more than 8
C. No more than 20
D. None of the above
  • How would you make a word italicized along with the three attribute changes to the paragraph?
A. Flank the word with two apostrophes
B. Flank the word with quotation marks.
C. All of the above