thndev878/vit-wk2-css

CSS instruction and practice

vit-wk2-css

CSS instruction and practice

Learning objectives

Box model IDs and Classes Borders em and rem

Getting started

We have three

elements that we are going to mess around with today and tomorrow. I will teach you the Box Model, how margins and padding work, borders, background, fonts, and flexbox- the king of the Mobile Web!

Notes

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. 

Easy way to remember the Box Model

You pad your content so that it doesn't get hurt crashing into the border. You add margins so your elements don't collide. 

Things the Box Model can do

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]

Exercise

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)

IDs and Classes

• 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