Lecture 3: HTML & CSS Basics

Question 1

Why do we need CSS?

Answer 1

You need CSS to communicate efficiently, and it also helps to build the user experience which then helps with prototyping

Question 2

CSS Anatomy

Answer 2

selector-type {
Property: value;
}

Question 3

CSS Standard Selectors

Answer 3

Element selector, class selector (. - multiple), id selector (# - unique)

Question 4

How does CSS read HTML?

Answer 4

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

Question 5

Descendant selector:

Answer 5

(SPACE) .shopcart a {
}

Question 6

Grouping Selectors

Answer 6

(Commas) p, br, span {
}

Question 7

Pseudo class Selectors

Answer 7

Enabling styling based on user-interaction, eg. hover.
Eg. element:pseudo-class {}
Eg. a:active { color: aqua; }

Question 8

Origin precedence rule

Answer 8

last rule wins! The file is parsed top to bottom.

Question 9

Inheritance rule:

Answer 9

child element in its parents rules, unless declared otherwise

Question 10

Specificity rule

Answer 10

more specific rules win. You could use the counter to understand the specificity on the css rule eg. (0,0,2) is more specific than (0,0,1).

Question 11

Final hierarchy:

Answer 11

Inline style > ID > Class > elements
!important takes complete precedence but its bad practice

Question 12

Box Model:

Answer 12

This makes everything apply inside the box, only the margin is still applied to the outside.
Good practice: Most generic styles go to the top of the css file and then as you go lower it gets more specific.

Question 13

Box Model Code

Answer 13

content-box (default)
* {
box-sizing : border-box;
}

Question 14

Content Spilling Over

Answer 14

overflow: visible; overflow: hidden; overflow: scroll; overflow: auto;

Question 15

Flexbox

Answer 15

.container {
flex-flow: column wrap;
display: flex;
}

Question 16

Flexbox Properties

Answer 16

Justify content, align items, align content