Fundamentals

Question 1

What is CSS syntax?

Answer 1

Selector and Declaration.

A Declaration is composed of Property: Value;

h1 { font-size: 12px; }

Question 2

What are the three ways to add CSS to a document and their cascading order?

Answer 2

Internal CSS (2), External CSS (2), and Inline CSS (1).

[browser default is priority 3]

Question 3

How do you write comments in CSS?

Answer 3

/* multi line comment */

Question 4

What is background shorthand?

Answer 4

When using the shorthand property the order of the property values is:

background-color
background-image
background-repeat
background-attachment
background-position

body {
background: #ffffff url(“img_tree.png”) no-repeat right top;
}

It does not matter if one of the property values is missing, as long as the other ones are in this order.

Question 5

What is border shorthand?

Answer 5

The border property is a shorthand property for the following individual border properties:

border-width
border-style (required)
border-color

p {
border: 5px solid red;
}

works for border-left, border-top, border-right, border-bottom

Question 6

What is Margin Collapse?

Answer 6

When a top and bottom margin become one margin, equal to the largest of the two margins.

Question 7

What are Margins?

Answer 7

Empty space around elements, outside of defined borders.

p {
margin: 25px 50px 75px 100px;
}

Question 8

margin: auto;

Answer 8

Centers the borders within it’s container horizontally.

can be overriden with margin: inherit;

Question 9

What is padding?

Answer 9

Space between the content and its borders.

div {
padding: 25px 50px 75px 100px;
}
//top right bottom left

If the padding property has three values:
top
right and left
bottom

if two values top/bottom right/left

Question 10

What can be used for height and width values?

Answer 10

auto, length [px, cm, etc.], %, inherit, initial

Question 11

What are the dimension properties

Answer 11

height, width
max-height, max-width
min-heigh, min-width

Question 12

CSS Box Model

Question 13

What is a CSS Outline?

Answer 13

What goes outside borders.
outline-style: solid //outline style must be set.
outline-color: …;
ourline-width: …;

outline-offset adds space between the outline and the border.

outline shorthand:
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
//order doesn’t matter

It can inherit the outlines styles of borders, but is not a border

Question 14

What are the web safe fonts?

Answer 14

Arial (sans-serif)
Verdana (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)

Question 15

What are CSS icons?

Answer 15

Icons that can be inserted through CSS

fontawesome.com
google icons

Question 16

What are the four link states?

Answer 16

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

Question 17

display

Answer 17

controls how the element is displayed…

display: block; //as a block element
display: inline //default as an inline element
display: none; //hides the element, takes no space

in contrast to
visibility: hidden //hides the element, but space is reserved

Question 18

position: static;

Answer 18

the default position for an element, follows the normal flow of the page.

Question 19

position: relative;

Answer 19

the element will be adjusted ‘relative’ to it’s normal position

Question 20

position: fixed;

Answer 20

the element will be relative to the viewport.

good for nav elements.

Question 21

position: absolute;

Answer 21

Well be relative to it’s nearest ancestor, instead of the viewport

Question 22

position: sticky;

Answer 22

toggles between relative and fixed depending on the scroll position

Question 23

z-index

Answer 23

specifies the stack order for elements, can be positive or negative.

if not specified the most recent element will be on top.

Question 24

overflow

Answer 24

specifies how to handle overflow

visible //default, not clipped and spills out
hidden //overflow is clipped content becomes invisible
scroll //adds scrollbar
auto //only adds scrollbar when necessary

Question 25

How can you center an image?

Answer 25

{
margin-left: auto;
margin-right: auto;
}

Question 26

How can colors be defined in CSS?

Answer 26

with
RGB(255, 255, 255) // 0 -> 255

Hex #ffffff //00 -> ff

hsl(9, 100%, 64%)

rgba, and hsla (4th parameter for transparency)

Question 27

What are the parameters of CSS transition?

Answer 27

/* property name | duration | easing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* property name | duration | easing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration */
transition: margin-right 4s;

Question 28

What are the transition properties?

Answer 28

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