Styling Flashcards
How can we style a button to be perfect square in CSS.
We could use height and width to style a perfect square
We could also use aspect-ratio set to 1 to style a perfect square.
How could be style a button to be a circle in CSS
We could style a circle by setting aspect-ratio: 1;
border-radius: 50%;
What syntax do we use when setting aspect-ratio in CSS?
aspect-ratio: width/height;
Does aspect-ratio work with non-replaced content?
Yes, aspect-ratio works with non-replaced content (divs, etc)
Where in most web-pages would aspect-ratio be useful?
When we are using a background-image as a Hero image, we can control its responsiveness with aspect-ratio
What is the default style for box-sizing?
What does this mean for the size of a box?
Content-box is the default for box-sizing
This means that padding and border-width are added to content size to determine the actual size of the box.
What is a typical reset value for box-sizing in CSS
box-sizing: border-box;
This resets the box width to be content, padding, and border combined.
What are percentage based width and height relative to?
They are relative to the space made available by the parent element
Where is the border color set?
It can be set either with a direct value
or
If not specified it will inherit the text color
What does the value currentColor do in Css?
It uses the current text color as the color value.
Do you need a border to declare a border-radius value?
No, you do not.
What is the difference between border and outline in CSS
Outline does not affect layout and does not change its size or move it.
What is the syntax for a outline declaration?
outline: [width] [style] [color];
You can also have outline-offset: [value];
Should we add styles to our heading elements (h1, h2, h3, etc)
Generally no, we should use utility classes to style elements and allow headings to retain semantic value.
Why should we avoid styling heading elements/
To reserve heading elements for semantic markup and accessibility.
How can we add a gradient to allow text to show a bit more clear?
background: linear-gradient(top color, bottom color)
What background effect might we use to make text pop?
we might use background: linear-gradient(top, bottom)
If we have a group of similar containers and would like to highlight one with different colors, what might be an option?
To highlight a single card or container, we might locally redefine a primary variable with new values
–primary-clr: var(–accent-clr)
How to we alter the value of a variable based on a media query in CSS?
We can redefine the :root variable value in a media query
@media (min-width: 800px) {
:root {
–font-size: 3rem }
}
Where is the before pseudo-element inserted (::before)?
It is inserted before the content of the element selector, not before the element itself.
Where is the after pseudo-selector inserted (::after)?
it is inserted after the content on the selector (not after the selector itself)
Can we use ::before or ::after with images?
No, because images are replaced content, they don’t actually have content per-se
When should we add breakpoints to our CSS?
We should consider looking at our layout and basing breakpoints on when the layout begins to fail.
When does em not scale relative to the parent element’s font-size?
When we use em to control padding on an element, the padding relative size is based on the font-size of the element with the padding.
What is the main benefit of setting padding and margins of elements containing typography in ems?
The main benefit is that these paddings and margins will scale when font-size changes with styling or media queries.
With the :last-child pseudo-class, where is the “last-child” determined from?
The :last-child pseudo-class looks to see if the prepended selector is the last-child of an element, and will apply the style rule to that selector:
li:last-child - looks for an li that is the last-child of a parent element. If is exists, that li get the style rule applied.
