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)
- 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 (this blog)
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.
Setting CSS for Other Tags in HTML
In addition to the tags listed in the rest of this chapter, there are a couple of other peculiar tags worth mentioning here.
The Line Break BR Tag
You should avoid the line break tag except when writing poetry!
|The HTML for the poem||How it would render|
In the example above the line break tags ensure that this entire block of text is treated as a single paragraph.
You could apply a style to a BR tag - for example, to increase spacing between lines - but it would be an unusual thing to do.
The Horizontal Row HR Tag
A simple horizontal line can look a bit dull:
|The HTML for our line||What the line looks like|
However, as with all other tags you can style hr tags to look more exciting:
You could make this line look a bit more exciting by applying the CSS style shown below.
Here is the CSS to achieve this:
/* horizontal rows */
border: 1px solid #F00;
Any background colour you set for the style of an HR tag will be ignored, since HTML horizontal rows consist purely of a line. Itï¿½s better practice to avoid HR tags altogether, and use bottom and top borders of div tags instead to achieve the same effects.
And on that slightly anti-climactic note, we've reached the end of the tutorial on applying CSS to specific HTML tags!