Using images, captions, div containers and inline styles
This page demonstrates using inline css to format "floating" boxes containing a photo and photocaption.
This was originally a tutorial for editors of special-purpose pages in the Drupal Content Management System. Within some hosted CMS systems, users may not have access to modify full style sheets. For one-time use in a document -- such as the styling of this paragraph -- inline styles can be very useful.
On most Web sites, such styling (css) would be contained either:
- in a style declaration in the head section of the page, so that the styles could be applied to more than one photo-box, or...
- in an external stylesheet that could be applied to more than one page.
However, just seeing the style codes in close proximity to the picture and caption text may help students analyze how they work. Then, as an exercise, they can extract move the styles to the head section of the document or to an external sheet. Further explanations are contained in "comments" in this page's code.)
Walter S. Rugaber, former publisher, The Roanoke Times; president, Landmark Publishing Group [photo by Stepno]
Walter S. Rugaber, former publisher, The Roanoke Times; president, Landmark Publishing Group [photo by Stepno]This page shows how inline CSS using SPAN and DIV tags, image captioning and an image-rollover "title" can work for "custom" page layouts. Both the visible caption and image are in an HTML DIV section styled with CSS to float to the right.
This page also demonstrates resizing an image using HTML settings -- generally something I do only when testing a page, or when I want the same image to appear in two different sizes on the same page. The 250-pixel-wide photo on the right is the same as the 333-pixel-wide one centered above. The smaller version reduced by deleting its "height" attribute and changing both the image and DIV "width" tags to 250px, forcing the browser to calculate its height proportionally.
(I chose 250 pixels to leave room for a few words next to the photo within this 600-pixel-wide page.)
What's going on here
Analysis of the code in this page should give you some ideas for more creative page layouts using CSS styling. In this case, the div element and style properties float both the image and short caption to the right of a paragraph of relevant text.
Inline styles are used to position a box containing both the image and caption, and to set the size and color of the caption and photo credit text. An additional one-sentence description of the image is embedded as a "title" within the image tag; the title appears when a viewer mouses over the picture. Throughout the page, styles are set within DIV and SPAN tags, but a style sheet could apply similar attributes to ID selectors or reuseable "classes" -- such as "photo-box," "photo-caption" or "photo-creditline."
Syntax and vocabulary refresher:
Web design has its own vocabulary, and some of the words can be confusing. Words like elements, attributes, values, definitions, declarations, rules and properties all sound like interchangeable English language words. But each has a special meaning in the technical terminology of the Web.
Here's a refresher. Let me know if I've made any mistakes -- or if I've made any of this easier to follow by going over it again!
HTML tags like <p>(whatever their contents)</p> are "elements," which may have "attributes" that, in turn, have "values."
To use "inline styles" like the ones on this page, you add an attribute named "style" to a single selected HTML element, right in the same line of HTML code.
You use an equal sign and quote marks to assign a value to any attribute. With a style attribute, the value is a CSS "style rule definition."
Example, typing this code:
<p style="color:red; background-color:tan;">This is a paragraph of red type on a tan background.</p>
Produces this:
This is a paragraph of red type on a tan background.
So: <p> is an html paragraph tag, beginning an "element" of a page. (When they are restyling a tag with css, the people who write HTML and CSS tutorials call the tag's name a "selector." Don't let that confuse you.)
The attribute's value -- the style rule definition -- is everything after the equal sign and between the quotation marks.
A style rule can include one or more "declarations" separated by semicolons. A declaration names a "property" (like color or background color) and its value (red, tan or whatever).
That's it. The second quote mark ends the inline style definition, and the usual angle brackets finish the opening and closing P HTML tags. The inline style affects everything within that one paragraph element. Start a new paragraph and you'll will be back to black type on a white background.
Beyond "inline": When you define your styles in a stylesheet (not inline), you no longer need the word "style" as an attribute in HTML tags. You can style all of your paragraphs or headlines with one line of code. Or you can further refine your styles by inventing your own "class" and "id" selectors, then "id=" or "class=" as attributes to your HTML tags.
For example, the style declarations made on this page could be stored away as "classes" called "centerphoto" and "rightphoto," then used over and over with P or DIV elements.
In-class or at-home exercise: Look at the source code of this page and try converting the inline styles into styles you can reuse.
More on HTML elements, HTML attributes and CSS syntax, IDs & classes at W3Schools.
Walter S. Rugaber, former publisher, The Roanoke Times; president, Landmark Publishing Group [photo by Stepno]This box uses the same coding as the one floated to the right, but the style declarations have been moved to the head of the document in classes called "leftbox" and "credit." The right margin of the box has been increased so that this paragraph of text does not butt into the box border. See the comments in this code for more details about the "inline" coding technique.