How to create styles for HTML tags using CSS
Part four of an eight-part series of blogs

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).

  1. CSS Styles for Specific HTML Tags
  2. Block Elements (Heading, Div and Paragraph Tags)
  3. Inline Tags - Span, Em and Strong
  4. Styling Images - the IMG Tag (this blog)
  5. Styles for Ordered and Unordered Lists  - ul, ol and li
  6. Hyperlinks (the A Tag)
  7. Table Styles
  8. Setting CSS for Other Tags in HTML

This blog is part of a larger online ASP.NET online tutorial series.  We also run classroom-based ASP.NET training courses.

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: 

Image on a webpage HTML for an image
An image The HTML for the image

Typical Image Attributes

Typically every image will include the following 2 attributes:

Atrribute Meaning/notes
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 */

img

{

border: 1px solid #000;

}

This CSS will make all images appear with a 1 pixel solid black border round them:

Image with border

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).

This blog has 0 threads Add post