# Let's Talk Style
# First, let's review CSS box-sizing
Activate!
In groups of 3, recreate Andrew's styled sample class site.
- Downloading the starter code here
- Review the design mock and discuss the css properties needed to achieve this design.
- Write the CSS in the
style.cssprovided DO NOT TOUCH THE HTML. You may only edit the CSS
- Bonus: if you finish early, try to implement the interactive
:hoverelements on the page (Ask Andrew to show you the interactions)
Let's take a break? 😅
# Review The CSS Cascade
# Talk about default browser styles and resets/defaults to begin a project
/* Set box-sizing to border-box for all elements */
html {
box-sizing: border-box;
font-size: 62.5%;
/* I set font-size to 62.5% so default font-size is 10px so 1.6rem = 16px
it also responds to user's base browser text size because it's a percentage */
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* Reset margins and paddings on most elements */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
margin: 0;
padding: 0;
}
/* Reset forms and buttons */
input,
textarea,
select,
button {
color: inherit;
font: inherit;
letter-spacing: inherit;
}
# Layout with Flexbox display: flex
.parent-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
... and a ton of other possibilities;
}
Get started on the homework