HTML Styles
The HTML style attribute is used to apply styles to HTML element, such as background color, font color/text color, fonts, font size, and alignment etc.
The HTML Style Attribute
To set the style of an HTML element, with the help of style attribute.
syntax:
<tagname style=”property1:value1; property2:value2;”>
The tagname is any HTML element like header tags, paragraph tag etc., Style is an attribute in which list of property’s, each property stores specified value assigned with colon (:) and each property its value separated by semicolon (;). that is enclosed double quote marks (“ “). Property is a CSS property. The value is a CSS (Cascading Style Sheet) value.
1. Background-Color
The CSS background-color property setting the background color for an HTML element that is <Body> tag.
Example
Set the background color to yellow color:
<body style=”background-color:yellow;”>
<h1>Background color is Yellow</h1>
<p>The Background color property used to set the background color of the page</p>
</body>
2. Text Color
The CSS color property setting the text color for various HTML elements.
Example
<h1 style=”color:blue;”>This is a Text Color</h1>
<p style=”color:red;”>This paragraph applied to font color is Red </p>
3. Fonts
The CSS font-family property setting the font to be used for an HTML element:
Example
<h1 style=”font-family:Times new roman;”>This is a font-family property to set the fonts</h1>
<p style=”font-family:Arial;”>This is a paragraph to set the Arial Font.</p>
4. Text Size
The CSS font-size property setting the text size for an HTML element. Value should be either numeric or percentage.
Example
<h1 style=”font-size:24;”>This is a heading with size 24</h1>
<p style=”font-size:200%;”>This is a paragraph with size 200%.</p>
5. Text Alignment
The CSS text-align property setting the horizontal text alignment for an HTML element. Here assigned values are left/right/center.
Example
<h1 style=”text-align:center;”>Centered Heading</h1>
<p style=”text-align:right;”>This paragraph setting with horizontal text alignment</p>
Another CSS property is text-valign setting the vertical text alignment for an HTML element. Here assigned values are top/middle/bottom.
Note: CSS used to style attribute for add styles to HTML elements but without Style attribute also defines styles such as background-color for bgcolor attribute; text-align for align and valign attribute. And font color for color attribute, fonts for font-family attribute and Text size for size attribute within the <font> tag;