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; }
