Week 4 Flashcards
What does this do? What is its default behaviour?
body { background-image:url(‘java.png’)
}
Sets the background as image. By default the image will repeat horizontally and vertically.
T/F - You can specify all properties in a property when using the background shorthand
True.
body {
}
T/F - You can specify all properties in a single property when using the background shorthand
True.
body {
background:color imageurl etc.
}
T/F - color: is used to set the background color in CSS
False. It’s used to set text color.
I would use this if I wanted to put an overline, line-through, or underline on my text
text-decoration
I would use this if I wanted to specify that certain text should be all uppercase or lowercase
text-transform
Cascading algorithm - 4 rules
- Importance - Imp. of each declaration (!important)
- Specificity - Of the CSS selectors
- Order - of the declarations in the source code
- Inheritance
<p>
Very pretty, very stylish
</p>
p {
color: blue;
}
p {
color: red;
}
What color is the text?
Red, due to order
Location - When styles conflict the _______ wins
nearest (most recently applied)
Internal CSS
Browser
Inline Style
External CSS
List them from weakest to strongest
Browser > External CSS > Internal CSS > Inline Style
T/F - The more specific the selector, the stronger the rule
True
p id=”text”>
Very pretty, very stylish
p>
text {
color: blue;
}
p {
color: red;
}
What color is the text?
Blue, since it’s more specific (id is the most specific there is)
p id=”text”>
Hello World!
p>
(id)text {
color: blue;
}
p {
color: red;
text-decoration: underline;
}
What colour is the text?
Blue with an underline (Specificity with the ID)
div
p id=”text”
Hello World!
/p
/div
div {
color: red;
text-decoration: underline;
}
What colour will the text be?
Red, Since there’s no conflict the red is inherited from the div parent
div
p id=”text”
Hello World!
p
div
(id)text {
color: blue;
}
div {
color: red;
text-decoration: underline;
}
What colour will the text be?
Blue, with a red underline - Text is specific, but the text-decoration is set in the div class, so it’s unaffected
T/F - Browsers have a default style
True
(*){
margin: 0
padding: 0
}
This resets padding and margins. Why?
The Universal Selector * matches every element, which makes it good for broad actions like above
T/F - You can only include multiple style sheets through the HTML document
False. You can also use the @import tool to link multiple css pages together
In CSS, units of measurement are ________ units and ________ units
relative and absolute units
Relative units are based on the _____ of the root font, while absolute units have a ____-_____ size
size, what absolute units have a real-world size
1em is equal to the current
font size, meaning it’s a relative unit
1pt is equal to 1/72 of an inch, meaning
It’s an absolute unit, px is the same (neither scale)
100% is equal to
The current font size, meanings it’s a relative unit (scales)
Viewport-percentage lengths: __ and __. These are relative to the size of the initial containing block. How much is 1 __ unit or __ unit compared to the initial containing block?
vw and vh. They’re 1% of the height/width
This is what it looks like
body { width: 80vw; }
main { width: 90%;
min-height: 100vh; }
rem is the font size ________ to the ____ element of the web page
relative to the root element (size of the text in the html element)
Quickly name what these font properties do
font-family
font-size
font-style
font-weight
font-variant
font-family - type of font
font size - size of font (can be units other than pt)
font-style - italic, oblique, normal
font-weight - bold or light
font-variant - normal, small caps
This selector allows you to use a font even if it’s not installed on the user’s computer
@font-face
In the CSS Box model
width = content width + / _______ + / b_____ + / ___g__
You can also set the height and width of the element using the h/w properties
In the CSS Box model
height = content height + L/R padding + L/R border + L/R margin
You can also set the height and width of the element using the h/w properties
T/F - Padding defines a space between the element border and the element content
True
padding-top: 20px
Shorthand= padding: 20px
T/F - Borders can be grooved, ridged, outset, inset, dotted
True. They can also be set to none
“In CSS, the adjoining margins or two or more boxes can combine to from a single margin” Where does this definition come from? What about horizontal margins?
That’s the W3C definition of collapsing margins. Horizontal margins never collapse.
