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 (this blog)
- 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.
Styling Images - the IMG Tag
If you want to display an image on a web page, youï¿½ll need the img tag:
|An image||The HTML for the image|
Typical Image Attributes
Typically every image will include the following 2 attributes:
|src||Where to find the file containing the image within the website (see the notes below on absolute and relative paths)|
|alt||The alternative text which appears when the image canï¿½t be downloaded, and as a tool tip.|
It's strictly speaking nothing to do with CSS or HTML, but I can't resist mentioning an ASP.NET tip here: prefixing an image path with a tilde (~) will make it relative to the root folder of the website.
Styling Images using CSS
Youï¿½ll often want images to appear with a thin border:
/* images have black border */
border: 1px solid #000;
This CSS will make all images appear with a 1 pixel solid black border round them:
Much better! You can now see where the image begins and ends.
Another common style to apply to images is to float them to the left of text (it's been done several times on this page, including in this hint).