CSS Flashcards
What are the names of the individual pieces of a CSS rule?
selector: indicates which elements to apply styling to
declaration: includes properties and values; indicates how the element(s) should be styled
How do you select elements by their class attribute?
with a period;
Ex: .class
How do you select elements by their tag name?
Just use the name of the element’s tag.
How do you select an element by its id attribute
Use a #
Ex: #id
Name 3 different types of values you can use to specify colors in CSS.
rgb: values for red, green, blue expressed as numbers between 0 and 255
hex: represent values for red, green blue in hexidecimal code
color name: predetermined, limited
What CSS properties make up the box model?
Margin, padding, border
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?
Keyword added to a selector that specifies a special state of the selected elements
example: :hover
What are CSS pseudo-classes useful for?
Gives the user feedback - helps them track where they’re at or what they’ve done on the site
Name two types of units that can be used to adjust font-size in CSS
px, percentages, and ems
What CSS property controls the font used for the text inside an element?
font-family:
What is the default flex-direction of a flex container?
Row
What is the default flex-wrap of a flex container?
Nowrap –> all flex items will be on one line
Why do 2 div elements “vertically stack” on one another by default?
Because they’re block elements
What are the three helper classes you should have for page layouts?
container, row and column
What are the four components of “the Cascade”?
- source order
- inheritance
- specificity
- !important
What does the term “source order” mean with respect to CSS?
The order in which your CSS rules are written
the last styling written will be what’s applied to the element
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance
List the three selector types in order of increasing sepcificty.
type, class, id
Why is using !important considered bad practice?
You shouldn’t need to use it if you understand specificity and are effectively using it
What does the transform property do?
It allows us to rotate, scale, skew or translate an element
Give 4 examples of CSS transform functions.
translate, rotate, skew, scale
The transition property is shorthand for which 4 properties of CSS?
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
What’s a breakpoint in responsive web design?
it’s a point where a website’s content will adapt a certain way to provide better user experience
What’s the advantage of using a percentage width instead of a fixed width for a “column” class in a responsive layout?
using percentage accounts for the screen’s width (that might potentially change) vs pixels which will always be the same
If you introduce css rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?
Bc of the cascade –> rules written lower on the css document will take precedence
