CSS Basics Flashcards
(22 cards)
What will the font color be of this h2 element given the following selector property values?
h2 {
color: blue;
color: red;
}
Red. CSS stands for cascading style sheets; the cascading part applies here. The later property value will overwrite the first one.
Consider the following CSS font-family: font-family: Jazzier, Garamond, serif; If Jazzier is not found on the local user’s computer, what font will load?
It will try Garamond before falling back to serif.
Consider the following font-family: font-family: Arial, 'Helvetica', sans-serif;. Arial is invalid because it is not in quotations, true or false?
False. Quotes are optional for font names without spaces.
In HTML, everything visible on the screen is a descendant of the body element, true or false?
True
Consider the following selectors:
body {
font-family: sans-serif;
color: #1b281b
}
header{
text-align: center;
}
What will the color of the header font be? Why?
1b281b (black). This color is inherited from the parent (body).
Consider the following selectors:
body {
font-family: sans-serif;
color: #1b281b
}
h1 {
color: #4676a9;
text-align: center;
}
What will the color of the h1 font be? Why?
4676a9 (blue). The child (h1) has broken inheritance from its parent (body) and declared its own color.
What does the font-size selector represent?
Indicates the desired height of glyphs from the font. For scalable fonts, the font-size is a scale factor applied to the EM unit of the font.
What does the font-weight selector represent?
Specifies weight of glyphs in the font, their degree of blackness or stroke thickness.
What are User Agent Stylesheet?
Default styles coming from the browser.
Consider the following selector:
a {
color: inherit;
}
Assume that there is a <p> element that contains a link (<a>). What color will that link be?
The link color will inherit from the parent that contains it. This selector is used to override the User Agent Stylesheet.
Consider the following selectors:
html {
font-size: 50px;
}
h1 {
font-size: 2rem;
}
What is the size of the h1 font, in pixels?
-
remrepresents the root relative size. 2em is relative to 50px and will thus be twice as large (100px). If it were 3em, theh1font would be 150px.
What is the default font-size on an html element, in terms of pixels?
16px, but this can be changed by user preference.
The line-height selector does what?
Controls the space between the lines inside a block of text
The margin selector does what?
The space between individual blocks of text
What is the default line-height?
1.4
The logical version of a block’s height selector is ________
block-size. Use sparingly. It’s an easy way to cause overlap!
Consider a block element’s size. It’s width is as _____ as it can be, and its height is as _____ as possible.
wide; small. Blocks take up the full width of the screen and occupy as little height as possible. As the page narrows, the width will contract and the height will increase.
The ______ selector is the logical version of a block’s width.
inline-height
How many values can you provide to the padding selector?
- For example,
padding: 10px 20px 30px 40px;. This applies the padding in a clockwise order, starting from the top. You can also supply 1, 2, or 3 values.
the border short-hand selector can accept three arguments, the order of which does not matter. True or false?
True. For example, the following selector is valid: border: solid 10px red;.
margin and padding both add empty space. Which includes the background?
padding
What selector can we use to apply values to every element?
*
