CSS & HTML Flashcards

(49 cards)

1
Q

What does CSS stand for?

A

Cascading Style Sheets

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

What is the primary purpose of CSS?

A

To style and lay out web pages

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

What is an external stylesheet?

A

A separate file with a .css extension that contains CSS

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

How do you link an external CSS stylesheet in HTML?

A

<link></link>

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

What is an internal stylesheet?

A

CSS placed within a <style> element inside the HTML <head></style>

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

What are inline styles?

A

CSS declarations that affect a single HTML element within a style attribute

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

True or False: Inline CSS is generally recommended for maintaining styles across multiple pages.

A

False

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

What is a class in CSS?

A

A way to group HTML elements and apply the same styles to them

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

How do you select elements by class in CSS?

A

Use a full stop before the class name (e.g., .special)

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

What is a descendant combinator in CSS?

A

A selector that targets elements based on their location within another element, using a space between selectors

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

What does the next-sibling combinator do?

A

Selects an element that is directly after a specified element, using a + between selectors

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

How do you style links in different states using CSS?

A

Using pseudo-classes like a:link, a:visited, and a:hover

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

What is specificity in CSS?

A

A set of rules that determines which CSS styles apply when selectors conflict

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

What does the calc() function do in CSS?

A

Performs simple math with values

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

What are CSS @rules?

A

Special rules that provide instructions for CSS behavior

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

Provide an example of a CSS shorthand property.

A

padding, margin, font, background, border

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

What are the two types of boxes in CSS?

A

Block and inline

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

What is the outer display type of a block box?

A

The box breaks onto a new line and respects width and height properties

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

How does an inline box behave?

A

It does not break onto a new line and width and height properties do not apply

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

What does the display property control?

A

The outer and inner display types of a box

21
Q

What is the purpose of the @media rule in CSS?

A

To create media queries for responsive layouts

22
Q

What is the significance of the cascade in CSS?

A

It determines which styles apply when multiple rules conflict based on their order

23
Q

What does the shorthand property padding: 10px 15px 15px 5px; represent?

A

Top: 10px, Right: 15px, Bottom: 15px, Left: 5px

24
Q

What does the inner display type dictate?

A

How elements inside a box are laid out

25
What is the effect of setting display: flex; on a box?
It makes direct children of the box behave as flex items
26
What does the selector li em { color: rebeccapurple; } target?
Any element that is inside an
  • element
  • 27
    What does the selector h1 + p { font-size: 200%; } do?
    Styles a

    element that directly follows an

    element

    28
    What happens to conflicting styles in CSS when specificity is involved?
    The style with higher specificity prevails
    29
    How can CSS be used to change the appearance of a link when hovered over?
    By using a:hover to alter styles like text-decoration
    30
    What is the default background color set in the media query example?
    Pink
    31
    What happens to the background color in the media query if the viewport is wider than 30em?
    It changes to blue
    32
    What is the default display behavior of the element?
    Inline, does not force line breaks
    33
    What display mode does the
      element use when set to display: inline-flex?
    Creates an inline box containing flex items
    34
    What is the CSS box model?
    Defines how different parts of a box interact: margin, border, padding, and content
    35
    What are the four parts of a box in the CSS box model?
    * Content box * Padding box * Border box * Margin box
    36
    How does the standard CSS box model calculate the actual space taken up by a box?
    Adds padding and border to the dimensions defined by width and height
    37
    What is the alternative CSS box model?
    The width and height include padding, activated by setting box-sizing: border-box
    38
    What does display: inline-block accomplish?
    A middle ground between inline and block, does not break onto a new line but respects width and height
    39
    What is normal flow in CSS layout?
    How the browser lays out HTML pages by default
    40
    What is Flexbox in CSS?
    Short for Flexible Box Layout, designed for one-dimensional layout
    41
    How do you enable Flexbox on a parent element?
    Apply display: flex
    42
    What is the purpose of the flex property in a Flexbox layout?
    Sets the flex property for child elements to control their growth
    43
    What is Grid Layout in CSS?
    Designed for two-dimensional layout, aligning items in rows and columns
    44
    What properties define the structure of a Grid Layout?
    * grid-template-columns * grid-template-rows
    45
    What happens to elements when they are floated in CSS?
    They are removed from normal flow and surrounding content floats around them
    46
    What are the possible values for the float property?
    * left * right * none * inherit
    47
    How do you create a multi-column layout in CSS?
    Use column-count or column-width properties
    48
    Fill in the blank: The _______ element does not respect width and height.
    span
    49
    True or False: The default value of the float property is 'none'.
    True