CSS Flashcards
What are CSS margins?
Margins create space around elements, outside of any defined borders
How is clockwise notation used in CSS?
It is used to specify things like borders, margins and padding
What is clockwise notation in CSS?
It describes the order in which to apply styling of a particular attribute (top, right, bottom, left)
How would you move an element to the left of it’s container?
#my-element{
float: left;
}What symbol identifies a class in CSS?
.
What symbol identifies an id in CSS?
#
What casing type is used within a style element?
kebab-case
How would you specify all elements of a certain type should appear beneath a “floated” element?
element{
clear: both;
}
What is the difference between inline and block in CSS?
Inline occurs within the “line-level” (i.e. within a sentence), whereas block represents its own HTML block
What is a CSS pseudo element?
A keyword added to a selector that lets you style a specific part of the selected element
What are CSS selectors?
The “name” given within a style element that designates the element(s) to be styled (i.e. p {})
How is pseudo element syntax different from pseudo class syntax within the style tag?
Pseudo elements are prefixed with two colons whereas pseudo classes use one (:: vs :)
Where are ::before and ::after pseudo elements positioned in respect to the parent element?
Within the parent element and before (or after) the content that the parent element contains
Can CSS images have pseudo elements?
No
In CSS, how would you create a strip above and below the content of an element without using additional elements?
Use ::before and ::after pseudo elements with a display:block attribute
How would you create a CSS selector for only h3 elements that have an attribute called heading-attribute
h3[heading-attribute] {}
Using purely CSS, how would you display the value of a custom HTML attribute within the element’s displayed content?
#html-element {
content: attr(custom-attr-name);
}How would you remove text wrapping in an html element?
#element {
white-space: nowrap;
}What do CSS transitions do?
Make the transitions between two different states of an element (i.e. increase width using :hover)
Using pure CSS, how would you create a CSS variable?
Within a parent element, use “–variable-name: variable-value;” syntax and then refer to the variable within the children’s styling (i.e. background: –variable-name)
What are all of the transition properties?
transition, transition-delay, transition-duration, transition-property, transition-timing-function
Why should you use milliseconds as opposed to fractions of a second for transition timing in CSS?
Both are effectively the same for CSS, but JavaScript only accepts milliseconds
What is the best CSS practice for defining multiple “transition-property” properties (i.e. a rotating and color-changing element)?
transition-property: property-one, property-two;
because the “all” value can be excessively CPU heavy
In CSS, what does the transition-timing-function property do?
Specifies how the transition will be timed (does it ease in or out?)
How would you add a gradient to text using CSS?
Add the following to the text element’s styling:
background-image: INSERT_GRADIENT;
background-clip: text;
color: transparent;
What is the name for a CSS property that is taken from a parent element?
Inherited property
How do you add an animation to a CSS property?
Create the animation using “@keyframes” followed by the animation name (a.k.a. keyframes selector) and add the “animation: ANIMATION_NAME” property to the element’s CSS
In CSS, what problem do clearfixes address?
Without one, when child elements are all floated, the parent element will go to 0px and disappear from the page
What is the syntax for a CSS clearfix?
.parent-element::after {
content: "";
clear: both;
display: table;
}How would you get two elements to populate side-by-side?
You can use floats, CSS grid, or flexbox - float likely has the best compatibility, but flex allows for better layouts (flex syntax is “display: flex;”)
In CSS, what does “display: inline-block” do?
It causes all of the content of the styled element to display inline (if it has multiple child elements or a list, they would display alongside one another)
What are the aspects of CSS called that you use to designate a change in style (i.e. color, font-size, etc)
CSS properties
What does hsl stand for as a CSS property?
Hue, Saturation and Lightness.
Syntax: hsl(240, 100%, 75%)
In CSS, what range of values exist for hue (think hsl)?
0-360
In CSS, what are hue numbers for red, green and blue?
Red: 0
Green: 120
Blue: 240
In CSS, what is a “declaration”?
The property-value pair (i.e. color: red;)
In CSS, what is a “rule”?
The selector and all of its declarations
In CSS shorthand, how would you declare 20px top and bottom margins and 30px on either side?
margin: 20px 30px;
In CSS shorthand, how would you declare 20px top margin, and 30px on either side, and 40px bottom margin?
margin: 20px 30px 40px;
What are the 3 properties it takes to create a border in CSS?
border-width
border-color
border-style
In CSS, what is the shorthand for borders?
Add the width, style and color in any order to the “border” property
(i.e. border: 3px solid blue;)
Using CSS, how would you add a border to a single side of an element?
border-left, border-right, border-bottom, or border-top
In CSS, if an element has a border using “border: 20px blue solid;”, how would you change the style/color of the bottom to dotted?
border-bottom-style: dotted;
border-bottom-color: yellow;
In the box model, what are the 4 parts of an element?
content,
padding,
margin,
border
In CSS, what happens when you use a “margin-left: auto” declaration?
All available space fills in on the left margin
In CSS, how do you center an element?
margin: 0 auto;
In CSS, why does the body element have a default margin value?
It would prevent unstyled HTML text from touching the sides of the window, which ins’t visually appealing
In CSS, how do you make an element span the entire width of the page, as opposed to the small space on each side?
body {
margin: 0;
}
How do you make a group of elements into a column-structure using flexbox?
In their parent element, declare “display: flex;”
In CSS, what happens to h1-h6 elements when you increase the default font-size of the body? ex:
body {
font-size: 21px;
}
The headings increase in size; oftentimes, when changing the default body font-size, the headings’ font-sizes are also changed
In CSS, how would you affect the text size and justification of all child elements?
.parent-class {
text-align: ALIGNMENT-VALUE;
font-size: FONT-VALUE;
}
In CSS, what is the default margin above and below text-related elements?
The font-size of the element (unless it is an h1 element, where it’s slightly smaller)
In CSS, what is meant by “collapsing margins”?
Margin values “collapse” into one another
If a top-element has a margin-bottom: 40px; and a bottom-element has a margin-top: 35px; - there will only be 40px between them, not 75
In CSS, how do you prevent a parent element’s top margin from merging with their first child’s top margin?
Add padding on the top for the parent element
Why should you turn off the margin-top default for typography elements?
The margins add extra space and reduce spacing consistency when typography elements are used within a container
What is the use case for a “span” element in CSS?
Targeted styling of inline text using a class
What are the different pseudo-class states that can be styled for links in CSS?
\:link \:visited \:focus \:hover \:active
What is the “active” pseudo class in CSS?
On click, the active styling comes into effect
What is the “focus” pseudo class in CSS?
It represents the current element that is in “focus” (think of navigating a page with the keyboard and traversing interactive elements)
What is the syntax to apply the same style to two CSS selectors at once?
Both selectors separated by a comma
a:link, .sample-class {
color: hsl(20, 100%, 55%);
}
In CSS, at minimum, what 4 pseudo classes should be styled for “link” elements?
:link
:hover
:active
:focus
In CSS, what order should link pseudo classes be declared in?
\:link \:visited \:focus \:hover \:active
What is considered best practice when you want to change the default size of your “p” elements?
Changing the font-size attribute of the body instead to also affect other elements (i.e. “a”) that aren’t within a “p” element
What is inheritance in CSS?
“Child elements” of a parent inherit certain properties from that parent
How would you make a font bold using CSS?
font-weight: bold;
What should you use for testing the views of different machine types (i.e. iPhone X vs 24” computer screen)?
Emulators such as “Chrome Device Mode”
What is the most common use case for inline-block elements?
Creating inline “buttons”
What are inline-block elements?
Elements that are inline, but can be styled and treated as if they were a block element
When making non-form-related buttons in CSS, why must you style the “a” element and not its parent?
Padding around a parent element is unclickable, whereas padding in an “a” element provides the expected behavior
What is a good ratio for custom button padding?
1:2.5 vertical to horizontal. Ex:
.button {
padding: 20px 50px;
}
What happens if you declare a class color of green, then afterwards style the element of that class with a color or blue?
It will remain green because of CSS specificity rules
In CSS, what is the syntax for compound selectors?
Both selector names separated by a space. Ex:
selector-one selector-two {
…
}
In CSS, why do you want to apply a lot of styling to the “body” element?
This applies all general rules to a central location for each element that can then be overwritten through specificity
What is the use case for compound selectors in CSS?
When you have multiple sections of a page that follow the same layout but require different styling
What is the syntax for a CSS selector that refers to a “btn” class in the “section-one” section for both the hover and focus styling?
.section-one .btn:hover, .section-one .btn:focus {
…
}
How could you avoid using compound selectors in CSS?
Use very specific class names that allow you to more easily target your elements
Why are compound selectors generally avoided?
They can become too obfuscated as to what they’re styling and cause specificity wars within the CSS
What’s the best alternative to compound selectors for avoiding repetitive code?
Use multiple classes to style a more generic version (modifier class) with the common styling. Ex:
<a>Click me</a>
What is a modifier class in CSS?
A generic class used to modify similar elements without rewriting code. Ex:
“btn” vs. “small-submit-btn”
In CSS, why is it best practice to avoid colors in class names?
If the color scheme ever changes, you’d need to refactor much more CSS
What is the CSS property for changing the font?
font-family
