HOME C C++ PYTHON JAVA HTML CSS JAVASCRIPT BOOTSTRAP JQUERY REACT PHP SQL AJAX JSON DATA SCIENCE AI

HTML Styles

"HTML Styles" isn't a single, specific element or code within HTML : These are styles defined directly within an HTML element using the style attribute. Add styles to an element, such as color, font, size, and more.

Example

    
<p style="color:red;">This is a Blue</p>
<p style="color:blue;">This is a Red</p>
<p style="font-size:50px;">This is a black</p>
You can click on above box to edit the code and run again.

Output

This is a Blue

This is a Red

This is a black

The HTML Style Attribute

In HTML, the style attribute is used to apply inline styles directly to individual elements. This attribute allows you to specify various style properties for an HTML element, such as color, font size, margins, padding, etc. The style attribute should be included within the opening tag of the HTML element you want to style.

Example

<p style="color: blue; font-size: 16px;">This is a styled paragraph.</p>
You can click on above box to edit the code and run again.

Output

This is a styled paragraph.

Background Colors

In HTML, you can set the background color of an element using the style attribute with the 'background-color' property. This property allows you to specify a color for the background of the element.

Example

<html>
<body style="background-color: lightblue;"
<h1>This is a page with a light blue background.</h1>
<p>This is some content on the page.</p>
</body>
</html>
You can click on above box to edit the code and run again.

Output


This is a page with a light blue background.


This is some content on the page.


Text Color

In HTML, you can set the text color of an element using the style attribute with the color property. This property allows you to specify the color of the text content within the element.

Example

<html>
<body>
<h1 style="color: blue;">This is a heading with blue text color.</h1>
<p style="color: green;">This is a paragraph with green text color.</p>
</body>
</html>
You can click on above box to edit the code and run again.

Output

This is a heading with blue text color.

This is a paragraph with green text color.

Fonts

In HTML, you can set the font of an element using the style attribute with the font-family property. The font-family property allows you to specify the font for the text content within the element

Example

<body>
<p style="font-family: 'Arial', sans-serif;">This is a paragraph with the Arial font.</p>
<p style="font-family: 'Times New Roman', serif;">This is another paragraph with the Times New Roman font.</p>
</body>
You can click on above box to edit the code and run again.

Output

This is a paragraph with the Arial font.

This is another paragraph with the Times New Roman font.

Text Size

In HTML, you can set the text size (font size) of an element using the style attribute with the font-size property. The font-size property allows you to specify the size of the text content within the element.

Example

<body>
<p style="font-size: 18px;">This is a paragraph with a font size of 18 pixels.</p>
<p style="font-size: 22px;">This is another paragraph with a font size of 22 pixels.</p>
</body>
You can click on above box to edit the code and run again.

Output

This is a paragraph with a font size of 18 pixels.

This is another paragraph with a font size of 22 pixels.

Text Alignment

In HTML, you can set the text alignment of an element using the style attribute with the text-align property. The text-align property allows you to specify how text content should be aligned within the element.

Example

<body>
<p style="text-align: left;">left-aligned text.</p>
<p style="text-align: center;">center-aligned text.</p>
<p style="text-align: right;">right-aligned text.</p>
<p style="text-align: justyfy;">justified text.</p>
</body>
You can click on above box to edit the code and run again.

Output

left-aligned text.

center-aligned text.

right-aligned text.

justified text.