CSS Flashcards
(36 cards)
What are the names of the individual pieces of a CSS ruleset?
- Selector
- Declaration (comprised of a property and its value)
In CSS, how do you select elements by their class attribute?
With the class selector
Ex. .note { } - targets any elements whose class attribute is note
In CSS, how do you select elements by their type?
You select the elements with their name and { }
Ex. h1 { } - this will select all h1 elements
In CSS, how do you select an element by its id attribute?
With the id selector #
Ex. #introduction - targets the element whose id attribute has the value of introduction
Name three different types of values you can use to specify colors in CSS.
- rgb value (red, green, blue)
- Values are expressed between 0 and 255
- Ex. rgb (102, 205, 170)
- hex codes
- has 6 characters
- Ex. #66cdaa
-color names
What CSS properties make up the box model?
Margin, padding, border, width, height
*Width & height = content of box
Which CSS property pushes boxes away from each other?
Margin
Which CSS property adds space between a box’s content and its border?
Padding
What is a pseudo-class?
Keywords added to a selector that specifies a special state of the selected elements
Ex. “ : hover “ can be used to change a button’s color when the user’s pointer hovers over it
What are CSS pseudo-classes useful for?
It is useful for applying styling to an element that is not only in relation to the content but also in relation to external factors (also good for visual and interactive purposes)
Name two types of units that can be used to adjust font-size in CSS.
Pixels, percentages, ems
What CSS property controls the font used for the text inside an element?
Font-family property
What is the default flex-direction of a flex container?
Row (left to right)
What is the default flex-wrap of a flex container?
Nowrap (all flex items will be on one line)
Why do two div elements “vertically stack” on one another by default?
They are block-line elements and block line elements start on new lines
What is the default flex-direction of an element with display: flex?
Row (left to right)
What is the default value for the position property of HTML elements?
Position: static (block-level elements sit on top of each other)
How does setting position: relative on an element affect document flow?
It’ll still remain in flow with the document just like static properties but the only difference is that now its positioned elsewhere
How does setting position: relative on an element affect where it appears on the page?
It’s still in the same in the position on the page, it is just offsetted if an offset property is set
How does setting position: absolute on an element affect document flow?
It no longers exist on the document flow
How does setting position: absolute on an element affect where it appears on the page?
Its positioned next to the closest non static position value
How do you constrain an absolutely positioned element to a containing block?
With any properties that isn’t static (absolute or relative)
What are the four box offset properties?
top , bottom, left, right
What are the four components of “the Cascade”.
- Source order
- Inheritance
- Specificity
- !important
