Table of Contents

simple CSS

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

tags

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)

html5

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)

my example ( with the html elements labeled)

(or html5 semantic guide)

selectors

flex + selectors also see the same page with the html elements labeled

good refs… good story w3.org

transitions

hovering on images: scaling (a bit of a fade) blur

animations

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

fonts

basic fonts font option 1 font option 2 font option 3 font option 4 font option 5 font option 8 font option 10 font option crazy

first letter font first letter

Launcher

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:

Other people's stuff

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>