CSS Flashcards
CSS
Cascading style sheets
GOLDEN RULE
CSS
separation of concern
Style
CSS examples
Style, Color, Positioning
An_____can wrap text Inside a paragraph
<span>Like this</span>
Without disrupting the flow of that paragraph. I. E. Span
Inline element
When you set box-sizing: border-box; on an element, the padding and the border of the element no longer increase its width. They are the_____.
Same size
Another common display value is_____. Some specialized elements such as script use this as their default. It is commonly used with JavaScript to hide and show elements without really deleting and recreating them.
None
Box model:
.simple vs .Fancy with the same width and margins.
.Simple equals smaller
.Fancy equals bigger
Two elements with the same width value end up different sizes in the result.
How do you select an element next to direct descendent? (Parent child)
P > P{
Color: red;
}
This is red
How do you select an element without to a direct Descendent.. (grandchild)
(Section space P)
section P{
Color: red;
}
Section
Article
<p>this is red</p>
How do you select a next sibling descendent parent child relationship? (Next sibling)
P + p{
Color: red;
}
Section
<p>Hello twitch</p>
<p>This is red</p>
What is this?
P{
Color: red ;
Don’t weight: bold;
}
Everything in brackets, except for p.
Declaration box
What is this?
P{
Color: red ;
Font weight: bold;
}
The color and font weight.
Properties
What is this?
P{
Color: red ;
Don’t weight: bold;
}
Red and bold.
Values
What is this?
P{
Color: red ;
Font weight: bold;
}
Font weight and bold or color and red.
Decorations
What is this?
P{
Color: red ;
Don’t weight: bold;
}
The P
Selector
What is this?
P{
Color: red ;
Don’t weight: bold;
}
Everything
Rule
Setting display to_____will hide the element, but the element will still take up the space it would if it was fully visible.
Visibility: Hidden;
CSS separation of concern is_______.
Style
_____Is the standard block level element. A block level element starts on a new line and stretches out to the left and right as far as that can.
div
Why do we link to a separate CSS file?
Separation of concerns
(Organization)
What type of relationship is this?
Parent>child?
Direct
What type of relationship is this?
Parent child
Not direct
It says find me something inside some thing that’s not directly Descended. It does not matter how deep it is.
Grandchild
What type of relationship is this?
Previous sibling + next sibling
P + p
Select an element that is next to a sibling
In a box model, what moves content around? (BULLY)
Margin
