is 117 final quiz review

yuh

margin: 10px;

10 pixels on all sides.

margin: 10px 20px;

10 pixels top/bottom

20 pixels right/left

margin: 10px;

10 pixels on all sides.

margin: 10px 20px;

10 pixels top/bottom

20 pixels right/left

margin: 10px 20px 30px;

10 pixels top

20 pixels right/left

30 pixels bottom

margin: 10px 20px 30px 40px;

10 pixels top

20 pixels right

30 pixels bottom

40 pixels left

margin: 0 auto;

horizontally centers an element inside of its parent content area, if it has a width.

how tall is the box if no number or auto is specified?

depends on amount of content. it fits the content

reset selector (ruleset)

* {

margin: 0;

padding: 0;

}

universal selector

specify border

thiccness (width), color, style

also blue (inherits it)

if bg color is blue, what color is content within it?

fluid design

1. size of content and img adjust to screen size
2. not just for one screen size
3. avoids scroll bars

z-index

how close reader is to content

specify z-index

higher the number, closer to reader / closer to the front

default z-index

auto

static

default behavior, how you write is how it shows up

relative

sets a point for further positioning (adjusts)

absolute

moves content based on last positioning point (relative or absolute)

fixed

stays in one position based on viewport

specify position

top, right, bottom, left

<ol> <li>

ordered list (list item for the content) (numbers by default)

<ul> <li>

unordered list (list item for the content)

<dl> <dt> <dd>

description list, description term, description definition

:active

when i am pressing the mouse button (psuedo class)

:hover, :focus

mouse over, tab to (pseudo class)

:visited

been to that link already

:link

link before it's clicked

float

move something with size to a different place

href attribute

1. # an id, placeholder2. html page name itself

test responsive design

1. emulator
2. F12 dev tools / change size of browser windows
3. buy the device
4. outside testing site

media query

checks the size of the viewport in pixels and changes the CSS that applies

responsive measurements

rem - 16px alwaysem - 16px default, can change based on font-size% - percentage of current font size

not responsive measurements

px, pt

slicknav

creates the navigation for a mobile device based on full screen size navigation(mobile first vs desktop first design)

active area of an image map

hotspot

jpg

millions of colors, not transparent, no animation

gif

only 256 colors, transparent, animation

png

millions of colors, doesn't lose quality on compression

code with a picture for use by a screen reader

alt tag

element for showing a figure or diagram

figcaption with figure tag

picture element / <picture> </picture>

selects correct sized image based on media query

favicons size

16x16px

favicons extension

.ico

where does favicons appear?

in tab in browser and in bookmarks

make favicons

use a favicon generator