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
