simple CSS

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

tags

(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, meter, progress
helper doodads?	datalist (which differs from select)

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

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

colorful title
some crazy Javascript this one shows some skew and scale as well as some transparent border-top and border-left to create triangles out of divs.

¹⁾ links <a href="jimmorey.com">cool site</a>

²⁾ paragraph <p>blah. blah. blah.</p>)), h1((big title <h1>section title</h1>

³⁾ pictures <img src="flower.svg"/>

⁴⁾ linebreak <br/>

⁵⁾ bulleted (ul) or numbered lists (ol) <ul><li>one</li><li>two</li></ul>

⁶⁾ divisions help chunk pages <div><h2>huh</h2><p>blah</p></div>

⁷⁾ chunks of inline text <span>special text</span>

⁸⁾ used to refer to items later <p id="gist">The key point ...</p> ...<a href="#gist>key</a>

⁹⁾ used as a wrapper for the webpage <html><head>scripts...</head> <body>...content...</body> </html>