Web Design References

These are references for common lines of code I use on my website; please feel free to use as you wish.

Semantic Elements

Main: This should be your core content
Nav: This should be your primary site navigation
Aside: Secondary content
Article: Can be used for blog posts instead of Main
Footer and Header:
Section: Blocks of content that don't fit into Aside or Main
Figure, Figcaption, and Img: These allow you to add an image with a caption underneath

Shorthand is in this order: Top Right Bottom Left;
Example. Padding: 10px 5em 3vw 0px;

font-weight: Normal, Bold, Light;
font-family: Serif, Sans-Serif, Times, Arial, Courier, Fantasy, Monospace;
text-align: left, center, right, justify;
font-size; 1.5em, 15px;
For an all in one solution use the "font" property:
font: italic small-caps bold 12px/30px Georgia, serif;
The Font Property

a:
a:visited
a:hover
Active page links are a bit different.
nav a.active
and this is the html: <a href="sexywebsite.gov" class="active"> CSexy Government Website</a>
How to open links in a new tab = <a href="mywebsite.com" target="_blank"> Click This To Go To My Website</a>
How to open iframes in the same element (for navigation) = <a href="mywebsite.com" target="_parent"> Click This To Go To My Website</a>
Linking to items farther down the page. You need two elements, a section with an id and an a href link.
Here is the a href link. <a href="#Temperance Band"> Find out more about the Band Temperance.</a>
Here is the section with an id <h2 id="Temperance Band"> This is the section about the band Temperance</h2>