Box Model – Part 2

Posted on by tchastkavich

Shape of the Day:

  • Ensure any assignments on Teams are handed in/updated.
  • Check marks using the grades option.
  • Continuing the Box Model

Website of the Day:

https://picular.co/ – Since we’re working with colours so much, here’s a website that is essentially Google, but for colours!

1. The Box Model Part 2:

Continue from where you left off with the previous Box Model instructions.

  • The Box Model can be applied to any element on a webpage (You can define margins, borders and padding for anything, as well as add a background or background image to every element). Answer the following 3 questions somewhere on your current page.
    1.  What are some examples of elements on your web page?
    2. Why is it useful to apply the box model to each element on your page? How does this affect your design and layout?
    3. Since you can choose to define margins, borders, and padding – the browser will do its default thing if you do not choose. What are the default margins? Borders? Padding? Think about the first HTML pages we made at the start of this course, how did your content look? What did the browser do to the content?
  • Using the box model, you can define a page wrapper, just like you did in the previous lesson. As we move forward, try to keep this in mind as we continue to create different sections of a webpage, like a header, footer and sidebar.
  • What is that div id below your body tag?
    • Div ids are made starting with a ‘#’ on a CSS style sheet. They identify specific sections of a webpage (eg. wrapper, menu, header, sidebar).
    • Div tags are applied in the HTML as a reference to sections of a page – div id=”wrapper” would be an example. Anything in that div will have properties defined in the style sheet. Background colour, background image, font, border can all be defined properties. Div tags require CSS to style them, otherwise they do not do anything by themselves. They must have IDs and/or classes.
  • Please do the following exercises (After completing them, take a screen shot of the check marked exercises on the left. You should only need 4 screen shots):
  • Now create a new practice web page
    1. Download this starter code
    2. Download this image
    3. Open Visual Studio and start a new webpage.
    4. Copy and paste the downloaded code into the new webpage and save the file as boxmodelpart2.html
    5. For each of the elements given, provide a different property for the borders, margins, and padding. Add background colours as well. Change the values that are given in your starter code – ensure to read the CSS Comments as you go.
    6. Border styles you can use: solid, dashed, double, groove, ridge, dotted, inset and outset
    7. Here’s another colour site: http://materialuicolors.co/
    8. Create a new paragraph. What happens? Why does this happen?
    9. Why does the link to YouTube have the same properties as the paragraph? How can you fix it so the link fits inside the box?
    10. Can you add a background image to any of the elements? How can you do this? Try using some older CSS photos you have used since you have them readily available. Try this code: background image url, background-repeat, and background-position
    11. Download this image code and paste it into your internal style sheet below the paragraph section, above your link section. What happens to your image? What does the opacity property do?
    12. Reverse the opacity of your image so when you roll your mouse over it, the image is fully visible, and when you take your mouse away, it’s nearly transparent.
    13. What type of selector is img:hover? Hint: it’s the same as when we style links. What is it called? (Again, write this answer somewhere on your page).