simple CSS

I'll try to collect some pared down examples for each of these. The examples below can be best accessed by


basic html

text a1), p2), h2, h3, img3), br4)
visible structures ul, ol, li5) , div 6), span 7)
document structures id 8), html, head , body 9)

(all the details can be found in w3schools)


These tags add more meaning to the chunks of content in a webpage.

main sections header, main, footer
helper sections article, section, nav, aside, figure (figcaption)
doodads audio, video, details (summary), mark, time

my example ( with the html elements labeled)

(or html5 semantic guide)




slide in while opening details & wiggle while hovering on nav elements animations



The above examples can be combined by playing with url parameters:

https://jimmorey.com/CSS/clean/html5.html?css=dynaTrans.css%20font2.css%20layoutPortal.css is html5.html with layoutPortal.css + dynaTrans.css + font2.css – experiment by adding and combining other css files.

note: the %20 is used instead of spaces…

:!: The easiest way to explore the css options is by using launcher

Advanced stuff

Here are examples not using 'my example' html5.html:

1) links <a href="jimmorey.com">cool site</a>
2) paragraph <p>blah. blah. blah.</p>)), h1((big title <h1>section title</h1>
3) pictures <img src="flower.svg"/>
4) linebreak <br/>
5) bulleted (ul) or numbered lists (ol) <ul><li>one</li><li>two</li></ul>
6) divisions help chunk pages <div><h2>huh</h2><p>blah</p></div>
7) chunks of inline text <span>special text</span>
8) used to refer to items later <p id="gist">The key point ...</p> ...<a href="#gist>key</a>
9) used as a wrapper for the webpage <html><head>scripts...</head> <body>...content...</body> </html>
css.txt · Last modified: 2020/02/05 00:00 by morey
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 3.0 Unported
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki