We’re setting up the CSS for our project. We can make tweaks later to make it nicer, but it’s nice to have the page looking like something before you focus on the function of the page. It’s hard to even look at until you have some basic CSS in place.

body {margin: 5%;}  This puts a border around the whole page. I like to do this to make sure nothing’s smooshed up to the edge of the page. Just look at this page. Every page has a margin around it unless it’s a full-page picture or something.

h2 {margin: 1rem 0;}  This puts a margin of 1 font-sized space above and beneath the headings in that font size and no margins on the sides of them. If I put a margin on the side, it would whack it out of alignment with whatever else was in its column that wasn’t h2.

.flex {

display: flex;

justify-content: center;

flex-wrap: wrap;

}  This is for all elements in a flex box. It’s a class, so I can just have this for all them instead of setting it for each section by itself by ID.

.flexColumn {

display: flex;

flex-direction: column;

margin: 0 2rem;

width: 30%;

}  This is the same idea, but for things in a column. When you use something like width 30%, you need to check what it looks like on a small screen, like a cell phone. It may need an adjustment for a small screen.

#draw {

border: solid 2px #000;

width: 8rem;

height: 2.5rem;

text-align: center;

cursor: pointer;

}  This is the box they click on to get a new card. Later I’ll probably want to add effects to make it look like a button, such as shadowing or a hover effect.

.number {font-size: 3rem;}  This gives us a big number on our cards.

.suit {width: 15rem;}  This sets a width for the suit area.

.suit img {

padding:.3rem;

width: 15%;

}  These are the images such as hearts.

.player {

border: solid 1px #000;

width: 15rem;

height: 20rem;

text-align:center;

}  This is the player boxes where their cards show up.

@media only screen and (max-width: 850px) {

.flex{

flex-direction: column;

}

.flexColumn {

margin: 1rem;

}

}  This media query changes the layout of the page when it gets smaller. The cards won’t work all spread out any more.

You can see the video of this lesson.