Use LEFT and RIGHT arrow keys to navigate between flashcards;
Use UP and DOWN arrow keys to flip the card;
H to show hint;
A reads text to speech;
28 Cards in this Set
- Front
- Back
What do margin and padding do? |
Margin creates space on the outside of an element, (between the element and other elements) padding creates space on the inside of the element.
|
|
Which is used to create space between elements, padding, border, or margin? |
Margin |
|
CSS Syntax
|
h1 { color: #000000; background-color: # } |
|
.jpg |
-noticeable loss of quality when sized up. image becomes pixelated. |
|
.gif |
-compresses images into a 256 color palate that can be blotchy
-supports animation
-supports transparency, but with affects on color |
|
.png |
-a lossless format, compression does not affect image quality
-supports transparency well |
|
.SVG = vector image |
-unlimited scaling ability and still looks good
-a photograph can never be a vector, it's only for graphics |
|
rbga is for color AND transparency |
h1 { |
|
rgba transparency works on a zero to one scale |
0=full transparency
0.5= semi transparency
1= no transparency |
|
HSLA!!! |
HSLA color works in a very similar way to RGBA, but is more intuitive to tweak. values are H-hue, S-saturation, L-lightness and A-alpha. |
|
font properties |
h1 { font-style: italic | normal | oblique; font-weight: bold | bolder | normal | lighter; color: red | #FF0000 | rgb(255, 0, 0); |
|
HTML/CSS SYNTAX
h1 { color: #ff0000; background: #00FF00; }
Which is the selector |
h1 |
|
HTML/CSS SYNTAX
h1 { color: #ff0000; background: #00FF00; }
Which are the properties |
color: background: |
|
HTML/CSS SYNTAX
h1 { color: #ff0000; background: #00FF00; }
Which are the values |
#FF0000 #00FF00 |
|
HTML/CSS SYNTAX
h1 { color: #ff0000; background: #00FF00; }
Which is the declaration |
{ color: #ff0000; background: #00FF00; } |
|
Box Model |
In a document, each element is represented as a rectangular box.
In CSS, each of these rectangular boxes is described using the standard |
|
Box model related values, In order from external most to inner most are?
|
margin edge
border edge padding edge content edge |
|
CSS padding (also applies to border and margin) |
selector {padding-top: 10px; or selector {padding: 10px;}
|
|
CSS padding (also applies to border and margin)
|
padding: 10px 20px 0px 85px;}
clockwise from, top right bottom left |
|
CSS short hand |
selector {border-width: 2px;
|
|
center a website |
selector{margin: 0 auto;} |
|
selectors
vs.
nested selectors
|
strong{color:green;}
or
.biography strong{} |
|
Multiple selectors |
h1, h2, h3, h4, h5 { |
|
Pseudo selectors |
a {color: blue;}
vs.
or a:first-letter {color: green;} |
|
float property!
selector{ float: left|right|none|inherit; } |
right=float right left=float left none= (the default) element will not float inherit= element will inherit the float value from it's parent element |
|
If you float elements |
make sure to clear them for document flow you desire! |
|
the clear property has four valid values
|
both-clears floats in either direction
right/left-only clear the float from one direction respectively inherit-inherit from parent element (none is the default) |
|
border radius syntax |
div {border-radius:topleft topright bottomright bottomleft; }
as with padding syntax, if you enter one value, you will get that value applied to all 4 corners |