Intermediate CSS

Question 1

<div></div>

Answer 1

Combines a group of html elements into a single box

Useful to structure and divide up web content

Question 2

<span></span>

Answer 2

An inline element where you can use to pick a sub-section of a html element, which can then be used to style

Question 3

The Box Model

Answer 3

Width
Height
Padding
Border
Border Size
Solid, Dashed, …
Margin

Question 4

Display Property

Answer 4

We can also modify the display property for any html element

Ex. display : inline;

Question 5

Block

Answer 5

An element that will take up its own line, where the width takes up the whole screen

Question 6

Inline/ Inline-Block

Answer 6

Inline
Inline-Block
Allows other elements to sit to their left or right side
None

Question 7

Html element is hidden as if it never existed

Answer 7

Alternative, visibility : hidden

The element can not be seen, but it fills the original size position

Question 8

CSS Static and Relative Positioning

Answer 8

1. Content dictates everything
2. Order of content comes from the code
3. Parent - Children relationship
   Children elements are layered on top of the parent elements

Question 9

Position

Answer 9

4 Methods to change the layout positioning of elements:

Static
All html elements are static by default
Relative
The adjustment position is applied in relative to the static positioning
position : static;
Then we can only see changes once we change the coordinate values.
top, bottom, left, right
Relative positioning acts independently on the html element
Absolute
Moves element relative to its parent element
Adds margins relative to its parent element
Absolute positioning acts dependently on the html element
Fixed
The element will be fixed in place, even when the user scrolls around the web page
Useful for navigation bars

Question 10

Centering Elements with CSS

Answer 10

text-align : center
Centers all elements, where it does not have a width set
margin : top right bottom left
auto - will be used to center the element

Question 11

Font Styling

Answer 11

font-family
serif
sans-serif

Question 12

Note that the availability of fonts varies based on…

Answer 12

…the browser and operating system. So if you choose a font for your web site, be mindful of its availability to your end users.

Question 13

em

Answer 13

Example.
font-size: 2rem;
1 em = 16px = 100%
Dynamic sizing of text, in proportion to a standard, being 16px = 1em
Dynamic sizing of text, relative to the html elements paren

Question 14

rem

Answer 14

Dynamic sizing of text, relative to the root

Preferable to use for texts

Question 15

CSS Float and Clear

Answer 15

float
The html element “floats”, so that other elements can wrap around the element
clear
Opposite of float, the html element does not allow wrapping around of other elements