/*=====
   Our second external CSS stylesheet!

   by: Sharon Tuttle
   last modified: 2016-02-15
=====*/

/*=====
    in general:
    color property refers to foreground or text color
    background-color property refers
       to an element's background color

    (but beware -- some browser's won't let
    you style all form controls...)
=====*/

/*---
    style textfields to have blue text and
    a beige-ish background
---*/

input[type="text"]
{
    color: blue;
    background-color: #ffffdc;
}

/*---
   style JUST the option element with attribute
   value="JF" to have red text

   NOTE: this works in Firefox but not Chrome
   on Mac OS X...
---*/

option[value="JF"]
{
    color: red;
}

/*=====
    font properties!
    *   see table 3.4, p. 59
    *   here are a few:
        *   font-family - font name to use
            *   e.g., serif
                    "Courier New"
                    "Verdana"
                    "Calibri"
                    "Wingdings"

            *   you can give a comma-separated
                list, and it will try to find and
                use these in order;

            *   these 5 "logical" font families
                are supposed to be guaranteed
                to be mapped to a font on all
                browsers:

                cursive
                fantasy
                monospace
                sans-serif
                serif

            *   GOOD STYLE: start with the
                font-family you really want,
                then maybe options that are
                widely available,
                end with a generic font-family

        *   font-size - size of text to display
            *   SIZES!! p. 61
                *   SEVERAL allowed units
                    pt - points (72 points/inch)
                    px - pixels (1 dot on screen)
: italic;
}

/*=====
    CSS BOX MODEL

    *   see p. 4.5 - CSS Box Model diagram!

    *   a set of rules collectively known as
        the CSS Box Model
        describes the rectangular regions
        occupied by HTML elements

    *   PADDING is space between the actual element's
        content area and its border
        *   can have top, bottom, left, and right
            padding

    *   elements can have top, bottom, left, and
        right BORDERS

    *   MARGIN is space between an element's border
        and other content
        *   can have top, bottom, left, and right
            margins

=====*/

/*=====
    Borders

    *   each element CAN have this
    *   border-left, border-right, border-top,
        border-bottom
        *   borders have a THICKNESS
	         (a given size, or thin medium or thick)
        *   and a STYLE
            include: none, hidden, dotted, dashed,
                     double, groove, inset, solid, and
		                   more...
        *   and a color

    *   can set each side's border properties
        individually
        or as a group (those you don't set get the
        default)
=====*/

/*---
    style h1 elements to have:
    *   .5em-wide left margin, outside the left border
    *   center-align the text within the h1 element
    *   .5em-wide top, bottom, left, and right padding
        within the border
    *   .1em-wide top, bottom, left, and right border,
        BUT then OVERRIDE that, giving
        *   a left-border that is thick, dotted, and
            purplish-red,
        *   and a double-line bottom-border
            (notice that this resets its default color)
---*/

h1
{
    margin-left: 0.5em;
    text-align: center;
    padding: .5em;
    border: .1em solid red;
    border-left: thick dotted #cc0088;
    border-bottom: double;
}