Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

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
Examples of text-transform?
- Uppercase - Lowercase - Capitalize
26
Examples of text-decoration?
- None - Underline - Overline - Line-through - Blink
27
What is the default flex-direction of a flex container?
Row, left -> right
28
What is the default flex-wrap of a flex container?
Fit all in one container
29
Why do two div elements "vertically stack" on one another by default?
Div elements are block so they always start on a new line
30
What is the default flex-direction of an element with display:flex?
Row, left -> right
31
What is a utility class?
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
What is a semantic class?
Class named after its element
33
What is the default value for the position property of HTML elements?
Static
34
How does setting position: relative on an element affect document flow?
Stays where it is in document flow. Contains any elements with position:absolute.
35
How does setting position: relative on an element affect where it appears on the page?
Its position would be set based on where it was originally.
36
How does setting position: absolute on an element affect document flow?
It's content fills in the next non-static ancestor element (fill in a position:relative element)
37
How does setting position: absolute on an element affect where it appears on the page?
Positioning would be based on where it's being contained.
38
How do you constrain an absolutely positioned element to a containing block?
Using a relative positioned element as its container.
39
What are the four box offset properties?
Top Bottom Left Right
40
What are the four components of "the Cascade"?
- source order - inheritance - specificity - *!important
41
What does the term "source order" mean with respect to CSS?
The priority in which styling goes. Goes from weakest -> strongest
42
How is it possible for styles of an element to be applied to its children as well without an additional CSS rule?
Using the inherit value
43
List the three selector types in order of increasing specificity.
``` type selector class selector id selector ```
44
Why is using !important considered bad practice?
Makes debugging more difficult It makes priority for that certain declaration way too strong
45
What is a breakpoint in responsive Web design?
The point at which a media query is introduced. | Breakpoints occur when a change in display occurs
46
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?
Items will scale to match the size of the viewport's width
47
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?
Because according to rules of source order the later rule sets have priority over the earlier ones
48
What is a media query?
Applies CSS when browser and device environment matches the rules stated
49
What does the transform property do?
Let's you rotate, scale, skew, or translate an element
50
Give four examples of CSS transform functions.
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
Give two examples of media features that you can query in an @media rule.
color | aspect-ratio
52
Which HTML meta tag is used in mobile-responsive web pages?
"viewport"
53
The transition property is shorthand for which four CSS properties?
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.
© 2025 Bold Learning Solutions. Terms and Conditions