What will this look like?

    .fig8 {
        border: 5px solid red;
        border-bottom:none;
    }
    .fig9 {
        border-bottom:none;
        border: 10px dotted navy;
    }

More Info

Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

box-sizing:content-box is the "default".
box-sizing:border-box is considered by most to be the 'better way'. border-box shrinks the width of the content area to account for padding/border/margin when width is set.

You can set a width to 100% and not worry about funny math.

Margins

CSS Margins add spacing around an element.

• margin-top
• margin-right
• margin-bottom
• margin-left

Padding

CSS Padding add spacing inside an element.

• padding-top
• padding-right
• padding-bottom
• padding-left

Shorthand

• 5px applies 5 pixels to all 4 sides.
• 5px 10px applies 5px to top and bottom and applies 10px to left and right.
• 5px 10px 15px 20px
  • 5px to top
  • 10px to right
  • 15px to bottom
  • 20px to left

A better example of margin vs. padding

Center Align Block Content

How do we horizontally center align block content?

margin-right:auto; margin-left:auto;

Height & Width

Sets the specific height and width of a block element

• height
  • min-height
  • max-height
• width
  • min-width
  • max-width

Display

The CSS display property is used to change the default rendering style of an element.

• inline - span, em, strong
• block - div, p, h1-h6
• none - hides the element
• display:none vs visibility:hidden
• inline-block - Renders block, but stays in a single line.

See the Pen UA-ITR-CSS-Dispaly by Jon (@Middaugh) on CodePen.

List Style

Changes the default styling of UL and OL lists

• list-style-type - changes the icon/value used in the list
• list-style-position - changes the position of the list. Accepts inside and outside
• list-style-img - changes bullets to image. Accepts none or a valid URL
• Short handlist-style: type position img

Example

See the Pen UA - ITR-list styles by Jon (@Middaugh) on CodePen.

Grouping Selectors

You can leverage grouping selectors to share styles between multiple selectors. This can be done by adding a comma between each selector.

    h1, h2, .header, #site-header{
        color:#ff0000;
    }

Grouping Example

See the Pen UA-ITR-Group Selectors by Jon (@Middaugh) on CodePen.

This is not on the first test

...but it's really good to know

Dev Tools Review

Opening the Dev Tools

• Chrome Menu > More Tools > Developer Tools
• Right click on a page element and select `inspect` element
• Ctrl+Shift+I (Windows) or Cmd+Opt+I (Mac)

Fork this Pen

Part 1: General Content

• Set the font of the document to Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif
• Set the margin of all heading tags to 0
• Set the text color of all hyperlinks, heading 1, 2, 5 and 6 tags to #a00
• Set the text color of all paragraphs, heading 3 and 4 tags to #a5a5a5
• Write a selector for the class main, set its width to 600px and set the margins so that the content shifts to the center of the screen.

Part 2: The Menu

• Remove any list styles from the ul tag
• Remove any padding and margins from the ul tag
• Apply alignment so that the list items are right aligned.
• Write a selector for the class nav-link and apply the following rules
  • Font weight bold
  • Font size 20px
  • Padding top and bottom 10 pixels
  • Padding left and right 20 pixels
  • Remove the underline

Exercise Two

• Go to this link: Chrome Dev Tools Tutorial
• Under the Get Started section, complete "View and Change a Page's Styles" section
• If you are ambitious, under the Get Started section, complete "Debug Javascript" section
• If you are extremely ambitious, under the Get Started section, complete the last two sections
• Go back to the main page and read as much as possible!