Web Development Lesson 2 - Text

In this exercise you'll learn how to use HTML attributes to modify the style of specific elements.

Continue using jsfiddle with the same code from the previous screen. Here it is again.

My Story
<p>My friend Pablo has a <em>pet dog</em> called Sam who likes to have his tummy scratched. When they go to the park, <strong>he likes to chase a <em>ball</em>.</strong> He rolls in the dirt so Pablo has to wash him when they get home.</p>
<p>On Sundays they drive to the <sup>mountains</sup> where he runs around smelling the grass and wagging his tail. He gets so tired that he sleeps all the way home.</p>

• Some basic formatting can be done using html tags - we've seen <p>, em, strong and sup.
• More complex formatting is available using attributes. Attributes are parameter:value pairs inside tags, and they apply to everything between the tags.

• As an example, let's make the words 'pet dog' red by adding style="color:red" inside the <em> tag as follows.

<p>My friend Pablo has a <em style="color:red">pet dog</em> called Sam who likes to have his tummy scratched. When they go to the park, <strong>he likes to chase a <em>ball</em>.</strong> He rolls in the dirt so Pablo has to wash him when they get home.</p>

• Run the code to check the result.
• We are applying a style, hence style="".
• Inside the inverted commas is the specific style, designated by the parameter:value pair, where color is the parameter (the colour of the text) and red is the value we wish to use.
• Notice the : used to separate the parameter and the value.

• We can select a section of text to style by using <span>. Let's make the text 'wagging his tail' blue.

<p>On Sundays they drive to the <sup>mountains</sup> where he runs around smelling the grass and <span style="color:blue">wagging his tail</span>. He gets so tired that he sleeps all the way home.</p>

• Run the code to see whether you did it correctly.

• You can change two styles at the same time by separating them with a ; as follows.

<em style="color:red; font-weight:700;">pet dog</em>

• Now the red text should also be bold because it has a higher font-weight. 300 is very faint and 900 is very heavy.
• The ; marks the end of a single parameter:value pair so when the browser encounters more text inside the inverted commas, it knows to expect a new pair.

• We can indent the first line of a paragraph with text-indent.

<p style="text-indent:30px;">On Sundays they drive to the <sup>mountains</sup> where he runs around smelling the grass and wagging his tail. He gets so tired that he sleeps all the way home.</p>

• Let's try something different. Sometimes you'll want text at the right of the screen instead of the left. Let's move the first paragraph to the right.

<p style="text-align:right;">My friend Pablo has a <em style="color:red">pet dog</em> called Sam who likes to have his tummy scratched. When they go to the park, <strong>he likes to chase a <em>ball</em>.</strong> He rolls in the dirt so Pablo has to wash him when they get home.</p>

• There are many other style attributes, but most are more commonly applied to headings.

Next: Headings