BLOGS BY TOPIC
BLOGS BY AUTHOR
BLOGS BY YEAR
This is the second of a three-part online training series of blogs on CSS style sheets. This blog shows how to create styles for specific HTML tags (the first part covers the principles of CSS style sheets, and the third part gives a worked example of CSS).
- CSS Styles for Specific HTML Tags
- Block Elements (Heading, Div and Paragraph Tags) (this blog)
- Inline Tags - Span, Em and Strong
- Styling Images - the IMG Tag
- Styles for Ordered and Unordered Lists - ul, ol and li
- Hyperlinks (the A Tag)
- Table Styles
- Setting CSS for Other Tags in HTML
Posted by Andy Brown on 16 May 2012
You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.
Block Elements (Heading, Div and Paragraph Tags)
A block element forms its own paragraph or block (as opposed to an inline element which flows with the surrounding text). In the following example, the p and div tags are block elements, but the span tag is an inline element:
|Block and inline elements||The underlying HTML|
Heading Tags (H1, H2, etc.)
You should set styles for heading tags typically using em as the font measurement unit. For example:
/* level 1, 2 and 3 headings */
Here only the first 3 heading tags are styled (you can set up to 6). All headings will appear in purple (colour code C06) and bold. In addition:
- Level 1 headings will be 150% of the size of the default font, be underlined and have a 20 pixel gap after them;
- Level 2 headings will be 120% of the size of the default font, and will be underlined
- Level 3 headings will be the same size as the standard font.
Here’s what this will give:
The formatting created by the heading styles above.
DIV and P Tags
Use Div tags to set borders, widths or spacing around sections of text. Here's an example:
|An example of a div tag||The corresponding HTML|
Here is the CSS for the divBox style to make this work:
border: 1px solid #000;
This shows that any div tag which has the divBox class applied to it (such as the one above) will appear in a 200 pixel wide box, with a thin black border, pale blue background, inner 10 pixels padding and a 20 pixel margin around it.
You can use p and div tags interchangeably, although CSS purists normally reserve p tags for quoted paragraphs of text.