Home Logo
Show Full Menu
Hide Full Menu

Understanding text styles

Created: 16/09/10 Views: 1307 myFave Image

In this tutorial we will learn how to style text using the style attribute
The way we are going to style our text is to use the style attribute inside of our tags. The style attribute allows us the write certain styling rules for the contents inside of that specific tag which then the browsers reads when the web page is opened and that's what gets us different fonts, sizes, colors, weights etc etc.

When styling text it can be very useful to use the <span> </span> tags, it allows you to separate sections of the text and style them separately. If you use <span> </span> tags without writing any style properties then the text will not change.

Here is an example of how the style attribute is written
  • <!-- This shows a single style property -->
  • <span style="font-weight:bold;" > Text goes here </span>

  • <!-- This shows multiple style properties -->
  • <span style="color:#000000; font-weight:600; font-size:16px;" > Text goes here </span>

As you can tell from the above example, the way to write the style attribute is style=" " and then all the properties are written inside the quotation marks.
Then each style property is followed by a colon(:) which separates the property from the property's value.
Then after the property and its value have been written it is followed by a semi-colon(;) which separates the different properties.

Here is an example of styled text coding
  • <div style="font-family:Arial;">
  • <h1 style="text-align:center; color:#333333; text-decoration:underline;">This is my header</h1>
  • <span style="font-weight:bold; font-size:17px;"> Hello and welcome to my web page. </span>
  • <br />
  • <span style="font-style:italic;"> I hope you like it. </span>
  • </div>

Here is what it will look like

This is my header

Hello and welcome to my web page.
I hope you like it.

next tutorial: Understanding hyperlinks (links)

There are no comments