The HTML style attribute is a powerful tool that allows web developers to add visual appeal and customization to their elements. With this attribute, you can effortlessly enhance the appearance of your website by adding styles like color, font, size, and more.
By utilizing the style attribute, you have the flexibility to create a visually stunning and engaging user experience that captures attention and leaves a lasting impression on your visitors. Whether you want to make text standout with vibrant colors or create a visually appealing layout with custom fonts and sizes, the HTML style attribute empowers you to bring your creative vision to life.
We have previously worked on displaying the list of days in a week in an ordered format. Now, we will apply styles to these elements.
To make things simpler, you can click the button below to open the playground, which comes with pre-filled HTML.
In the editor, you will see HTML, CSS, and JS input on the left/top, and the output on the right/bottom. We only need the HTML editor, so feel free to minimize the other two if you want.
HTML Style Attribute Syntax
Below is the syntax for adding styles to HTML elements:
<tagname style="attribute:value;">- tagname: This is the start tag. The style is only added within the start tag/element. e.g. <h1>, <li>
- style: This is a keyword; it is a constant.
- attribute and value: An attribute is a property that you want to add to an element, and the value is the value of that property.
Text Color
The CSS color property is used to define the text color of an HTML element.
To display the heading in blue color, add the property "color" with a value of "blue" to the <h1> tag.
<h1 style="color:blue;"> Days of Week </h1>
Now, you should be able to see the heading ("Days of Week") in the blue color.
Background Color
The CSS `background-color` property is used to specify the background color of an HTML element.
To display the ordered list (ol) with a light-blue background, add the CSS property "background-color" with a value of "lightblue" to the <ol> tag.
<ol style="background-color:lightblue">Now, you should be able to see the ordered list with a light-blue background.
Text Alignment
The CSS `text-align` property is used to define the horizontal alignment of text within an HTML element.
To display the heading text in center, add the property "text-align" with a value of "center" to the <h1> tag.
Points to remember: You can concatenate multiple attributes, meaning that elements can have more than one property.
<h1 style="color:blue;text-align:center;"> Days of Week </h1> Now, you should be able to see the heading ("Days of Week") in the center.
Font Family
The CSS `font-family` property is used to specify the font that should be applied to an HTML element.
Add the property "font-family" with a value of "courier" to the <ol> tag.
<ol style="background-color:lightblue; font-family:courier;">Note: CSS properties are inherited by their child elements.
Font Size
The CSS `font-size` property is used to define the size of text for an HTML element.
Add the property "font-size" with a value of "14px" to the <li> tag.
<li style="font-size:14px" >Wednesday </li>Now, you should be able to see "Wednesday" slightly smaller than the other list elements.
Output
Want to practice more? Click here for more hands-on exercise.
References: