CSS

Question 1

CSS stands for…

Answer 1

Cascading Style Sheets

It is a language for describing the presentation of web pages.

Question 2

inline CSS definition

Answer 2

< style=”background-color: tomato” > My text < /p >

Question 3

internal CSS definition

Answer 3

< style > p { background-color: tomato < /style >

All paragraphs are now tomatoes!

Question 4

External CSS definition

Answer 4

One or more CSS files included in the html:

in the head tags:

< link rel=”stylesheet” type=”text/css” href=”style.css” >

Question 5

CSS rule set syntax

Answer 5

selector {
    property: value;
    ...
    ...
}

Question 6

CSS selectors

Answer 6

by element(tag)
    p {...}
by class
    .thisClass{...}
by id
    #thisID{...}

Question 7

CSS length units

Answer 7

Pixel (px): absolute size, different on different monitors, bad for accessibility

EM, %, and rem are relative sizes: 1em = as large ad your base font size.

Question 8

CSS cascade…order of importance

Answer 8

Low to high:
User agent
User
Author
Author !important
User !important

Question 9

CSS cascade…specificity

Answer 9

The more specific declaration “wins”

low to high:
element(tag) selectors
class selector
id selectors
inline style

Question 10

CSS combinators

Answer 10

el1, el2 {...}
    selector list
el1 > el2 {...}
    el2 is a direct child of el1
el1 el2 {...}
    el2 is a descendant of el1
el1 + el2{...}
    el1 is the direct sibling of el2
el1 ~ el2{...}
    el1 and el2 are general siblings

Question 11

CSS attribute selectors

Answer 11

selector[html_attribute=”value”]{…}

Question 12

CSS Pseudo classes

Answer 12

selector:pseudo-class

fx:
a:visited{…};

Question 13

CSS Pseudo Elements

Answer 13

selector::pseudo-element

fx:
::first-line{…}

Question 14

CSS the box model

Answer 14

When html is rendered, a box is drawn around each element. Additionally there are optional areas:
padding, border, margin

Question 15

Padding vs Margin

Answer 15

Padding adds space within the element

Margin adds space around an element

Question 16

Block element vs inline element

Answer 16

Block element starts a new line and takes as much width as possible

Inline elements start from the current pos and take as mutch space as needed

Question 17

Display style

Answer 17

Display:
block;
inline;
none;

Question 18

Float

Answer 18

float: left;

Allows inline elements to “float” around this element

Question 19

Position

Answer 19

position: relative; top: 20px; left: 20px;

As in the normal flow but with relative offset

Question 20

Flexbox

Answer 20

Makes positioning easier.

Gives containers a number of properties

Question 21

Responsive web design… boil it down

Answer 21

RWD make websites adapt to the devices they’re being viewed on instead of sending visitors to different sites.

Question 22

Responsive Web Design… What does it tackle?

Answer 22

Different screen sizes
Different resources(computing power etc)
Different input methods

Question 23

Responsive Web Design… how?

Answer 23

Relative length units
Flexbox
CSS media Queries

Question 24

CSS media Queries

Answer 24

Allow you to define CSS depending on medium:

Screen size
Device
Resolution
Input
Orientation
etc...

example
@media screen and (max-width: 400px) {
    #myUnimportantDiv { display: none}
}

This makes element with id myUnimportantDiv invisible when the screen is less than or equal to 400px