Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Web Development > CSS > Flashcards

CSS Flashcards

1
Q

What is the purpose of CSS?

A

CSS is used to define the styles of web pages, including the design, layout, and variations in display for different devices and screen sizes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Describe the syntax of a CSS rule-set.

A

A selector for the type (element), class, or ID
Specificity priorities are ID>class>type (element)

A declaration block explaining the rules trying to be applied
Each declaration has a property followed by value(s) and a semi-colon (;)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Cascade (Operations and Priorities)

A

An element’s descendants will inherit the CSS properties from the rule-set

The last CSS property overwrites earlier CSS properties for the same declarations

Declarations from more specific selectors take priority, regardless of which ones were earlier or later in the code

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What CSS properties make up the box model?

A

The CSS box model is a box that wraps around every HTML element, consisting of margins, borders, padding, and actual content.

Content is where text, images, etc appear

Padding transparently clears an area around the content

Border is what goes around the padding and the content

Margin transparently clears the area outside of the border

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Which CSS property pushes boxes away from each other?

A

Margin

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Which CSS property pushes box content away from its border?

A

Padding

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What are some characteristics of block?

A

Displays an element on a new line and takes up the whole width (like a <p> element)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are some characteristics of inline?

A

Displays an element and any height and width properties have no effect

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are some characteristics of inline-block?

A

Displays an element in-line, but you can apply height and width values

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is the default flex-direction of a flex container?

A

Row - left to right in ltr and right to left in rtl

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is the default flex-wrap of a flex container?

A

Nowrap - all flex items will be on one line

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is one of the uses of flexbox?

A

Providing an efficient way to lay out, align, and distribute space among items in a container, even when their sizes are unknown and/or dynamic.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What are the three primary parts of a layout system?

A

The Container
An element that acts as the boundary enclosing the other two primary parts - the row(s) and column(s)

Row(s)
One or more elements that are referred horizontally

Column(s)
One or more elements that are referred vertically

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What are the names of the individual pieces of a CSS rule?

A

Ruleset/Rule with first the selector then the declaration(s)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

In CSS, how do you select elements by their class attribute?

A

.class-name

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

In CSS, how do you select elements by their tag name?

A

tag-name

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

In CSS, how do you select an element by its id attribute?

A

id-name

18
Q

Name three different type of values you can use to specify colors in CSS

A

HSL, rgb, hexcode, name

19
Q

What CSS properties make up the box model?

A

Height, width, padding, border, and margin

20
Q

Which CSS property pushes boxes away from each other?

A

Margin

21
Q

Which CSS property adds space between a box’s content and its border?

A

Padding

22
Q

What is a pseudo-class

A

It is a keyword added to a selector that specifies a special state of the selected element(s)

23
Q

What are CSS pseudo-classes useful for?

A

For selectively affecting elements during specific special states

24
Q

Name two types of units that can be used to adjust the font-size in CSS

A

Rem, px, em, percentages

25
Q

What CSS property controls the font used for the text inside an element

A

Font-family

26
Q

What is the default flex-direction of a flex container?

A

Row

27
Q

What is the default flex-wrap of a flex container?

A

Nowrap

28
Q

Why do two div elements “vertically stack” on one another by default?

A

Because they are block elements

29
Q

What is the default flex-direction of an element with display:flex?

A

Row

30
Q

What are the three primary components of a page layout? (Which helper classes do you need?)

A

.container, .row, .class

31
Q

What is the minimum number of columns that you should put in a row?

A

One

32
Q

What is the purpose of a container?

A

To establish the space that can be used

33
Q

What is the purpose of a row?

A

To show content horizontally

34
Q

What is the default position property of HTML elements?

A

Static

35
Q

How does setting the position: relative on an element affect the document flow?

A

It remains in the document flow as normal, but its own position has just shifted

36
Q

How does setting position: relative on an element affect where it is on the page?

A

Using the top left down and right properties shift it over in their respective opposite directions

37
Q

How does setting position: absolute on an element affect document flow?

A

It is removed from document flow, and treated as if it is on its own layer

38
Q

How does setting position: absolute on an element affect where it appears on the page?

A

Using the top left down and right properties move it that amount of space from its respective property

39
Q

How do you constrain an absolutely positioned element to a containing block

A

It is constrained to its nearest containing block. If there is no containing block, it treats the 100vh and 100vw as its containing block. The containing block is formed by the edge of the padding box of the nearest ancestor element that has a position other than static.

40
Q

What are the four box offset properties?

A

Top bottom left right

Web Development (3 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions