/*===
    328lect08-1.css - built during class on March 4
        (and added comments after class)

    by: Sharon Tuttle
    last modified: 2024-03-07
===*/

/*===
    give body a margin on all 4 sides of 1em
===*/

body
{
    margin: 1em;
}

/*=== 
    give level-1 and level-2 headings a paragraphs a background
        color of yellow -- notice how the default width of these
        block elements is the entire window, except for the body
        element's margin (and any margins add to one of these element
        types by a later rule)
===*/

h1, h2, p
{
    background-color: yellow;
}

/*===
    when you give an inline element like string a background color
    of chartreuse, notice how their width is just the width of its
    displayed content
===*/

strong
{
    background-color: chartreuse;
}

/*===
    demo of a descendant selector -- just list item elements
    contained in an ordered list will be blue, bold, and italic
===*/

ol li
{
    color: blue;
    font-weight: bold;
    font-style: italic;
}

/*===
   giving level-1 headings a different font, demoing
       some of the border properties to give them a
       distinctive border, and also demoing padding and
       margin (note how the padding has the background
       color, but the margin does not)
===*/

h1
{
    font-family: "Arial", sans-serif;
    border: .1em solid red;
    border-left: thick dotted #cc0088;
    border-right-width: .5em;
    border-bottom-color: rgb(0, 128, 128);
    border-bottom-style: double;
    padding: 1em;
    margin: 3em;
}

/*===
    styling level-2 headings' font-related properties using the
    font shorthand property
===*/

h2
{
    font: italic bold 2em cursive;
}

/*===
   make the footer less obtrusive with a smaller font
===*/

footer
{
    font-size: 0.5em;
}

/*===
    tables look better with a border (and border-collapse
        to avoid a doubled-border), and note the padding is
        *inside* the border

    when playing around after class:
    oddly: giving tr a border does not seem to have any effect?!
        (so I took it out)
===*/

table, td, th
{
    border: 0.1em solid black;
    border-collapse: collapse;
    padding-top: 0.75em;
}

/*===
    giving the table its own margin
===*/

table
{
    margin-left: 1em;
}