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.
The properties we are going to use are...
color determines the text's color
font-size determines the text's size
font-weight determines the text's weight
font-decoration determines what decoration to use on the text
font-family determines what font to use for the text
font-style determines which styling to use on the text
text-align determines the text's alignment
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
<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>
<span style="font-style:italic;"> I hope you like it. </span>
Here is what it will look like
This is my header
Hello and welcome to my web page. I hope you like it.