Hi

This page demonstrates some aspects of using CSS. It uses and external style sheet (see page source), and demonstrates how the styles called for there may be tweaked.

I'm afraid this page doesn't "explain" as extensively as one of my usual pages. I hope, if you've made a bit of progress with CSS, that you will persevere anyway... be sure to look both at the page's source, and at the stylesheet. (http://sheepdogguides.com/css/PosnImages-WpFlag.css .. it's just a text file with a funny extension). The principles demonstrates here are "worthy of all (men) to be remembered".



Test of "this will take you to WP" mechanism... Wikipedia's CSS page (Styling can insert an icon after selected-by-rule links. The CONDITIONAL SELECTION is case sensitive.)


Image display...

The underlying image file which is being displayed needs NO WHITESPACE around the image when displayed as follows. Whitespace will be added by "the magic of" CSS. It will all (or at least mostly?) be "padding". This system is worth it JUST for freeing you from giving each image you prepare for your page a "matt" of white, to push adjoining text back.. but it has even greater dividends, in that you can easily tweak the whitespace between the image and the text to your heart's content.

I've been a grudging student of CSS until now, 3/18. "Why would I want this extra hassle? What was wrong with the old way?". At last, after several years' struggle, I begin to see why people like CSS. It is not ALL about unnecessary "bells and whistles".

Image test... centered. To see where element ends, invoke border-style:dotted;border-width:2px, either with embedded or in-line

((q-alt text for image))
((q-alt text for image))

Image test... Pushed to left. See earlier notes about switching border on and off. Note: Narrow margin left, wide right. Either (and anything else) can be over-ridden at page or element level. (Again, see notes with example for centered image.)

((q-alt text for image))

Lorem ipsum dolors sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id diam vel quam elementum pulvinar etiam non quam lacus. A erat nam at lectus urna. Penatibus et magnis dis parturient montes. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Morbi tempus iaculis urna id. Libero volutpat sed cras ornare arcu dui vivamus arcu. Morbi tristique senectus et netus et malesuada fames.

Ac auctor augue mauris augue neque gravida. At ultrices mi tempus imperdiet nulla malesuada. Bibendum neque egestas congue quisque. Mauris pharetra et ultrices neque ornare aenean euismod elementum. Suscipit adipiscing bibendum est ultricies integer quis auctor elit.

Ut porttitor leo a diam sollicitudin tempor. Mi sit amet mauris commodo quis imperdiet massa tincidunt. Pellentesque elit eget gravida cum sociis natoque. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Enim eu turpis egestas pretium aenean pharetra. Auctor eu augue ut lectus arcu bibendum at varius. Pellentesque id nibh tortor id aliquet lectus proin.



Moving on....

((q-alt text for image))

Same image... with NO padding left or right, but much more bottom. (Done with over-rides by IN-LINE styling.)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id diam vel quam elementum pulvinar etiam non quam lacus. A erat nam at lectus urna. Penatibus et magnis dis parturient montes. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Morbi tempus iaculis urna id. Libero volutpat sed cras ornare arcu dui vivamus arcu. Morbi tristique senectus et netus et malesuada fames.

Ac auctor augue mauris augue neque gravida. At ultrices mi tempus imperdiet nulla malesuada. Bibendum neque egestas congue quisque. Mauris pharetra et ultrices neque ornare aenean euismod elementum. Suscipit adipiscing bibendum est ultricies integer quis auctor elit.

Ut porttitor leo a diam sollicitudin tempor. Mi sit amet mauris commodo quis imperdiet massa tincidunt. Pellentesque elit eget gravida cum sociis natoque. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Enim eu turpis egestas pretium aenean pharetra. Auctor eu augue ut lectus arcu bibendum at varius. Pellentesque id nibh tortor id aliquet lectus proin.

Tristique magna sit amet purus. Vivamus at augue eget arcu dictum. Sit amet mattis vulputate enim nulla aliquet porttitor. A erat nam at lectus. Ultrices eros in cursus turpis massa tincidunt. Libero justo laoreet sit amet cursus. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Faucibus purus in massa tempor nec feugiat nisl pretium. Consequat interdum varius sit amet mattis. Feugiat nisl pretium fusce id velit ut tortor pretium viverra. Tempor id eu nisl nunc mi ipsum faucibus. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus. Consectetur adipiscing elit ut aliquam.


Moving on....

((q-alt text for image))

Same image, pushed to the right. Again... note the "unbalanced" (but good) left and right margins in the styling provided by the external style sheet. Which can be over-ridden inside this page, either globally (for the page), or element by element, as wanted.