HTML Styles

❮ Prev Next ❯

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

The HTML Style Attribute

The style attribute is used to apply inline styles to an HTML element. Inline styles are styles that are applied directly to an element, rather than being defined in a separate CSS file.

The style attribute can be used to control a wide range of style properties, such as font size, color, background color, and more. 

<tagname style="property:value;">Content to be here</tagname>

The property is a CSS properties like: color . The value is a CSS values like: red.

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>Here is an example of how to use the style attribute:</p>
        <h1 style="color:blue;">This is a heading of blue text.</h1>
        <p style="color:orange;">This is a paragraph of blue text.</p>
      </body>
  </html>

In the above example, we have used the style attribute to set the color of the text inside the tag to blue. The style attribute is followed by a set of CSS rules, enclosed in quotation marks. In this case, we have used the color property to set the text color to blue.

Setting font size 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>Setting font size</h1>
        <p style="font-size:24px;">This is a paragraph with font size of 24 pixels.</p>
      </body>
  </html>

In this example, we have used the style attribute to set the font size of the <p> tag to 24 pixels. The font-size property controls the size of the text, and can be specified in pixels, ems or other units.

Setting background color 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>Setting background color</h1>
        <p style="background-color:green;">This is a p tag with a green background color.</p>
      </body>
  </html>

In this example, we have used the style attribute to set the background color of a <p> tag to a light gray color. The background-color property controls the color of the background of an element, and can be specified using a color name, a hex code, or an RGB value.

Setting text alignment 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>Setting text alignment</h1>
        <p style="text-align:center;">This is a p tag with a green background color.</p>
      </body>
  </html>

In this example, we have used the style attribute to center the text inside a <p> tag. The text-align property controls the horizontal alignment of text within an element, and can be set to left, right, center, or justify.

Setting font family 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>Setting font family</h1>
        <p style="font-family: Arial, sans-serif;">This is a paragraph of text in the Arial font.</p>
      </body>
  </html>

In this example, we have used the style attribute to set the font family of a <p> tag to Arial, followed by a fallback font of sans-serif. The font-family property specifies the font family to be used for an element's text, and can take multiple values in case the desired font is not available on the user's computer.

Setting font size and weight 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>Setting font size and weight</h1>
        <p style="font-size: 36px; font-weight: bold;">This is a heading with a font size of 36 pixels and bold text.</p>
      </body>
  </html>

In this example, we have used the style attribute to set the font size of a <p> tag to 36 pixels, and the font weight to bold. The font-size property specifies the size of the font, while the font-weight property specifies the thickness of the font.

Setting text decoration 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>Setting text decoration</h1>
        <p style="text-decoration: underline;">This is a paragraph of underlined text.</p>
      </body>
  </html>

In this example, we have used the style attribute to underline the text inside a <p> tag. The text-decoration property can be used to add a variety of text decorations, such as underline, overline, line-through, or none

After you have learn about how to start styling your page add more color and position element, lets learn how to Formatting your page in the next chapter.

❮ Prev Next ❯