====== Web Development Lesson 2 - Text ====== ===== Attributes ===== ==== Objectives ==== In this exercise you'll learn how to use HTML attributes to modify the style of specific elements. ==== Setup ==== Continue using jsfiddle with the same code from the previous screen. Here it is again.

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

* Some basic formatting can be done using html tags - we've seen

, 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. ==== Colour ==== * As an example, let's make the words 'pet dog' red by adding style="color:red" inside the tag as follows.

My friend Pablo has a pet dog called Sam who likes to have his tummy scratched. When they go to the park, he likes to chase a ball. He rolls in the dirt so Pablo has to wash him when they get home.

* 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. ==== Tag: Span ==== * We can select a section of text to style by using . Let's make the text 'wagging his tail' blue. On Sundays they drive to the ^mountains where he runs around smelling the grass and wagging his tail. He gets so tired that he sleeps all the way home. * Run the code to see whether you did it correctly. ==== Rule: Multiple Parameters ==== * You can change two styles at the same time by separating them with a ; as follows. pet dog * 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. ==== Indent ==== * We can indent the first line of a paragraph with text-indent. On Sundays they drive to the ^mountains where he runs around smelling the grass and wagging his tail. He gets so tired that he sleeps all the way home. ==== Alignment ==== * 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. My friend Pablo has a pet dog called Sam who likes to have his tummy scratched. When they go to the park, he likes to chase a ball. He rolls in the dirt so Pablo has to wash him when they get home. * There are many other style attributes, but most are more commonly applied to headings. [[en:web_development:text:headings|Next: Headings]]