HTML Style Attribute

Used to apply inline styles to an element.
This style will be applied only for the particular tag used.
The style attribute takes a value in a set of CSS declarations, which consist of a property name and a value separated by a colon (;), and multiple declarations separated by semicolons.
Syntax: <tagname style="property:value;" > Content <tagname>

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Style attribute Example</title>
  </head>
  <body>
   <p style="background-color: red; color: white;">This is a styled p element</p>
   <p style="height:100px;width:50px;color:green;">This is also a styled p element</p>
  </body>
</html>

Let's get to know some of the styles used.


Font size (font-size)

Used to define the style of an element.
default font-size will vary depending on the tags or elements used.
we can declare the value of font-size in may ways.

  • px (pixels)
  • pt (points)
  • em (ems)
  • % (percentage)
  • vh (viewport height)
  • rem (root em)
  • ch (character width)
  • xh (x-height)

These formats are applicable to many styles.

Example

<!DOCTYPE html>
<html>
    <head>
        <title>Font-size Style Example</title>
    </head>
    <body>
        <p style="font-size: 1px;">Font-size in px</p>
        <p style="font-size: 1px;">Font-size in px</p>
        <p style="font-size: 1pt;">Font-size in pt</p>
        <p style="font-size: 1em;">Font-size in em</p>
        <p style="font-size: 1%;">Font-size in %</p>
        <p style="font-size: 1vh;">Font-size in vh</p>
        <p style="font-size: 1rem;">Font-size in rem</p>
    </body>
</html>

Text Color (color)

Used to set the color of an HTML element.
default text color for all elements is black.
we can declare the value of text color in may ways.

  • Color keywords values - green
  • Hexadecimal values - #00FF00
  • RGB values - rgb(0, 255, 0)
  • HEX values - 0x00FF00
  • HSL values - hsl(120, 100%, 50%)
  • RGBA values - rgba(0, 255, 0, 0.5)
  • HSLA values - hsla(120, 100%, 50%, 0.5)

Example

<!DOCTYPE html>
<html>
    <head>
        <title>Color Style Example</title>
    </head>
    <body>
        <p style="color: green;">this text color in Color keywords values</p>
        <p style="color: #00ff00;">this text color in Hexadecimal values</p>
        <p style="color: rgb(0, 255, 0);">this text color in RGB values</p>
        <p style="color: 0x00ff00;">this text color in HEX values</p>
        <p style="color: hsl(120, 100%, 50%);">this text color in HSL values</p>
        <p style="color: rgba(0, 255, 0, 0.5);">this text color in RGBA values</p>
        <p style="color: hsla(120, 100%, 50%, 0.5);">this text color in HSLA values</p>
    </body>
</html>

Background Color (background-color)

Used to set the background color of an HTML element.
default background color for all elements is white.
we can declare the value of background-color in may ways same as mentioned for color property.

Example

<!DOCTYPE html>
<html>
    <head>
        <title>Background Color Style Example</title>
    </head>
    <body style="backgound-color: orange;">
        <p style="background-color: green;">this text bacground color in Color keywords values</p>
        <p style="background-color: #00ff00;">this text bacground color in Hexadecimal values</p>
        <p style="background-color: rgb(0, 255, 0);">this text bacground color in RGB values</p>
        <p style="background-color: 0x00ff00;">this text bacground color in HEX values</p>
        <p style="background-color: hsl(120, 100%, 50%);">this text bacground color in HSL values</p>
        <p style="background-color: rgba(0, 255, 0, 0.5);">this text bacground color in RGBA values</p>
        <p style="background-color: hsla(120, 100%, 50%, 0.5);">this text bacground color in HSLA values</p>
    </body>
</html>

Fonts (font-family)

Used to set the font for an HTML element.
default font family for a HTML page will be sans-serif, serif, or monospace.
The are different fonts for the elements to style. some of them are listed below.

Example

<!DOCTYPE html>
<html>
    <head>
        <title>Font-family Style Example</title>
    </head>
    <body>
        <h1 style="font-family: verenda;">Headings with a font</h1>
        <p style="font-family: courier;">Paragraph with a font</p>
    </body>
</html>

Text Alignment (text-align)

Used to set the horizontal alignment of text within an HTML element.
Default alignment for all elements is left.
The values to set for the text-align property are

  • left (text aligns left)
  • right (text aligns right)
  • center (text aligns center)
  • justify (spread evenly across the width of the element, with the exception of the last line of each paragraph.)

Example

<!DOCTYPE html>
<html>
    <head>
        <title>Text-align Style Example</title>
    </head>
    <body>
        <h1 style="text-align: center;">This Heading is aligned at the center</h1>
        <p>This Paragraph is aligned at the left. it is default</p>
        <p style="text-align: right;">This Paragraph is aligned at the right</p>
        <p style="text-align: right;">This Paragraph is set justify.</p>
    </body>
</html>

Borders (border)

Used to define a visible boundary around an HTML element.
You can set the color, radius for borders also.

Example

<!DOCTYPE html>
<html>
    <head>
        <title>Border Style Example</title>
    </head>
    <body>
        <p style="border: 2px solid black;">Paragraph 1</p>
        <p style="border: 2px solid red;">Paragraph 2</p>
        <p style="border: 2px solid orange; border-radius: 10px;">Paragraph 3</p>
        <p style="border: 2px solid violet; width: 90%; border-radius: 30px;">Paragraph 4</p>
        <p style="border: 2px solid purple; width: 50%;">Paragraph 5</p>
    </body>
</html>

Margins (margin)

Used to create space around an HTML element.
There will be no default margin values for maximum of the HTML elements expect for some citiation elements.
The values to set for the margin property are

  • margin (gives margin for all sides)
  • margin-top (gives margin at the top)
  • margin-left (gives margin at the left)
  • margin-right (gives margin at the right)
  • margin-bottom (gives margin at the bottom)

Margin property itself has a set of values to define, they are

  • auto
  • length
  • percentage
  • inherit

Example

<!DOCTYPE html>
<html>
    <head>
        <title>Margin Style Example</title>
    </head>
    <body>
        <p style="margin: 12px;">Paragraph text with equal margins for all sides</p>
        <p style="margin-top: 12px;">Paragraph tezt with margin given at the top</p>
        <p style="margin-left: 12px;">Paragraph tezt with margin given at the left</p>
        <p style="margin-right: 12px;">Paragraph tezt with margin given at the right</p>
        <p style="margin-botom: 12px;">Paragraph tezt with margin given at the bottom</p>
    </body>
</html>

Note: To know about each styles and thier properties then start learning CSS course here.

Quick Recap - Topics Covered

HTML Styles
Font size (font-size)
Text Color (color) and Background Color (background-color)
Fonts (font-family) and Text Alignment (text-align)
Borders (border) and Margins (margin)

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now


Example js

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK