Finishing the Box Model, Classes, Cascading and Thanksgiving Assignment

Posted on by tchastkavich

Shape of the Day:

  • Continue working with the Box Model
  • box-shadow and line-height – 2 new properties in CSS!
  • Learn what CSS classes are and how they can be applied
  • Cascading – the “C” in CSS
  • Thanksgiving Webpage Project

Website of the Day:

https://codepen.io/chaofix/pen/VrWZga – This is a game created only by CSS!

1. Box Model Review

Try to answer the following questions in your head before finishing up with the Box Model. If you feel confident with them, that’s great! If not, you may want to go back and review what you did for the last two lessons.

  • How would you describe the box model in your own words?
  • Specify the three box model properties.
  • True or false: You can add a background colour and a background image to any element through the box model.
  • True or false: You can use height and width properties through the box model.

2. Box Model Practice #3

  •  Continuing with the same webpage from yesterdays lesson (Box Model 2) work through the following:
    • Content’s true width: Browsers automatically add margins, borders, and padding to the width of content on a page. Eg – content that is 100 x 100 pixels that has 5px margins, 2px border, and 3px padding is actually 100+5+2+3+3+2+5 = 120 width and 120 height.
    • By Default in the CSS box model, the width and the height is only applied to the box of content of that element. A special CSS property and value, box-sizing:border-box; makes the browser include the padding and the border in the content’s width and height. Check out some examples here
    • As you launch your web page in Chrome, right click and go to inspect. Note when you hover over different components of the page, you will see the box model in full effect. Roll your mouse over the margins, borders, and padding to check and see how the browser is computing the actual width of the image you added. Look at the width and height values.
    • Try adding box-sizing: border-box to your img CSS and see how the changes are computed with width.
    • Why does this matter in terms of sizing elements on your webpage?

3. CSS Classes

  • Open your previous CSS page that you were working with on the box model.
  • Use this website to look at the difference between Type Selector, ID Selector and Class Selector. What are the main differences?
  • What were the type selectors we used on our previous webpage? What was the ID selector? To style multiple elements at once in CSS we use Classes. 
CLASSES
They can contain several properties like bold text, 16px and red. 

To make something a class on the stylesheet, it has to start with a period. 

Naming classes is up to you but it's smart to keep them simple and short so they do not get too confusing. 

It should also relate to the theme you are trying to style, for example .light would be a class to make lighter content than the rest of the page.
  • ID (this is usually used once on a page, so uniquely used) starts with a # on the style sheet. It’s more to identify sections on a webpage like #header, #wrapper, #sidebar, #menu
  • Elements do not require anything before them. They are identified immediately and represent specific HTML elements.
  • In the body section, div tags are used to correspond to class selectors and ID selectors. For example, div id=”header” or div class=”light” – you can also apply to any content on your webpage like p class=”dark”
Lets try creating a basic class and applying it. Make one of the paragraphs look different by creating a class and ensuring it is applied to one of them (in your HTML code, pick a paragraph tag and change it to <p class="dark">. Make a class called .dark in your style sheet and use the background color of #311847. Then change the font color in your p selector to a lighter color to ensure you can see your text.
  • What happen when you add another paragraph? Why?
  • Why does the paragraph with the class of .dark still have all of the other CSS styles such as a border etc? How could we change that? The answer here leads us into the next topic of how CSS “cascades”.

4. Cascading

  • CSS – Cascading Style Sheets is how the browser assigns styles to content. Styles have a “cascade” down effect on a style sheet and control how things look unless we specify something different – like when we use classes for example. Think of it as a type of “override”.
  • “Parents” and “Children” can be identified on your practice page. Before you do that, try this tutorial and complete as much of it as you can. There are editable codes on the page, so you can practice/play as you work through it.
  • Here’s what matters to the cascade: Origin & Importance; Selector Specificity; Order of Appearance; Inital & Inherited Properties (default values).

5. Thanksgiving Webpage Assignment

  • Take the broken code and follow the directions in the comments. Copy and paste it into Visual Studio and save the file as thanksgiving.html in a new folder called 12 – Thanksgiving Broken
  • Thanksgiving Broken Code