Prep CSS Basics Flashcards
What are some characteristics of block?
Displays an element as a block element (like <p>).
Starts on a new line
Takes up the whole width</p>
What are some characteristics of inline?
Displays an element as an inline element (like <span>)</span>
Any height and width properties have NO effect</span>
What are some characteristics of inline-block?
Displays an element as an inline-level block container.
The element itself is formatted as an inline element, but can apply height and width values
Will line up (flow) next to each other left to right.
Describe the syntax of a CSS rule-set.
selector {declaration; declaration}
selector {property:value; property:value;)
ex/
h1 {color: blue; font-size:12px}
What CSS properties make up the box model?
Margin
Border
Padding
Content
Which CSS property pushes boxes away from each other?
Margin
Which CSS property pushes box content away from its border?
Padding
Internal Style Sheet
Child of element
Uses tags
Delete card
External Style Sheet
Uses tag to link to external sheet
External sheet contains code that usually goes btwn tags of internal style sheet
Selectors
Least to most specific
From least specific –> most specific:
Type: <p>
Class: .description
ID: #special</p>
What are these?
Rule set
Selector
Declaration block
Declarations
Ruleset: a chunk of CSS code
Selector: which elements to target
Declaration block: curly braces
Declarations: inside the block (property, colon, and then a value)
Name three different types of values you can use to specify colors in CSS.
color keywords
RGB
Hexadecimal
HSL
What is a pseudo-class?
allows you to select elements based on what state they are in
What are CSS pseudo-classes useful for?
styling elements when user is interacting with them
ex/ hover, active, focus (text cursor), visited (for URLs)
Name two types of units that can be used to adjust font-size in CSS.
px (gives full control)
em (multiplier of default text size 16px)
% (can set default font size of body and combine with em)
vw (viewport width)
What CSS property controls the font used for the text inside an element?
font-family
What are the four components of “the Cascade”.
first priority order
- importance
- specificity (most specific applied)
- source order (last provided style is applied)
- inheritance (child receives style from parent if child style is undeclared)
4a. only some properties can be inherited by default
specificity
from least to most specific:
- element name type selectors & pseudo elements
- class selectors, attribute, and pseudo-classes
- ID selectors
no specificity:
- *
- combinators (+,,~,” “, | | )
Why is using !important considered bad practice?
debugging more difficult;
breaks the natural cascading in your stylesheets;
hard to override if you need to override it
CSS multiplier
x1 - element
x10 - class
x100 - ID
the rule with highest multiplier takes precedence
See grid specificity with fish and sharks
What is the default value for the position property of HTML elements?
position: static
How does setting position: relative on an element affect document flow?
it does not affect document flow
How does setting position: relative on an element affect where it appears on the page?
moves it from where it was in normal flow
stays in normal flow & doesn’t affect elements around it
How does setting position: absolute on an element affect document flow?
as long as there is a containing block that is not STATIC:
no more normal flow; other elements act as if it is not there and will take over previous occupying space
How does setting position: absolute on an element affect where it appears on the page?
takes it out of normal flow
How do you constrain an absolutely positioned element to a containing block?
position:relative on container
will align to first non-static position parent
What are the four box offset properties?
top:
bottom:
left:
right:
What does the transform property do?
makes final adjustments to images
Lets you rotate, scale, skew, or translate an element.
It modifies the coordinate space of the CSS visual formatting model
Give four examples of CSS transform functions.
rotate
translateY
translate
scale
skew (takes sides and warps it to parallelogram)
matrix (allows you to do all transform functions at once)
The transition property is shorthand for which four CSS properties?
PDTFD
transition-property
transition-duration
transition-timing-function
transition-delay
put transition property in main class, not pseudoclass
Give two examples of media features that you can query in an @media rule.
width
hover?
Which HTML meta tag is used in mobile-responsive web pages?
< meta name=”viewport” content=”width=device-width, initial-scale=1.0” >
whatever device is being used to view webpage, set width of device equal to width of webpage
^^ if viewport tag not used, the browser will create a virtual viewport
(ex/ squeeze it down and make it tiny on a phone)
What is a breakpoint in responsive Web design?
point where media query fires or becomes “true”
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?
adapts to parent container size
adapts to fraction of the row that we previously set
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
