CSS Flashcards
What are the names of the individual pieces of a CSS rule?
A rule set has a selector and a declaration block
A declaration block consists of at least one declaration
A declaration is one property and one value
In CSS, how do you select elements by their”class”attribute?
“.className”
In CSS, how do you select elements by their type?
Just use the letters of the element without the “<>”, case sensitive
Separate by commas if grouping multiple (called a group selector)
In CSS, how do you select an element by itsidattribute?
#elementID
Name three different types of values you can use to specify colors in CSS.
HEX codes
RGB (or RGBA with CSS3)
Names (white, black, blue, red)
HSLA (CSS3)
What CSS properties make up the box model?
Margin, border, padding
Technically the content is also part of the box model, so width and height can also be properties of the 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 a pseudo-class?
Keyword added to selectors to target elements under certain states
Class applied by the browser (not by the developer) under certain situations
What are CSS pseudo-classes useful for?
They can be useful for responding to users, altering behavior of elements that makes it easier for users to understand the intended uses. It also makes the page feel more responsive/interactive.
Style elements based not just on content but external factors to the content. (History, status, position)
Name two types of units that can be used to adjust “font-size” in CSS.
px, percentage (% of 16px, the default) rem, and ems (width of the letter “m”)
What CSS property controls the font used for the text inside an element?
“font-family”
What is the defaultflex-directionof aflexcontainer?
The flex-direction of a container will be row by default, meaning items will be arranged horizontally from left-to-right
What is the default flex-wrap of a flex container?
It will be nowrap by default, meaning all items will fit on one line.
What is the unit vh?
Viewport height, 100vh is 100% of the viewport height.
Not commonly used because we don’t commonly set height with webpages.
May be used to set a container to be a certain height relative to the viewport rather than a height based on the content inside (centering an image on a page).
Why do two div elements “vertically stack” on one another by default?`
div elements are block elements
What is the default flex-direction of an element with display: flex?
row (left to right)
What is the purpose of the container class in the layout class system?
Holds the rows and columns of the page layout
Generally only has a max-width and a margin
What is the purpose of the row class in the layout class system?
Sections off vertical chunks of content in the page
Is usually a flexbox (display: flex)
Contains columns
What is the purpose of the column class in the layout class system?
Sections off horizontal chunks of content in the page
Each column class should have only a width value
Can contain rows (which would contain further columns)
What is the difference between a utility class and a semantic class?
Utility classes are named by what they do and are highly reusable (example: .bold-text)
Semantic classes are named by what they refer to and are highly specific (example: .about-section)
Why should CSS rules (almost) never apply to IDs?
Because IDs have to be completely unique, rulesets with ID selectors are never reusable! Class selectors are generally better
How long should utility classes generally be?
Usually around 2-3 declarations
What is thedefaultvalue for thepositionproperty of HTML elements?
position: static;
How does settingposition: relativeon an element affect document flow?
It doesn’t affect document flow, things are positioned as they should be
How does settingposition: relativeon an element affect where it appears on the page?
It doesn’t affect where it appears, but the element can now be shifted from that position using top, bottom, left, and right (takes, px, %, and ems)
How does settingposition: absoluteon an element affect document flow?
The element is taken out of the document flow and other elements act as if it isn’t there
How does settingposition: absoluteon an element affect where it appears on the page?
Once the other elements are properly situated, the absolute element that was taken out of its place now sits relative to the first non-static/non-positioned parent.
If there is no non-static/non-positioned parent, the element is positioned relative to its containing block (in the code, what it’s nested under)
How do you constrain an absolutely positioned element to a containing block?
Because absolutely positioned elements are positioned relative to the closest non-static/non-positioned ancestor, you would make the containing block non-static/non-positioned (e.g. set the containing block to position: relative)
What are the four box offset properties?
top, bottom, left, right
What are the four components of “the Cascade”.
Source Order
Inheritance
Specificity!important
What does the term “source order” mean with respect to CSS?
If an element has two competing CSS rules with the same level of specificity applied, the one that comes later in the stylesheet takes precedence.
Documents loaded in later in the HTML `` take precedence over earlier ones too
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Some CSS properties are inherently inherited from parent elements if not specified.
List the three selector types in order of increasing specificity.
element < class < id
Why is using!importantconsidered bad practice?
It breaks the natural cascade which makes it difficult to debug issues
What does the transform property do?
The transform property allows an element to be scaled, skewed, rotated, or translated depending on what transform-function is used as the value
Elements are rendered on a coordinate plane, and transform allows us to modify the coordinate space (which has origin at the top-left corner)
Give four examples of CSS transform functions.
rotate, translateY, skew, scale, translateX
Thetransitionproperty is shorthand for which four CSS properties?
transition-propertytransition-durationtransition-delaytransition-timing-function
Give two examples of media features that you can query in an@mediarule.
Screen width (min-width), screen height, orientation, aspect ratio, ability to have hover
Which HTML meta tag is used in mobile-responsive web pages?
The viewport meta tag, like meta name="viewport" content="width=device-width, scale-resolution=1"
What is abreakpointin responsive Web design?
A breakpoint is a condition that, when met, will adjust the CSS of the page to be responsive to the device/conditions
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?
Using pixels would create potentially inconsistent breakpoints across devices with various numbers of pixels/scaling rules. Percentages are more universal and are more closely related to how the content should be displayed.
If you introduce CSS rules for a smallermin-width_after_the styles for a largermin-widthin your style sheet, the CSS rules for thesmallermin-widthwill “win”. Why is that?
The “winning” rule for conflicting CSS rules of the same specificity will be the one later in the sheet. Of course, the condition for the smaller min-width will still be true when the screen size exceeds the larger one, so it is still true. (Source Order)
