Css

Front 1

What do margin and padding do?

Back 1

Margin creates space on the outside of an element, (between the element and other elements) padding creates space on the inside of the element.

Front 2

Which is used to create space between elements, padding, border, or margin?

Back 2

Margin

Front 3

CSS Syntax

Back 3

h1 {

color: #000000;

background-color: #

}

Front 4

.jpg

Back 4

-noticeable loss of quality when sized up. image becomes pixelated.

Front 5

.gif

Back 5

-compresses images into a 256 color palate that can be blotchy

-supports animation

-supports transparency, but with affects on color

Front 6

.png

Back 6

-a lossless format, compression does not affect image quality

-supports transparency well

Front 7

.SVG = vector image

Back 7

-unlimited scaling ability and still looks good

-a photograph can never be a vector, it's only for graphics

Front 8

rbga is for color AND transparency

Back 8

h1 {
color: rgba(0, 128, 0, 0.5);
}

Front 9

rgba transparency works on a zero to one scale

Back 9

0=full transparency

0.5= semi transparency

1= no transparency

Front 10

HSLA!!!

Back 10

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.

Front 11

font properties

Back 11

h1 {
font-size: 12px | 12em | 12rem;

font-style: italic | normal | oblique;

font-weight: bold | bolder | normal | lighter;

color: red | #FF0000 | rgb(255, 0, 0);
}

Front 12

HTML/CSS SYNTAX

h1 { color: #ff0000; background: #00FF00; }

Which is the selector

Back 12

h1

Front 13

HTML/CSS SYNTAX

h1 { color: #ff0000; background: #00FF00; }

Which are the properties

Back 13

color:

background:

Front 14

HTML/CSS SYNTAX

h1 { color: #ff0000; background: #00FF00; }

Which are the values

Back 14

#FF0000

#00FF00

Front 15

HTML/CSS SYNTAX

h1 { color: #ff0000; background: #00FF00; }

Which is the declaration

Back 15

{ color: #ff0000; background: #00FF00; }

Front 16

Box Model

Back 16

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.

Front 17

Box model related values, In order from external most to inner most are?

Back 17

margin edge
border edge
padding edge
content edge

Front 18

CSS padding (also applies to border and margin)

Back 18

selector {padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;}

or

selector {padding: 10px;}

Front 19

CSS padding (also applies to border and margin)

Back 19

padding: 10px 20px 0px 85px;}

clockwise from, top right bottom left

Front 20

CSS short hand

Back 20

selector {border-width: 2px;
border-style: solid;
border-color: blue;}

selector {border: 2px solid blue;}

Front 21

center a website

Back 21

selector{margin: 0 auto;}

Front 22

selectors

vs.

nested selectors

Back 22

strong{color:green;}

or

.biography strong{}

Front 23

Multiple selectors

Back 23

h1, h2, h3, h4, h5 {
property: value;
}

Front 24

Pseudo selectors

Back 24

a {color: blue;}

vs.

a:hover {color: green;}

or

a:first-letter {color: green;}

Front 25

float property!

selector{

float: left|right|none|inherit;

}

Back 25

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

Front 26

If you float elements

Back 26

make sure to clear them for document flow you desire!

Front 27

the clear property has four valid values

Back 27

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)

Front 28

border radius syntax

Back 28

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