Class hours: 10:05 – 2:45
Mr. Bohmann | email@example.com
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).
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
12:25 Independent Reading
1:00 Production Time and Guided Support
- About Me
- Head Shot
- HTML Resume
- Past Due Work
- 20% Exploration
- HTML/CSS Challenge Design (if you want to try – reward available)
Dailies can be placed in the CAWD2 Dailies Folder on the CAWD2 Public Folders drive