CSS Flashcards
CSS-SYNTAX
What are the names of the individual pieces of a CSS rule?
selector, declaration block with opening/closing curly brace, property, and value
CSS-SYNTAX In CSS, how do you select elements by their class attribute?
With a period (Ex: .title)
CSS-SYNTAX
In CSS, how do you select elements by their type?
Type selector means matches element names.
h1 { }
h1, h2, h3 { }
(just write the element)
CSS-SYNTAX
In CSS, how do you select an element by its id attribute?
With a pound/hashtag (Ex. #html)
CSS-COLORS
Name three different types of values you can use to specify colors in CSS.
RGB Values ( rbg(0,0,0) ); Hex Codes (#111111); Color Names ( red);
CSS-BOX-MODEL
What CSS properties make up the box model?
border, margin, and padding
CSS-BOX-MODEL
Which CSS property pushes boxes away from each other?
margin
CSS-BOX-MODEL
Which CSS property add space between a box’s content and its border?
padding
CSS-PSEUDO-CLASS
What is a pseudo-class?
A pseudo-class is applied by the browsers under certain circumstances. In some cases... They select elements that are in a specific state, e.g. they are being hovered over by the mouse pointer and therefore changes appearance \:hover | :active | :focus
CSS-PSEUDO-CLASS
What are CSS pseudo-classes-used for?
A pseudo-class is used to define a special state of an element (a class that allows users to change the appearance when interacting with elements). Makes CSS easier by not having to apply certain classes to each individual element. Example: It can be used to style an element when a user mouses over it. Style visited and unvisited links differently.
CSS-FONTS
Name two types of units that can be used to adjust font-size in CSS.
pixels and percentages;
also em / rem;
CSS-FONTS
What CSS property controls the font used for the text inside an element?
font-family property
CSS-FLEXBOX
What is the default flex-direction of a flex container?
Row
CSS-FLEXBOX
What is the default flex-wrap of a flex container?
No Wrap
CSS-LAYOUT-CLASSES
Why do two div elements “vertically stack” on one another by default?
because they are block elements
CSS-LAYOUT-CLASSES
What is the default flex-direction of an element with display: flex?
row
CSS-LAYOUT-CLASSES
What should containers classes alway have?
max-width: px or percent
margin: 0 or auto
CSS-LAYOUT-CLASSES
What should row classes alway have?
display: flex
CSS-POSITIONING
What is the default value for the position property of HTML elements?
static / normal
CSS-POSITIONING
How does setting position: relative on an element affect document flow?
it doesn’t
CSS-POSITIONING
How does setting position: relative on an element affect where it appears on the page?
Only use if you want to move things slightly to the left, right, down, or up;
CSS-POSITIONING
How does setting position: absolute on an element affect where it appears on the page?
sticks to the closest ancestry that is non-static
CSS-POSITIONING
How do you constrain an absolutely positioned element to a containing block?
change the ancestor element;
parent div has to be other than static
CSS-POSITIONING
What are the four box offset properties?
Top, Bottom, Left, and Right
CSS-CASCADE
What are the four components of “the Cascade”?
Source Order;
Specificity;
Importance;
Inheritance;
CSS-CASCADE
What does the term “source order” mean with respect to CSS?
Order that CSS uses “in order”;
Ruleset that is lower on the ccs page is used;
If two selectors are identical, the latter of the two will be a priority;
CSS-CASCADE
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
apply it to the parent element (inheritance)
CSS-CASCADE
List the three selector types in order of increasing specificity.
id > class > element
CSS-CASCADE
Why is using !important considered bad practice?
makes debugging harder by breaking the order of things
CSS-TRANSFORMS
What does the transform property do?
Lets you... Rotate; Scale; Skew; or Translate; ... an element
CSS-TRANSFORMS
Give four examples of CSS transform functions.
translateX, translateY, rotate, scale
CSS-TRANSITION
The transition property is shorthand for which four CSS properties?
transition-property;
transition-duration;
transition-timing-function;
transition-delay;
CSS-MEDIA-QUERIES
Give two examples of media features that you can query in an @media rule.
min-height;
min-width;
CSS-MEDIA-QUERIES
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta tag
CSS-RESPONSIVE-LAYOUT
What is a breakpoint in responsive Web design?
a point in the viewport size where the layout will change
CSS-RESPONSIVE-LAYOUT What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a "column" class in a responsive layout?
will adapt to the viewpoint sizing
CSS-RESPONSIVE-LAYOUT
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?
css rulesets are loaded in top to bottom so bottom one always wins (source order)
