Class 4 | Styling and Formatting | Learn HTML
HTML Styling
Every HTML element has a default style (background color is white and text color is black). Changing the default style of an HTML element, can be done with the style attribute. This example changes the default background color from white to light-grey:
<body style="background-color:lightgrey">
<h1>heading</h1>
<p>paragraph.</p>
</body>
The HTML Style Attribute
The HTML style attribute has the following syntax: style=”property:value”
HTML Text Color
The color property defines the text color to be used for an HTML element:
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
HTML Fonts
The font-family property defines the font to be used for an HTML element. See the examples below:
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
HTML Text Size
The font-size property defines the text size to be used for an HTML element:
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>
HTML Text Alignment
The text-align property defines the horizontal text alignment for an HTML element:
<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>
HTML Formatting Elements
HTML also defines special elements, for defining text with a special meaning. HTML uses elements like <b> and <i> for formatting output, like bold or italic.
Formatting elements were designed to display special types of text:
- Bold text
- Important text
- Italic text
- Emphasized text
- Marked text
- Small text
- Deleted text
- Inserted text
- Subscripts
- Superscripts
HTML Bold and Strong Formatting
The HTML <b> element defines bold text, without any extra importance.
<p>This text is normal.</p>
<p><b>This text is bold</b>.</p>
HTML Italic and Emphasized Formatting
The HTML <i> element defines italic text, without any extra importance.
<p>This text is normal.</p>
<p><i>This text is italic</i>.</p>
HTML Italic and Emphasized Formatting
The HTML <em> element defines emphasized text, with added semantic importance.
<p>This text is normal.</p>
<p><em>This text is emphasized</em>.</p>
HTML Small Formatting
The HTML <small> element defines small text:
<h2>HTML <small>Small</small> Formatting</h2>HTML Marked Formatting
The HTML <mark> element defines marked or highlighted text:
<h2>HTML <mark>Marked</mark> Formatting</h2>HTML Deleted Formatting
The HTML <del> element defines deleted (removed) of text.
<p>My favorite color is <del>blue</del> red.</p>HTML Subscript Formatting
The HTML <sub> element defines subscripted text.
<p>This is <sub>subscripted</sub> text.</p>HTML Superscript Formatting
The HTML <sub> element defines subscripted text.
<p>This is <sup>superscripted</sup> text.</p>