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
}
With the font-family property, what is often done and is also a very important step?
You write the font name, then a comma and a backup generic font type (that’s equivalent) in case the first font name isn’t available on that OS
h1 {
font-family: Helvetica, sans-serif
}
What’s the difference between sans-serif and serif? (2)
sans-serif font type is basically all right angles
serif has little feet/decorations
Helvetica is the same as.. ?
sans-serif (which is why it’s used as a backup in the font-family)
Times New Roman is the same as…?
serif
What are the 2 main types of different typefaces?
sans-serif
serif
(Helvetica, Times New Roman)
How do you code a longer font name with spaces?
You add quotation marks around the font in order to tell the CSS file there’s spaces in the name
h3 {
font-family: “Times New Roman”, serif
}
What’s a way to insert a link into your file that will pull in a font from the internet for any user regardless of OS? (Step 1)
Use the embed code from fonts.google.com for example, insert it under the <style> element but still in the head section</style>
On Windows, what’s the default sans-serif type font?
Arial
What’s the 2nd step to linking a custom online google font to your webpage?
Add in the copied bottom section of the Google font code (CSS class for a variable style) to your targeted element using a desired selector (in the CSS section)
h1 {
font-family: “Caveat”, cursive;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}
The generic fonts you see depend on the computer and browser you use. T or F?
True
(that’s why you can specify and link to a specific font so it’s the same for everyone)
What property do you use to align text?
text-align
h1 {
text-align: center
}
What are 4 examples (there’s more) of values Angela says we can use with the text-align property?
- left
- right
- start
- end
Do changes that you make to the CSS in Chrome Developer Tool affect the original file?
No
What’s the reason that some CSS code is striked out in the Chrome Developer Tools?
We applied a custom CSS rule that conflicts with the automatic, default rules
(our own rules override existing rules like default font color)
What’s the purpose of the “Computed” tab in the Chrome Developer Tools?
You can see in one place what’s being applied (a cleaner way to see)
like how much of RGB is being applied to the text font color
What’s the purpose of the “Elements” tab in the Chrome Developer Tools?
Under Styles, it shows us the styles that have been applied to the elements we select
What forms the important CSS concept known as the “Box model”? (5)
- Margin
- Padding
- Border
- Width
- Height
How many values can the border property take?
3
Border: 10px solid black
For the box model, what are the 2 ways we can add numbers?
- pixels
- percentages
height: 300px;
width: 100%;
One important thing to remember in terms of width/height when changing the border size is?
changing the border size does not change the height/width (it remains unaffected by changes)
border size increases -> increases outwards not inwards
How many values can border-width take?
4 values maximum
In what direction does border-width go in when assigning values?
clockwise (when assigning values)
What happens when you only set 2 values for border-width?
(q: only done with border-width? unsure)
the first number is for the top/bottom
the second number is for the left/right
0px 20px
What does the ‘padding’ property do?
adds padding/space between the element and the border
What does the ‘margin’ property target?
the outside of the border, the spacing between elements and other divs
Why is the box model useful?
It’s really, really handy when adding items to your website and determining how they look and are placed relative to each other
What 3 box model properties function the same way when it comes to values?
(they can all accept multiple values)
- padding
- margin
- border-width
(clockwise values)
What is the content division element used for?
to create our own “custom” invisible boxes to wrap around elements
content goes in between tags, as many elements as we want
What tag is used for the content division element?
<div> </div>
<div> </div>
What are “divs”?
The separate boxes containing content in between the opening and closing tags
(separate, custom content boxes)
