CSS – Box Model

Posted on by tchastkavich

Shape of the Day:

  • Checking marked homework and re-submitting any unfinished work
  • Begin CSS Box Model Lesson

Website of the Day:

https://www.smashingmagazine.com/2019/09/desktop-wallpaper-calendars-october-2019/ – Scroll down to check out October wallpapers that you can use for your desktop. They were made by community users of the website!

1. Check your e-mail to see if you received any feedback from assignments/homework

Ensure you have all assignments handed in correctly in order to receive a mark for them.

2. CSS Box Model

Check out this online interactive demo: http://guyroutledge.github.io/box-model/

Here are some helpful code hints when working with components of the box model: margins, borders, padding, and box model

Show the Box Model on Paper

  1. CSS can style the “boxes” that all HTML elements contain around them.
  2. Here are the specific box model properties: margins (this is the furthest outside of the box), borders (a visible line outside of the box but inside the margins – only visible if style and color are provided),  and padding (empty space between the content/box and the edge of the border of the box).
  3. Draw a webpage on a piece of paper, draw a wrapper, and then draw an image in the wrapper. Identify where the margins, borders, and padding for both the wrapper and the image would be.

Create a webpage

Begin with this code here

To help you with this new code, you can read the comments sections, or you can read the following:

Wrapper - sets up elements on a page like a container of "things"

#ID selector - new CSS selector followed by a # on a style sheet. ID's are usually used to identify specific sections on a page (wrapper, menu, header, sidebar) to help with navigation, organization and quick editing ability

Div tags - often used with CSS to style specific areas of content

Height and Width - the are the properties used to provide elements with height and width values. These can be in pixels or percentages.

Direction properties: You can specify top, right, bottom, and left for margins, borders, and padding. You can use none of them, some of them, or all of them! They can all be different values too.

Add this CSS to your img rule-set: margin-top 150px; and margin-left: 250px; What will this do?

Add a border to your img rule-set: border-color:black; border-style: dashed; border-width: 3px

This can also be written in short hand like so - border: 3 px dashed black;

Add padding: 2px;

Are you able to add a background-color to your img?