Studied by 20 peoplemargin: 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
size of content and img adjust to screen size
not just for one screen size
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
ordered list (list item for the content) (numbers by default)
unordered list (list item for the content)
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
# an id, placeholder2. html page name itself
test responsive design
emulator
F12 dev tools / change size of browser windows
buy the device
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
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
Note
Flashcard