CSS Flashcards
What are the names of the individual pieces of a CSS rule?
The selector, the declaration block, property value pairs
In CSS, how do you select elements by their class attribute?
You use “.” followed by the elements with that class attribute
In CSS, how do you select elements by their type?
You use the name of the element
In CSS, how do you select an element by its id attribute?
You us “#” followed by elements with that id attribute
Name three different types of values you can use to specify colors in CSS
Using one of the 147 predefined colors, rgba, and hexadecimal color values
what CSS properties make up the box model?
Border, margin, padding
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?
Adds some kind of functionality to a selector
What are CSS pseudo-classes used for?
They allow you to change the style of elements when you interact with them
Name two types of units that can be used to adjust font-size in CSS
Px, rem, %
What CSS property controls the font used for the text inside an element?
font-family
What are the four components of “the cascade”
Importance, Specificity, Source Order, Inheritance
What does the term “source order” mean with respect to CSS?
The order that the CSS rules be applied
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Because of inheritance, some styles of an element will be adopted by its child element
List the three selector types in order of specificity
Id, class, type selector
Why is using !important considered bad practice?
It breaks the cascade of the CSS and makes debugging harder
What is the defaultflex-directionof aflexcontainer?
flex-direction: row;
What is the default flex-wrap of a flex-container?
flex-wrap: no-
wrap;
What does the transform property do?
It lets you rotate, scale, move, and skew elements
Give four examples of CSS transform functions.
rotate()
Scale()
skew()
translate()
Thetransitionproperty is shorthand for which four CSS properties?
Transition-property, Transition-duration, transition-timing-function, transition-delay,
Give two examples of media features that you can query in an@mediarule.
Width, color
Which HTML meta tag is used in mobile-responsive web pages?
Viewport meta tag
What is abreakpointin responsive Web design?
A point where there is a change of rules for how the website content is displayed depending on screen size
What is the advantage of using a percentage (e.g.50%)widthinstead of a fixed (e.g.px)widthfor a “column” class in a responsive layout?
Percentages allow you to set widths for all kinds of screens, without to make rules for every type of screen size
If you introduce CSS rules for a smallermin-widthafterthe styles for a largermin-widthin your style sheet, the CSS rules for thesmallermin-widthwill “win”. Why is that?
The Css will read from from top to bottom and will go with the one afterwards if the css rulesets have the same specificity
