Embedded Files
HTML Styles
HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
Example:
Example:
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="color:green;">I am green</p>
<p style="color:violet;">I am violet</p>
<p style="font-size:50px;">I am big</p>
<p style="font-size:10px;">I am small</p>
</body>
</html>
The HTML Style Attribute
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
(If you have previously seen an example of an HTML style attribute on an HTML ATTRIBUTE, here is another one.)
Example:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a header</h1>
<p style="color:green;">This is a paragraph.</p>
</body>
</html>
Background Color
Background Color
The bg color property is used to specify the background color of an HTML element. We utilize the relevant tag depending on the element whose background color has to be adjusted. The body, table, td, th, tr, and marquee tags can all utilize the bg color attribute.
The CSS background-color property defines the background color for an HTML element.
Example:
Example:
Set the background color for a page to powderblue:
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is how to change the body color.</h1>
<p>You can choose whatever you want.</p>
</body>
</html>
Example:
Example:
Set background color for two different elements:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:powderblue;">And here is another example.</h1>
<p style="background-color:tomato;">You can choose any color if you want!</p>
</body>
</html>
Text Color
Text Color
In HTML, the font color is set using the style property. With the CSS property color, the style attribute designates an inline style for an element. The CSS property color and the attribute are both used with the HTML p> element. Since the <font> tag is not supported by HTML5, font color is added using the CSS style.
Example:
Example:
The CSS color property defines the text color for an HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">And this is how to change color of your font.</h1>
<p style="color:red;">Any color as well as you wish.</p>
<p style="color:green;">Any color as well as you wish.</p>
<p style="color:violet;">Any color as well as you wish.</p>
<p style="color:orange;">Any color as well as you wish.</p>
<p style="color:brown;">Any color as well as you wish.</p>
</body>
</html>
Fonts
Fonts
For online pages to be efficient, readable, and appealing, the font tag in HTML is crucial. In HTML, the font tag was utilized in HTML 4, but HTML5 deprecated it. The font tag in HTML is used to specify the text's face, color, and font size. In HTML, the <body> element contains the typeface tag.
The CSS font-family property defines the font to be used for an HTML element:
Example:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">And this is how we change our fonts.</h1>
<p1 style="font-family:courier;">It was very simple,</p1>
<p1 style="font-family:spectral;">and very easy</p1>
</body>
</html>
Text Size
Text Size
The size property of the font> element in HTML allows you to modify the text's size. The size parameter determines, either in relative or absolute terms, the size at which a typeface shall be rendered. To restore the text size to its default, close the font element with a <font>
The CSS font-size property defines the text size for an HTML element:
Example:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:400%;">Welcome to DCSHS</h1>
<p style="font-size:180%;">I'm hoping this place will teach you a lot!</p>
</body>
</html>
Text Alignment
Text Alignment
Page style includes things like text alignment. Therefore, using the CSS text-align property is the ideal technique to align HTML content on the page. The text-align command controls how material inside a block element or table cell is aligned horizontally.
The CSS text-align property defines the horizontal text alignment for an HTML element:
Example:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">With this, we may position it in the desired text alignment's center.</h1>
<p style="text-align:center;">It would also be effective in a paragraph.</p>
</body>
</html>
Page updated
Google Sites
Report abuse