Demonstration of Some Styling Possibilities

This is a demonstration, not to present a lesson in "how-to," but only to show a small bit of the potential use of styling HTML elements. The styling changes shown here require lots of practice and some experimenting that may often lead to failure. Don't try it yet. Examples in this group will address everything done here.

Where is the windmill? The windmill will possibly not show up as it should on a small-screen device that has no cursor and is instead a touch-screen device.

Details and Summary: what do they mean? Click on the black triangle.

When a topic is presented and needs more discussion if the reader is interested in that topic, details and summary are the answer. Only a brief summary is first given, and anyone wanting more on the topic can get it from the details. Either summary or details or both could include images. Click on the triangle or the text above to go back to only the brief summary.

On a wide-screen device, people often don't want to turn their heads from left to right as they read. A solution is to style the major container to be only 50% to 70% of the screen width. For such cases, it may be practical to put the navigation area to the left or right side of the screen in what would otherwise be unused space. It's only a personal preference, but I like to have the navigation links in view if I need to scroll down on a text page that is extremely long. To accomplish this, I set the position of the area to "fixed", which must be specified since fixed is not the default position. The nav example in the Simple Examples group discussed "postion: fixed" for the navigation area. An example in this group will discuss positioning in general.

Note that placing the arrow or other cursor over "CSS Examples" in the navigation area causes two links to appear. This is called a drop-down menu and is often used when there are several linked pages that are closely related. That is appropriate for these two links since the are to the lists of links for (1) simple examples and the (2) more advanced examples we are currently demonstrating. The image in the navigation area shows that not only text can be used there. This image is a link, and it works although it leads you only to my home page where the simplest way to return here would be use of the back arrow.