HTML Styles

In HTML, the style attribute is used to apply inline styles to an element. The style attribute can contain any CSS property, and the value can be specified in one of several ways:

<tagname style="property: value;">

For example, you can use the style attribute to set the font-size of a paragraph element like this:

<p style="font-size: 20px;">This text is 20 pixels in size.</p>

You can also set multiple style properties by separating them with a semicolon:

<p style="font-size: 20px; color: blue;">This text is blue and 20 pixels in size.</p>

It's generally a better practice to use external stylesheets to define styles for an entire website or application, rather than using the style attribute on individual elements. This makes it easier to maintain and update the styles in your project.

Background-color

To set the background color of an element using the style attribute, you can use the background-color property.

Here is an example of how you can set the background color of a div element:

<div style="background-color: red;">
This div has a red background.
</div>

You can also specify the background color using a hex code, a color name, or a RGB value:

<div style="background-color: #ff0000;">
This div has a red background (hex code).
</div>
<div style="background-color: rgb(255, 0, 0);">
This div has a red background (RGB value).
</div>
<div style="background-color: blue;">
This div has a blue background (color name).
</div>

Color

To set the text color of an element using the style attribute, you can use the color property.

Here is an example of how you can set the text color of a <p> element:

<p style="color: red;">This text is red.</p>

You can also specify the text color using a hex code, a color name, or a RGB value:

<p style="color: #ff0000;">This text is red (hex code).</p>

<p style="color: rgb(255, 0, 0);">This text is red (RGB value).</p>

<p style="color: blue;">This text is blue (color name).</p>

Font-family

To set the font family of an element using the style attribute, you can use the font-family property.

Here is an example of how you can set the font family of a <p> element:

<p style="font-family: Arial;">This text is in Arial.</p>

You can also specify a list of fonts to use, in case the first choice is not available on the user's device:

<p style="font-family: Arial, sans-serif;">This text is in Arial (or a sans-serif font if Arial is not available).</p>

It's generally a good idea to include a generic font family as a fallback, in case none of the specific fonts you specify are available on the user's device.

Some common generic font families include:

  • sans-serif
  • serif
  • monospace
  • cursive
  • fantasy

Font-size

To set the font size of an element using the style attribute, you can use the font-size property.

Here is an example of how you can set the font size of a <p> element:

<p style="font-size: 20px;">This text is 20 pixels in size.</p>

You can also use other units of measurement, such as em or %, to specify the font size:

<p style="font-size: 2em;">This text is 2 times the size of the parent element's font.</p>

<p style="font-size: 150%;">This text is 1.5 times the size of the parent element's font.</p>

Text-align

To set the text alignment of an element using the style attribute, you can use the text-align property.

Here is an example of how you can set the text-alignment of a <p> element:

<p style="text-align: center;">This text is centered.</p>

You can set the text alignment to left, right, or justify as well:

<p style="text-align: left;">This text is aligned to the left.</p>

<p style="text-align: right;">This text is aligned to the right.</p>

<p style="text-align: justify;">This text is justified.</p>

HTML Basics