CSS Box Model

Question 1

Padding

Answer 1

-Separates the content from the border

Question 2

Margin

Answer 2

-Area outside the border and is used to control the space between other elements.
-Vertical margin and horizontal margin
Code:
auto (centers the page)
margin: 2px //top and bottom 0 //left and right

Question 3

Div element

Answer 3

Code:

<div></div>

Add divisions to a page

Question 4

Link

Answer 4

• Self closing element

- You can link the CSS file here

Question 5

Border shorthand

Answer 5

.class {

border: line-width line-style color

Question 6

Overflow

Question 7

Filter

Answer 7

-Applying filters
Code used:
filter: blur(2px);

Question 8

Box-shadow

Question 9

Border-radius

Answer 9

Defines the border radii with pixels. Rounds the edges

Question 10

Transform

Answer 10

Can rotate an object in degrees

Code:
transform: rotate(0.6deg) (can also use negative to rotate the opposite direction

Question 11

Meta

Answer 11

-Goes in the head element

Code:
name=”viewport”
content=”width=device-width, initial-scale=1”

Question 12

Box-sizing

Question 13

Display using flex

Question 14

Flexbox

Answer 14

Flexbox is a one-dimensional CSS layout approach that focuses on the flow of content. It offers the ability to control the way items are spaced and aligned within a container.

Question 15

Flex direction

Answer 15

Specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis.

Question 16

Flex-wrap

Answer 16

Controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

Question 17

Justify-content

Answer 17

Aligns flex items along the main axis of the current line of the flex container.

Question 18

Align-items

Answer 18

Aligns flex items along the cross axis of the current line of the flex container.

Question 19

Object-fit

Answer 19

Specifies how the contents of a replaced element should be scaled relative to the box established by its used height and width.

Question 20

Font-weight

Answer 20

Makes text bolder

Question 21

Letter-spacing

Answer 21

Spacing between letters (pixels)

Question 22

Float

Answer 22

The float property is used to place an element on the left or right of its container, allowing other content (such as text) to wrap around it.

Question 23

Rem

Answer 23

The rem unit stands for root em, and is relative to the font size of the html element.

Create an .sm-text selector and set the font-size to 0.85rem, which would calculate to be roughly 13.6px (remember that you set your html to have a font-size of 16px).

Question 24

:not Pseudo selector

Answer 24

The :not pseudo-selector can be used to select all elements that do not match the given CSS rule.

Code:
div:not(#example) {
color: red;
}

Question 25

Aspect-ratio

Question 26

Targeting elements within elements

Answer 26

use < Code: nav > ul { }

Question 27

Action attribute on a form element

Answer 27

The URI of a program that processes the form information. This value can be overridden by a formaction attribute on a or element.

Question 28

Method attribute on a form element

Answer 28

The HTTP method that the browser uses to submit the form. Possible values are: post: Corresponds to the HTTP POST method ; form data are included in the body of the form and sent to the server. get: Corresponds to the HTTP GET method; form data are appended to the action attribute URI with a '?' as separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters. dialog: Use when the form is inside a element to close the dialog when submitted. This value can be overridden by a formmethod attribute on a or element.

Question 29

Role attribute

Answer 29

Indicates a purpose behind an element on a page to assistive technologies

Question 30

Aria-labelledby

Question 31

linking to a page within the website

Answer 31

href="#css-questions"

Question 32

name attributes

Question 33

Placeholder text

Answer 33

sometimes not always the best to do this since people may think that there is already text there

Question 34

span element

Question 35

linking inputs to labels

Answer 35

had to put id and name

Question 36

link in a text

Answer 36

Code: |