CSS Flashcards
What are the names of the individual pieces of a CSS rule?
selectors
declaration block
property:value (also called declaration)
In CSS, how do you select elements by their class attribute?
using a “.” in front of the class name
In CSS, how do you select elements by their tag name?
use an element name
In CSS, how do you select an element by its id attribute?
using # in front of the id name
Name three different types of values you can use to specify colors in CSS.
RBG
HEX
Color name
What CSS properties make up the box model?
width
height
padding
border
margin
Which CSS property pushes boxes away from each other?
margin –> youre like gaining weight
Which CSS property add space between a box’s content and its border?
padding –> it’s like wearing a big puffy jacket
things inside is the same but outside is getting bigger
What is a pseudo-class?
it is a class that gives a special effect to the selector whether it’s for the user or where it falls on html document.
What are CSS pseudo-classes useful for?
allows style changes and it allows users to interact with the elements
Name two types of units that can be used to adjust font-size in CSS.
px
%
em
What CSS property controls the font used for the text inside an element?
font-size
What is the default flex-direction of a flex container?
row
what is the default flex-wrap of a flex container?
try to fit in one line but it can wrap as needed
Why do two div elements “vertically stack” on one another by default?
because div is a block element
What is the default flex-direction of an element with display: flex?
to make the direction into a row –> left to right
What are the three primary components of a page layout? (Which helper classes do you need?)
container
row
column
What is the minimum number of columns that you should put in a row?
1
What is the purpose of a container?
to confine all the content into one box
what is the purpose of the row class
to declare that there is a new row formed on the page layout
one vertical chunk and there is a row
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
it allows the element to move relative to where it was supposed to be
if you move it around, the sibling will still think that you are in the same place still even if it’s not
How does setting position: relative on an element affect where it appears on the page?
it moves relative to its original position
How does setting position: absolute on an element affect document flow?
the element will stay on the page position while the page move up and down
element removed from the page - act as if it’s not there from the document
absolute is useful for layering
