Wednesday, November 15th

Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

Today is a Wacky Wednesday
MMAG meeting at 11:35am – Jerry
Call Backs:
- Finn and John – Public Issues at 12:55
- Andrew Science – 12:55
- Brodey, Nick, and Finn – English – 12:55
CCV Lunch Order

10:10 Husson University Presentation

We are going to the library to hear from Ashlie Page, the Outreach Specialist for Husson University’s School of Technology and Innovation (SoTI). She will discuss Husson’s Bachelor of Science Degrees in Software Development, Computer Information Systems (CIS), and Extended Reality (XR).

10:50 Break

11:00 Cascading Stylesheets | Block/Inline Elements & Border Box!

Divs are nothing more than boxes. In fact, all of the elements you are using are basically boxes.

Some elements (boxes) take up the whole page left to right (we call those block elements!) Some examples of block level elements are: paragraphs, headings, lists, address, blockquotes, div, articles, sections, header, footer, form

Some elements are inline and take up a box or space (in the line) of the content they are found. Some examples of inline elements include b, em, var, button, label, span, abbr, small

Let’s tackle an issue out there that you might come across – border-box

By default, the width and height of an element is calculated like this:

width + padding + border = actual width of an element
height + padding + border = actual height of an element

If you think carefully, this can create a problem when trying to line up content on a webpage. If you set a width and height of an element to say 200px and add padding of 5px and a border of 1 px = well you may have a problem because the width and height of your box is no longer 200px!

Let’s build an example in CodePen together to see how this works. Then, let’s fix the problem.

To the rescue! – is the asterisk (*). The asterisk will apply a property and value to all elements. We will declare this in our Stylesheet. The *:before and *:after means this rule will apply to any pseudo elements too

*, *:before, *:after {
box-sizing: border-box;
}