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

Stands for Cascading Style Sheets

  • Used to style a web page
  • Describes how HTML elements are displayed on screens, paper, and other forms of media
  • Saves a lot of time and work because it can format more than one webpage
  • Defines styles for webpages, from layouts, design, and format, in the way it displays on screen
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Describe the syntax of the CSS ruleset.

A

Consists of:

Selector (h1) - points towards the html element that will be styled

Declaration (property:value; property:value) - contains one or more declarations that are separated by semicolons. Also contains a CSS property name and value separated by a colon

Declaration blocks have curly braces around them

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

What are some characteristics of block?

A
  • Displays an element as a block

- Starts on a new line and takes up the whole width

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

What are some characteristics of inline?

A
  • Displays an element as inline
  • Can start on the same line
  • Height and width cannot be controlled
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What are some characteristics of inline block?

A
  • Displays an element as an inline-level block container
  • Element is formatted as an inline element
  • Can apply height width values
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

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

A

Contents will go horizontally from left to right

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

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

A

Flex items will try to fit onto one line and wrap as needed

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
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 size is unknown and/or dynamic.

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

What are the three primary parts of a layout system?

A
  • An element to be the container
  • One or more elements acting as the row
  • At least one column element in each of the row elements
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

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

A

.classname

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

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

A

selectors, declaration block, property, and value

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

In CSS, how do you select elements by their type?

A

elementname

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

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

A

idname

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

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

A 
Color Names (nameOfColor)
Hex Codes (#(######))
RGB Values (rgb(100, 100, 100)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

How do you write a comment in CSS?

A

/* comment here */

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

What CSS properties make up the box model?

A

Padding, margin, border, and content

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
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
18
Q

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

A

Padding

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

What is a pseudo-class?

A

A class added to a selector that specifies a special state of the selected element.

Example using :hover can change an element when user’s pointer hovers over said element.

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

What are CSS pseudo-classes useful for?

A

Allows you to add style to an element that is not only content related

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

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

A 
Pixels = precise number that makes up the units of a screen
Percentages = percentage of 16px
ems = width of the letter m
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

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

A

Font-family

23
Q

Examples of font-weight?

A
  • Normal

- Bold

24
Q

Examples of font-style?

A
  • Normal
  • Italic
  • Oblique
25
Q

Examples of text-transform?

A
  • Uppercase
  • Lowercase
  • Capitalize
26
Q

Examples of text-decoration?

A
  • None
  • Underline
  • Overline
  • Line-through
  • Blink
27
Q

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

A

Row, left -> right

28
Q

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

A

Fit all in one container

29
Q

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

A

Div elements are block so they always start on a new line

30
Q

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

A

Row, left -> right

31
Q

What is a utility class?

A

Classes named after what it is meant to do to an element.

They do not grow and are meant to be reused

Example class=column-fourth named after a behavior to make an element be 1/4ths of something

32
Q

What is a semantic class?

A

Class named after its element

33
Q

What is the default value for the position property of HTML elements?

A

Static

34
Q

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

A

Stays where it is in document flow.

Contains any elements with position:absolute.

35
Q

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

A

Its position would be set based on where it was originally.

36
Q

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

A

It’s content fills in the next non-static ancestor element (fill in a position:relative element)

37
Q

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

A

Positioning would be based on where it’s being contained.

38
Q

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

A

Using a relative positioned element as its container.

39
Q

What are the four box offset properties?

A

Top
Bottom
Left
Right

40
Q

What are the four components of “the Cascade”?

A
  • source order
  • inheritance
  • specificity
  • *!important
41
Q

What does the term “source order” mean with respect to CSS?

A

The priority in which styling goes.

Goes from weakest -> strongest

42
Q

How is it possible for styles of an element to be applied to its children as well without an additional CSS rule?

A

Using the inherit value

43
Q

List the three selector types in order of increasing specificity.

A 
type selector
class selector
id selector
44
Q

Why is using !important considered bad practice?

A

Makes debugging more difficult

It makes priority for that certain declaration way too strong

45
Q

What is a breakpoint in responsive Web design?

A

The point at which a media query is introduced.

Breakpoints occur when a change in display occurs

46
Q

What is the advantage of using percentage (eg. 50%) width instead of a fixed (eg. px) width for a “column” class in a responsive layout?

A

Items will scale to match the size of the viewport’s width

47
Q

If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?

A

Because according to rules of source order the later rule sets have priority over the earlier ones

48
Q

What is a media query?

A

Applies CSS when browser and device environment matches the rules stated

49
Q

What does the transform property do?

A

Let’s you rotate, scale, skew, or translate an element

50
Q

Give four examples of CSS transform functions.

A

transform: scale(2, 0.5); = changes the element to the values set
transform: rotate(0.5turn); = rotates the element to the values set
transform: matrix(1, 2, 3, 4) = sets element on a 2-D plane based on values set
transform: skew(15deg, 15deg) = skews an element on a 2-D plane based on values set

51
Q

Give two examples of media features that you can query in an @media rule.

A

color

aspect-ratio

52
Q

Which HTML meta tag is used in mobile-responsive web pages?

A

“viewport”

53
Q

The transition property is shorthand for which four CSS properties?

A

Transition-delay = specifies the duration to wait before starting a property’s transition effect when its value changes

Transition-duration = sets the length of time a transition animation should take to complete

Transition-property = sets the CSS properties to which a transition effect should be applied

Transition-timing-function = sets how intermediate values are calculated for CSS properties being affected by a transition effect

Web Development (11 decks)

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