Prep CSS Basics Flashcards
(35 cards)
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
