CSS Flashcards
What are the names of the individual pieces of a CSS rule?
A selector which points to the html element to be styled –followed by a declaration block within curly braces.
The declaration block contains declarations consisting of properties and values, and are separated from one another with semicolons.
p {
font-family: sans-serif;
color: orange;
}
(Semicolons are not required after the last declaration, but it is good practice nonetheless.)
In CSS, how do you select elements by theirclassattribute?
A period followed by the class name.
.note {
color: red;
}
In CSS, how do you select elements by their type?
Simply state the element name.
h1 {
font-size: 20px;
}
In CSS, how do you select an element by itsidattribute?
The pound key followed by the id name.
#introduction {
color: blue;
}
Name three different types of values you can use to specify colors in CSS.
color names/keywords
color: purple;
HEX codes
color: #rrggbb;
RGB values
color: rgb(180, 180, 180);
(RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.)
color: rgba(255, 99, 71, 0.5);
What CSS properties make up the box model?
Border, margin, and padding.
Content is not a property of the box model, but it is still a piece of the entire box model.
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 box-sizing: border-box ?
border-boxtells the browser to account for any border and padding in the values you specify for an element’s width and height.
If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
box-sizing: border-boxis the default styling that browsers use for thetable,select, andbuttonelements, and forinputelements whose type isradio,checkbox,reset,button,submit,color, orsearch.
What is a pseudo-class?
Pseudo-classes allow you to change the appearance of elements when a user is interacting with them.
What are CSS pseudo-classes useful for?
They are useful for visual representation to a user with interacting with a page, such as the color of a button changing color when their mouse is hovering over it, or a link changing colors after a user has clicked on it, so they can see which link they have already visited..
Name at least two units of type size in CSS.
Pixels
Percentages
Em
Rem
Recommendation is to stick to rem over em
Em and rem are similar but work slightly differently
Em is the width of letter m
1 em is default font size
Rem stands for root em
default font size is 16px
so 2rem would be 32px
Rems maintain ratio, only need to change html font to affect everything else
Ems do not maintain ratio
What CSS property controls the font used for the text inside an element?
Font-family
What is the defaultflex-directionof aflexcontainer?
row
What is the defaultflex-wrapof aflexcontainer?
nowrap
What does vh stand for?
vh stands for viewport height
Min-height: 100vh is setting it to 100% of the viewable webpage
Do not use vw (viewport width),
when it comes to width, just stick to percentages
Why do two div elements “vertically stack” on one another by default?
Because div elements are block elements and so therefore they always start on a new line, and take up as much width as is available.
What is the defaultflex-directionof an element withdisplay: flex?
A row
What is thedefaultvalue for thepositionproperty of HTML elements?
(Normal flow) position: static
How does settingposition: relativeon an element affect document flow?
It does not affect document flow.
It does not affect the position of surrounding elements; they stay in the position they would be in normal flow..
And the element set to relative will stay in the same position as well until given offset values.
How does settingposition: relativeon an element affect where it appears on the page?
Relative positioning moves an element in relation to where it would have been in normal flow.
You can move it lower, higher, to the left, or to the right
How does settingposition: absoluteon an element affect document flow?
It is taken out of normal flow and no longer affects the position of other elements on the page.
Absolute positioning positions an element in relation to its containing element. It is taken out of normal flow, meaning that it does not affect the position of any surrounding elements (as they simply ignore the space it would have taken up).
Absolute positioned elements move as users scroll up and down the page.
How does settingposition: absoluteon an element affect where it appears on the page?
It appears in relation to its container, and moves as the user scrolls. You can specify where exactly it will sit on the page with the top, bottom, left, and right properties.
It can be stacked on top of the other elements since they ignore it.
Absolutely positioned elements position themselves within the first non-static ancestor they have.
If no non-static container exists, it positions itself within the viewport.
How do you constrain an absolutely positioned element to a containing block?
Absolutely positioned elements position themselves within the first non-static ancestor they have.
Put it inside an ancestor block with a non-static positioning, like position: relative.
The element with relative position will still act the same (unless given offset properties), and the absolute positioned element will now be contained within that parent element.
What are the four box offset properties?
Top, bottom, left, right
What are the four components of “the Cascade”.
Source Order/Last Rule
If two sectors are identical, the latter of the two will take precedence.
Inheritance
Inheritance is the process by which certain CSS properties on a child HTML element can receive value from a parent element, if no CSS for that property is directly declared on the child element.
Specificity
If one selector is more specific than the others, the more specific rule will take precedence over more general ones.
!important
You can add !important after any property value to indicate that it should be considered more important than other rules that apply to the same element.
What does the term “source order” mean with respect to CSS?
Source order is, simply put, the order that your CSS rules are written in your stylesheet. The styling provided for an elementlastin your stylesheet is the styling that will ultimately take effect.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritance
In CSS,inheritancecontrols what happens when no value is specified for a property on an element.
CSS properties can be categorized into two types: inherited properties and non-inherited properties When no value for an inherited property has been specified on an element, the element receives the value for that property that was applied to the parent. This inheritance saves us from having to apply properties to every single element and results in simpler stylesheets. You can also force properties to inherit values by using an “inherit” value for a given property padding: inherit;
List the three selector types in order of increasing specificity.
type selectors class selectors ID selectors
Why is using!importantconsidered bad practice?
!important is considered bad practice and to be avoided because it makes debugging more difficult by breaking the natural cascading in stylesheets. It cannot be overrode and therefore should not reused.
