Prep CSS Basics

Question 1

What are some characteristics of block?

Answer 1

Displays an element as a block element (like <p>).
Starts on a new line
Takes up the whole width</p>

Question 2

What are some characteristics of inline?

Answer 2

Displays an element as an inline element (like <span>)</span>

Any height and width properties have NO effect</span>

Question 3

What are some characteristics of inline-block?

Answer 3

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.

Question 4

Describe the syntax of a CSS rule-set.

Answer 4

selector {declaration; declaration}
selector {property:value; property:value;)

ex/
h1 {color: blue; font-size:12px}

Question 5

What CSS properties make up the box model?

Answer 5

Margin
Border
Padding
Content

Question 6

Which CSS property pushes boxes away from each other?

Answer 6

Margin

Question 7

Which CSS property pushes box content away from its border?

Answer 7

Padding

Question 8

Internal Style Sheet

Answer 8

Child of element
Uses tags

Delete card

Question 9

External Style Sheet

Answer 9

Uses tag to link to external sheet

External sheet contains code that usually goes btwn tags of internal style sheet

Question 10

Selectors

Least to most specific

Answer 10

From least specific –> most specific:

Type: <p>
Class: .description
ID: #special</p>

Question 11

What are these?

Rule set
Selector
Declaration block
Declarations

Answer 11

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)

Question 12

Name three different types of values you can use to specify colors in CSS.

Answer 12

color keywords
RGB
Hexadecimal
HSL

Question 13

What is a pseudo-class?

Answer 13

allows you to select elements based on what state they are in

Question 14

What are CSS pseudo-classes useful for?

Answer 14

styling elements when user is interacting with them

ex/ hover, active, focus (text cursor), visited (for URLs)

Question 15

Name two types of units that can be used to adjust font-size in CSS.

Answer 15

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)

Question 16

What CSS property controls the font used for the text inside an element?

Answer 16

font-family

Question 17

What are the four components of “the Cascade”.

Answer 17

first priority order

1. importance
2. specificity (most specific applied)
3. source order (last provided style is applied)
4. inheritance (child receives style from parent if child style is undeclared)

4a. only some properties can be inherited by default

Question 18

specificity

Answer 18

from least to most specific:

1. element name type selectors & pseudo elements
2. class selectors, attribute, and pseudo-classes
3. ID selectors

no specificity:

1. *
2. combinators (+,,~,” “, | | )

Question 19

Why is using !important considered bad practice?

Answer 19

debugging more difficult;

breaks the natural cascading in your stylesheets;

hard to override if you need to override it

Question 20

CSS multiplier

Answer 20

x1 - element
x10 - class
x100 - ID

the rule with highest multiplier takes precedence

See grid specificity with fish and sharks

Question 21

What is the default value for the position property of HTML elements?

Answer 21

position: static

Question 22

How does setting position: relative on an element affect document flow?

Answer 22

it does not affect document flow

Question 23

How does setting position: relative on an element affect where it appears on the page?

Answer 23

moves it from where it was in normal flow

stays in normal flow & doesn’t affect elements around it

Question 24

How does setting position: absolute on an element affect document flow?

Answer 24

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

Question 25

How does setting position: absolute on an element affect where it appears on the page?

Answer 25

takes it out of normal flow

Question 26

How do you constrain an absolutely positioned element to a containing block?

Answer 26

position:relative on container

will align to first non-static position parent

Question 27

What are the four box offset properties?

Answer 27

top:
bottom:
left:
right:

Question 28

What does the transform property do?

Answer 28

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

Question 29

Give four examples of CSS transform functions.

Answer 29

rotate
translateY
translate
scale

skew (takes sides and warps it to parallelogram)

matrix (allows you to do all transform functions at once)

Question 30

The transition property is shorthand for which four CSS properties?

Answer 30

PDTFD

transition-property
transition-duration
transition-timing-function
transition-delay

put transition property in main class, not pseudoclass

Question 31

Give two examples of media features that you can query in an @media rule.

Answer 31

width

hover?

Question 32

Which HTML meta tag is used in mobile-responsive web pages?

Answer 32

< 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)

Question 33

What is a breakpoint in responsive Web design?

Answer 33

point where media query fires or becomes “true”

Question 34

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?

Answer 34

adapts to parent container size

adapts to fraction of the row that we previously set

Question 35

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?

Answer 35

source order