Section 6 - CSS Properties Flashcards
What do you call the code that comes after the colon?
Ex:
html {
color: red
}
it’s called the value (red), what you want to set the property to
the property is first (color)
The way CSS rules work is that the first part is the ____
property
html {
background-color: red;
}
property is: background-color
If you’re not sure what a property does, what can you check?
the MDN docs
If you use the “color: blue” property and value, what does that do?
Changes the text color
What are named colors? Where can we find them? (2)
- All the colors we can use on our website (default CSS colors)
- We can find them by going Googling “MDN Docs named color”
What are hex codes?
A different way of representing the larger number code for the color instead of just “red”
(hex codes are for colors that are blended RGB)
What does the “font-family” property do?
sets the font typeface you want to use
What does the “font-weight” property do?
Allows you to apply bold, underline, italics, etc.
How big is 1px?
1/96th of an inch
or
0.26 mm
Besides pixels, what’s another common way to represent font size with CSS properties? What is its abbreviation?
using a point “pt”
The point property is used by what?
many different applications (like Word)
When you’re using 12 points on your web page, what can you expect it to look like in comparison?
When you’re using 12 points on your webpage, you can expect that when the website is at 100%, it will look about the same as a 12 font on your Word document.
What are the 4 different ways to represent font size in CSS properties?
- px (pixels)
- pt (point)
- em (relative to parent)
- rem (relative to root)
What is “em” definition?
defined as the full width of an “m” letter of the alphabet (since it’s one of the widest letters)
For font-size, how does “em” work?
You set a tag to have the “em” property (h4 for example), and if it has a parent it will inherit the size of the parent at a scale of the number in front of the “em”.
Example:
h3 font-size: 20px
{h4: 2em}
2 x (parent size, like 20px) = 40 px
What is “rem”? How does it work?
Works the same way as em except it’s relative to the root of your HTML file
What is the “root” of your HTML file?
Usually an <html> element that encloses everything inside (remember, from earlier lessons? The veggie burger layers?)
What method of changing the font size does she recommend using for web developers? Why? (2)
rem
(using em is too messy, rem is more consistent)
What type of font sizes are “pixel” and “point”?
static font sizes
What type of font sizes are “rem” and “em”?
relative font sizes
How do you use “rem” and “em” in code to set the font size?
rem {
font-size: 1rem;
}
font-size: 1em;
}
What is font-weight?
A property to change the font-weight: bold to make the text look heavier
(heavy -> weight -> bold)
h1 {
font-weight: bold
}
What are 3 ways to change the font-weight?
- Basic keywords
- Relative to parent (lighter or bolder)
- Number (100 - 900) light -> bold
What is “font-family”?
the (property) code we use that determines what you want your font to look like (typefaces)
(Values like: Helvetica, sans-serif, arial)
h1 {
font-family: Helvetica, sans-serif
}