Images with and without captions

To include an image in your HTML file, use the following code:

<img alt="Description of picture" src="image.jpg">

If you’d like your image to have a caption, use a figure element:

<figure>
    <img alt="Description of picture" src="image.jpg">
    <figcaption>Caption for picture</figcaption>
</figure>

You may wish to add a class to your figure element for easy styling:

<figure class="example">
    <img alt="Description of picture" src="image.jpg">
    <figcaption>Caption for picture</figcaption>
</figure>

You can then style your image and caption using .example, .example img, and .example figcaption in your stylesheet.

HTML and CSS Basics – Day 2

My files

  • CSS
    • Reset stylesheet
    • File structure – ch. 10
      • style.css
      • Link to in HTML – <link rel="stylesheet" href="style.css">
      • Import reset stylesheet – @import url("reset.css");
      • Rule structure – see bottom of post
    • Properties
      • Color – ch. 11
      • Text – ch. 12
        • font-family
        • font-size (in pixels)
        • line-height (in ems)
        • font-weight (bold)
        • font-style (italic)
        • text-decoration (underline)
        • text-align
  • Layout and the CSS box model – see bottom of post
    • divp. 187
    • Styling – ch. 13
      • width
      • padding
      • border
      • margin
      • Centering your div
        • margin: 0 auto;
    • Classes and IDs – pp. 183-184, 238
      • Spans with classes
        • <span class="..."></span>
  • Images
    • Naming
    • Resizing
    • Centering
      • display: block;
      • margin: 0 auto;
    • Including captions – see this post for more information
  • Miscellaneous
    • Links and :hover pseudo class
    • Styling lists – pp. 333-336
      • list-style-type
    • Styling horizontal rules
      • border
    • Viewing source code in a browser
    • Using Coda reference books (also, HTML and CSS versions on the web)

CSS rule structure

selector {
    property: value;
}

CSS box model