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

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

/*-----
    give h1 elements a colorful and varied border
    (also demonstrating a number of border-related
    properties)
-----*/

h1
{
    border: .1em solid red;
    border-left: thick dotted #cc0088;
    border-bottom-color: rgb(0, 128, 128);
    border-bottom-style: double;
}

/*=====
    the table element also has an additional
    border-related property:

    border-collapse: collapse;

    ...so that adjacent table's, table cells',
    and table rows' borders "collapse" into a 
    single border;

    (BUT this is included in normalize.css,
    so you'd only need this to get this effect
    when NOT using normalize.css...)
=====*/

/*-----
    give tables, table rows, table cells,
    table header cells, and captions a
    thin tasteful border
-----*/

table, tr, td, th, caption
{
    border: .1em solid black;
    
    /* included in normalize.css: */
    /* border-collapse: collapse; */
}

/*=====
    PADDING examples!

    *   remember: padding is BETWEEN the element content
        and its border!

    *   can be specified for top, bottom, left, right

    *   given as a SIZE
=====*/

/*---- 
    add 1em padding to top, bottom, left, and right
    of h1 elements, and also give them a background
    color of yellow
-----*/

h1
{
    padding: 1em;
    background-color: yellow;
}
  
/*-----
    set padding to 0em for h2 elements, and give
    them a mint-ish green background
-----*/

h2
{
    padding: 0em;
    background-color: #BBFFBB;
}

/*-----
    give legends a left padding of 4em, a top padding
    of 1 em, and a fuchsia backround
-----*/

legend
{
    padding-left: 4em;
    padding-top: 1em;
    background-color: fuchsia;
}

/*-----
    add a small amount of padding to table data and
    header cells
-----*/

td, th
{
    padding: 0.25em;
}

/*=====
    MARGINS!

    *   these are between the border and other content!

    *   separation between neighboring elements;

    *   since they are OUTSIDE of the element,
        they are always transparent -- they don't contain
        the element's background color
=====*/

/*-----
    note that when one block element appears below
    another, the two elements' top and bottom margins
    combine, called margin collapse --
    their shared margin is the larger of the two

    (and remember that some block elements get some 
    default margins...)
-----*/

/*-----
    give paragraph elements a 2em margin, and
    a mint-ish green background
    (notice that you don't see the mint-ish green in
    the margin area -- margins are outside of the
    element...)
-----*/

p
{
    margin: 2em;
    background-color: #BBFFBB;
}

/*-----
    the body element can have a margin of its own;
-----*/

body
{
    margin-left: 1em;
    margin-right: 1em;
}

/*-----
    change the left margin and right margin
    and the background color for
    p elements with attribute class="lovely"
-----*/

p.lovely
{
    margin-left: 1em;
    margin-right: 3em;
    background-color: cyan;
}

/*=====
    div element - an HTML block element representing
        a major division or section of a document

    *   mainly serves as a target for CSS rules

    *   HTML5 includes elements for page sections
        (see p. 93) that replace many common uses
        of div
=====*/

/*=====
    span element - is an INLINE element representing
        a meaningful span of text (that might also
        be a useful target for CSS rules...)
=====*/

/*=====
    context selectors - these let you specify the style
        for elements that are within another element
        with a given specification

    *   indicate by a CSS rule selector that
        includes a space between selectors

    .newslist li   

    *   this means, for elements with class="newslist",
        style THEIR li elements as shown

    *   the browser first looks for elements that match
        the outer selector, THEN looks for elements
        INSIDE them that match the inner selector

    *   the important point here: in the HTML,
        you JUST put:

        <ul class="newslist">

        ...and ALL of that list's li elements will be
        styled as given by this rule; you don't have 
        to give EACH li a class attribute!

        (and you can use this for ol lists with
        class="newslist", too...)
=====*/

/*=====
    float is a property that can be helpful for
    laying out sidebars, menus, footers, etc.

    FIRST: I need to mention another property: 
    width
    *   block element's width, by default, is 
        equal to the entire page width
    *   BUT you can set width property to get
        something different
    *   applies ONLY to block elements and
        the img element
=====*/

/*-----
   block elements with class="width1" or class="width2"
   will be given a thick-ish black border and be
   12em wide    
-----*/

.width1, .width2
{
    border: 0.25em solid black;
    width: 12em;
}

/*-----
    note that text-align applies to alignment within
    the block element, NOT its alignment within
    the page
-----*/

/*-----
    ...to demo this, give JUST elements with class="width2"
    a right text-alignment
-----*/

.width2
{
    text-align: right;
}

/*=====
    BACK, then, to the float property!
   
    float property can be:

        left  right  inherit  none

    *   inherit means to inherit the float value
        of an element's parent element

    *   normal flow: block elements stack one atop other

    *   float LIFTS an element out the "normal flow",
        floats it left or right, and other content
        can WRAP around it

    float: none;   - is the DEFAULT, no floating here 

    *   if the floating element is contained
        within ANOTHER block element,
        it floats against the edge of that
        ELEMENT instead of the overal document
=====*/

/*-----
    for block elements with class="sidebar", float
    them to the right, with a silver background and
    a width of 15em
-----*/

.sidebar
{
    float: right;
    background-color: silver;
    width: 15em;
}

/* end of 328lect05-2.css */