The Style Attribute

The style attribute can be applied to most HTML tags and comes with dozens of options—basically everything available in the CSS property catalog. This attribute is incredibly versatile. Some properties can be applied universally, while others are attribute specific.

First, you add the style attribute to an HTML tag in the same manner as other attributes. The difference is how you write the values that go inside the quotation marks.

<ul style="property: value;">
    <li></li>
    <li></li>
</ul>

CSS properties are always written in the same format. It starts with the name of the property you are changing. Then, add a colon (:), followed by the value you'd like to set to the property and then a semi-colon (;) after the value. The format of the value entered will vary depending on the property.

For example, the CSS property for changing a font's size will have a value of a number followed by a unit. But the property for setting a typeface will take on a value of the font's name or type. We'll elaborate on this over the next few pages. This is just to show you how some style attributes will look.

<p style="font-size: 20px;">Here is a paragraph 
with its font size set to 20 pixels.</p>

<p style="font-family:Arial, Verdana, sans-serif;">Here is a 
paragraph that will use a sans-serif font.</p>

More than likely, you'll be adding multiple properties to a style attribute. That is why the semicolon (;) is important. It tells the browser where one value ends and the next property begins. The example below has both properties from the previous examples applied to one paragraph.

<p style="font-size: 20px; font-family:Arial, Verdana, sans-serif;">Here is a 
paragraph with its font size set to 20 pixels and will use a sans-serif font.</p>

Question

What should you do if you want to target one sentence in a paragraph and not the entire paragraph?

In this case, you can utilize the <span> tag. The span tag can be placed around as much or as little text as you would like. It adopts the style attribute like other text elements.

<p>Here is a paragraph 
<span style="font-size:30px;">with some larger</span> text.</p>

Here is a paragraph with some larger text.

Using your own text editor or the coding space below, try adding a style tag to a paragraph tag. Change the font size and see what can happen! Next, implement a span-tag to a word or phrase in your p-tag and do the same. What happens if you have both? Which style takes priority?

So how do we apply style changes to an element?

Question

You Try!