CSS Flashcards
CSS-syntax
What are the names of the individual pieces of a CSS rule?
= selector and a declaration( which has property and a value)
CSS-syntax In CSS, how do you select elements by their class attribute?
= . classname
CSS-syntax
In CSS, how do you select elements by their type?
= by putting element name
CSS-syntax
In CSS, how do you select an element by its id attribute?
= #idname
CSS-colors
Name three different types of values you can use to specify colors in CSS
= hex code (#FFD700)
= color name (147 names supported by browsers)
= RGB values (rgb 102,205,180)
CSS-box model
What CSS properties make up the box model?
= border, margin, padding, width, and height
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 class you can change the appearance of elements when a user is interacting with them. (ex. :hover) = to add styles to selectors, but only when those selectors meet certain conditions
CSS-pseudo class What are CSS pseudo-classes useful for?
= for defining a special state of an element.
= (applying styling element when mouse hover over it.)
= styling selectors
CSS-fonts
Name two types of units that can be used to adjust font-size in CSS
= pixels, em, rem
CSS-fonts
What CSS property controls the font used for the text inside an element?
= font family
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?
nowrap : all flex items will be on one line.
CSS-layout
Why do two div elements “vertically stack” on one another by default?
= because div elements are block level elements.
block-level elements start on a new line
CSS-layout
What is the default flex-direction of an element with display: flex?
= row
CSS-cascade
what are the four components of “the Cascade”?
- source order
- inheritance
- specificity
- !important
CSS-cascade
what does the term “source order” mean with respect to CSS?
= the order that your CSS rules are written in your stylesheet.
= styling provided for an element “last” in your stylesheet is the styling that will ultimately take effect.
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?
= inheritance. (useful for text)
CSS-cascade
List three selector types in order of increasing specificity
element type -> class -> id (heaviest specificity)
CSS-cascade
why is using !important considered bad practice?
= it makes debugging more difficult, by breaking the natural cascading in stylesheets.
= !important supersedes everything.
CSS-transforms
What does the transform property do?
= Transform property lets you rotate, scale, skew, or translate an element,
CSS-transforms
Give four examples of CSS transform functions.
= transform: rotate (rotates clockwise(+deg) or counter-clockwise(+deg))
= transform: skew (distorts each point within an element by a certain angle in the horizontal and vertical directions)
= transform: matrix (defines a homogeneous 2D transformation matrix.)
= transform: translate (moves element up(-value) or down(+value)
CSS-responsive-layout
What is a breakpoint in responsive Web design?
= a “point” at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience
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?
= Gives ability to have variance. Leg of room. => for elements inside container = Hard px value for class container.
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?
= Source order.
= Media query is depend on the source order of CSS ruleset.
CSS-media queries
Give two examples of media features that you can query in an @media rule.
= Width, color (min-width, and max-width) is mostly used.
= Min-width is used widely for phone
CSS-media queries
Which HTML meta tag is used in mobile-responsive web pages?
= HTML viewport meta tag
= < meta name=”viewport” content=”width=device-width, initial-scale=1.0” >
= Value of viewport
CSS-media queries
***Put the media query at the end. (source order) ⇒ always at the end of CSS rules.
- Viewport meta tag:
=> In order to use this tag, check for the version of the HTML file that is up to the latest version. Older versions may not work.
- only screen = make sure to declare the type of screen you want to declare (ex. print, for print-friendly version), or screen for screens.
