CSS instruction and practice
Box model IDs and Classes Borders em and rem
We have three
Box Model: The box model applies to (nearly) all HTML elements that you will use and create. When it doesn't apply, you can FORCE the box model into compliance with a bit of CSS. So what is the box model?
You can read about it here: https://www.w3schools.com/css/css_boxmodel.asp
Or you can play along with me and learn by doing, your choice. Let's open up our index.html file and get started.
You pad your content so that it doesn't get hurt crashing into the border. You add margins so your elements don't collide.
You can adjust any aspect of the Box. If you need a margin on top, so be it. Need padding only on the left or right? No sweat. When adjusting any feature of the box, you can shortcut following "top-right-bottom-left". This includes borders, radius values, etc. If it applies to the box model, it is top-right-bottom-left.
You *can* use pixel values, but it is better to use percentage, viewport height (vh), viewport width (vw), rem, or em [more on these later]
Using the testing.html file
- adjust the border of the elements possible value changes: solid, dotted, double, groove, ridge, inset, outset, none, hidden
- adjust the margin and padding of the elements values can be auto, px, em, rem, (or one of many other values)
- a way to select one or more elements by attribute value
- id is unique, can only be used once on a single page
- classes identify one or more elements that have a shared class name
- these do not have to be the same type of element