HTML (HyperText Markup Language) provides six special tags for displaying headings of different levels. All of them have default parameters (size and style of the font, the amount of indents from the previous and next elements, etc.). These options can be overridden using CSS instructions (Cascading Style Sheets) and thus change the appearance of headings in the text of a web page.
Instructions
Step 1
Place headings of different levels between the corresponding opening and closing tags, if not already done in the source code of the web page. For example, the most important heading (first level) should be between tags
and
:
First level heading
The next most important level subheading should be placed between tags
and
etc. The last of the foreseen levels is the sixth -
and
Step 2
Place in the header part of the source code (between the and tags) a statement informing the visitor's browser that there is a description of the styles in CSS in this place:
/ * CSS instructions will be here * /
Step 3
In between the opening and closing style tags, add style descriptions for the headings of each level you want to change the look of. For example, if you only need to change the appearance of the first level headings, then this code might look like this:
h1 {
color: Red;
font-size: 20px;
font-style: italic;
font-weight: bold;
margin-top: 30px;
margin-bottom: 20px;
}
Here, h1 indicates that the description in curly braces refers to the h1 tag and is called a "selector". The color parameter sets the color of the text, the font-size parameter is the font size, the font-style with the italic value is the italic typeface, the font-weight with the bold value is bold, margin-top is the top margin, and margin-bottom is the bottom margin. For second-level headings, add a similar block with an h2 selector, etc.
Step 4
Use the shorthand syntax if there are many levels to describe. For example, font descriptions can be placed in one parameter, as well as descriptions of indentation sizes. Sample:
h1 {
color: Red;
font: bold 20px arial;
margin: 30px 0 20px 0;
}
h2 {
color: Orange;
font: bold 18px arial;
margin: 25px 0 15px 0;
}
In the margin parameter, the margins should be specified clockwise, starting from the top margin, through a space (top right bottom left).
