Class 05 - The CSS Box Model

Class 5 – The CSS Box Model

Go over Homework from Class 4


Get Started: Manage class 5 site in Dreamweaver


css box model

Css Box Model

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

Read more about HTML Elements: http://www.w3schools.com/html/html_elements.asp

CSS Box Model

  • Margin – Clears an area around the border. The margin does not have a background color, it is completely transparent.  You can use negative values.
  • Border – A border that goes around the padding and content. The border is affected by the background color of the box
  • Padding – Clears an area around the content. The padding is affected by the background color of the box. You cannot use negative values.
  • Content – The content of the box, where text and images appear

Class vs. ID

Use IDs when there is only one occurrence per page. Use classes when there are one or more occurrences per page.  Use # for IDs and . for classes.

IDs

CSS

#exampleID {background-color: blue;}

HTML

<p id=”exampleID1″>This paragraph has an ID name of “exampleID” and has a blue CSS defined background.</p>

Classes

CSS

.exampleclass {background-color: blue;}

HTML

<p class=”exampleclass”>This paragraph has a class name of “exampleclass” and has a blue CSS defined background.</p>

Activity 1: Demo with Instructor

Read:  http://www.tizag.com/cssT/cssid.php


Learning CSS Borders

borders

*Must use border-width with border-style or it won’t work. Example:

border example

Activity 2: Adding Borders

Add CSS Internally on Html between header tags:

<style type=”text/css”>

p.none {border-style:none;}

p.dotted {border-style:dotted;}

p.dashed {border-style:dashed;}

p.solid {border-style:solid;}

p.double {border-style:double;}

p.groove {border-style:groove;}

p.ridge {border-style:ridge;}

p.inset {border-style:inset;}

p.outset {border-style:outset; border-width:50px 20px 10px 5px;} /*Border widths must be defined in this order: Top, Right, Bottom, Left – remember counter clockwise*/

p.hidden {border-style:hidden;}

</style>

 

Paste between the body tags:

<p class=”none”>No border.</p>

<p class=”dotted”>A dotted border.</p>

<p class=”dashed”>A dashed border.</p>

<p class=”solid”>A solid border.</p>

<p class=”double”>A double border.</p>

<p class=”groove”>A groove border.</p>

<p class=”ridge”>A ridge border.</p>

<p class=”inset”>An inset border.</p>

<p class=”outset”>An outset border.</p>

<p class=”hidden”>A hidden border.</p>

 

Activity 3: Use the editor to change features like width, height and color.


Activity 4: Add a border to an image.

Read: https://css-tricks.com/using-css-for-image-borders/


Learning DIVs – for website layouts

Must Reads:

Using the Div tag: http://www.w3schools.com/TAGS/tag_div.asp

Div positioning: http://www.barelyfitz.com/screencast/html-training/css/positioning/

Div good naming practices: http://stackoverflow.com/questions/1315005/best-practice-for-naming-divs-in-initial-layout

Activity 5: How to with instructor with demos above


Exam – CSS Test

http://www.w3schools.com/quiztest/quiztest.asp?qtest=CSS


Homework Due 9/28

  1. Customize site we created in Activity 5 using CSS
  2. Create an HTML page that contains the following elements. Be creative… anything goes!
    1. A div containing text
    2. An image with a border
    3. Use both class and ID elements for CSS styling
  3. Practice DIV tutorial found here: http://www.w3schools.com/TAGS/tag_div.asp
  4. Show and tell – bring with you to class 6 what you have designed so far for your final exam exhibit site.
  5. Continue working on your site using divs instead of tables for layout elements.