Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

Web Development > CSS > Flashcards

CSS Flashcards

1
Q

What is CSS and what is it used for?

A

Cascading Style Sheets (CSS) is a textual language used to control the look and layout of webpage content.

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

What is a CSS Rule?

A

A CSS Rule specifies styling properties for specific HTML elements.

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

What HTML tag is used to attach a .css to a .html?

A

< link >

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

What is the syntax of a CSS rule?

A
  • A selector specifying the HTML element(s) to which the specific style rule applies
  • A declaration block containing one or more declarations separated by semicolons
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What are common CSS Rule Properties?

A
  • background-color
  • color
  • font-Family
  • font-size
  • padding
  • margin
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is a CSS color?

A

A pre-defined name, or an rgb value.

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

What is a CSS declaration?

A

A CSS property followed by a colon (:) and the value

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

What are the 3 ways CSS can be applied to HTML?

A
  • inline style (CSS declarations inside an elements style attribute)
  • embedded stylesheet (CSS rules in the style element in the documents head)
  • External Stylesheet (A separate file imported into the HTML via a link element)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

How are conflicts between CSS rules resloved?

A

By the degree of specificity; the more specific, the higher the priority.

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

What are the 3 common CSS selector types?

A
  • element selector (matches elements with specified names)
  • class selector (specified with a period character followed by the class name)
  • ID selector (specified with a hash character followed by ID name)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is a Descendent Selector?

A

Specified with a selector followed by a space and another selector, matches elements that are contained in other elements.

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

What is a Psuedo-Class Selector?

A

Specified with a colon character followed by a pseudo-class name, matches elements based on user behavior or element metainformation

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

What are common examples of Pseudo-Class Selectors?

A
  • :disabled (Element is disabled)
  • :hover (Mouse is hovering over the element)
  • :empty (Element has no child elements)
  • :lang(language) (Element contains text in a specified language.)
  • :nth-child(n) (Element is the parent element’s nth child)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

How are Class Selectors and Pseudo-Class Selectors combined?

A

With the class name, colon, then pseudo-class name

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

What is a Universal Selector, and how is it specified?

A

The universal selector matches all elements in the webpage. It is specified with the “*” character, but is the default if no element is provided.

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

What is a Multiple Selector, and how is it specified?

A

The Multiple Selector matches all listed elements, and is specified by listing the elements separated by a comma.

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

What is a Child Selector, and how is it specified?

A

Matches any elements where the second element is a direct child of the first element and is specified with the > character

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

What are sibling elements?

A

Elements that share the same parent element

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

What is a General Sibling Selector, and how is it specified?

A

Speficied with the ~ character, it matches the second element if the second element occurs after the first element and both elements are siblings.

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

What is an Adjacent Sibling Selector, and how is it specified?

A

Specified with the + character, it matches an element that immediately follows another element, where both elements have the same parent.

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

What is an Attribute Selector, and how is it specified?

A

It matches elements with the specified attribute or the specified attribute and value, and is specified with the attribute and value enclosed in square brackets.
Ex: img[alt^=”cat”]

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

What are the common Attribute Selector comparitors?

A
  • = (Attribute has exact value)
  • ~= (Attribute contains value)
  • ^= (Attribute starts with value)
23
Q

What is a Psuedo-Element Selector and how is it specified??

A

Matches parts of elements that are specified with element-name, two colons, and the psuedo element.
Ex: li::after

24
Q

What are the common pseudo-elements?

A
  • ::after (add style after element)
  • ::before (add style before element)
  • ::first-line (add style to first line of matched block element)
  • ::first-letter (add style to first letter of matched block element)
  • ::selection (style selected text)
25
Q

What are the ways to specifiy color in the Color CSS property?

A
  • RGB / RGBA
  • Decimal / Hexadecimal
  • HSL / HSLA
26
Q

What are the common Background properties?

A
  • background-color
  • background-image (specified with the none value or the url(‘URL’) function)
    -background (shorthand for setting several of the element’s background properties at the same time.)
27
Q

What is the CSS float property?

A

Specifies whether the element will float to the right or left of the element’s parent container, allowing text to flow around the element

28
Q

What are the values for the Float property?

A
  • none (Element does not float (default value))
  • left (Element floats to parent container’s left side)
  • right (Element floats to parent container’s right side)
29
Q

What is the CSS Clear Property?

A

It moves elements below previously floated elements.

30
Q

What are the values for the Clear property?

A
  • none (Element allowed to float (default value))
  • left (push below left floated elements)
  • right (push below right floated elements)
  • both (Stop floating on both sides)
31
Q

What is the Display Property?

A

A property controlling the layout of an element on a webpage.

32
Q

What are the common Display properties?

A
  • inline (Displays the element as an inline element, like span or a elements.)
  • block (Displays the element as a block element, like p, h1, or div elements.)
  • none (Hides the element from being displayed, like style elements.)
  • inline-block (Displays the contents of the element as a block element, but formats the element as an inline element.)
  • list-item (Displays the contents of the element as a list item element.)
33
Q

What is a CSS Variable?

A

A custom CSS property that defines a value.

34
Q

How is a CSS variable declared?

A

Within a CSS selector (defines the variable’s scope ) with two dashes, the variable name, colon, and vaue.
Ex: h1 { –mainColor: red; }

35
Q

How is a CSS variable accessed?

A

With the var() function.
Ex: p { color: var(–mainColor)}

36
Q

What are the common CSS text Properties?

A
  • text-align
  • text-decoration
  • text-transform
  • text-indent
37
Q

What are the common CSS font Properties?

A
  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant
  • font
38
Q

What is the box model?

A

A model that describes the size of each element as a series of nested boxes

39
Q

What are the 4 boxes in the Box Model?

A
  • Content
  • padding
  • border
  • margin
40
Q

What are the rendering rules of the Box Model?

A
  • The content is displayed with a background according to the element’s background color.
  • The padding is transparent and will be displayed using the same color as the element’s background.
  • The border can be either colored or transparent. If transparent, the border will be displayed with the same color as the padding.
  • The margin is transparent and will be displayed using the background color of the parent element.
41
Q

How many vlaues can margin and padding properties have?

A
  • 1 (all sides)
  • 2 (top /bottom, left / right)
  • 3 (top, left / right, bottom)
  • 4 (top, right, left, bottom)
42
Q

How are values for a single side assigned?

A

With the -side flag.
Ex: margin-bottom or padding-right

43
Q

What are the 3 sub-properties of the “border” property?

A
  • border-width
  • border-style
  • border-color
44
Q

How does collapsing of margins work in CSS?

A

Vertical margins of two elements can sometimes combine or collapse into a single vertical space. Horizontal margins never collapse

45
Q

What is are the four CSS position property values?

A
  • static
  • relative
  • fixed
  • absolute
46
Q

What CSS position property value is the default?

47
Q

Where does CSS position value ‘relative’ position elements?

A

Relative to the elements default position

48
Q

Where does CSS position value ‘fixed’ position elements?

A

Relative to the viewport in a fixed position

49
Q

Where does CSS position value ‘absolute’ position elements?

A

Relative to the nearest positioned ancestor that uses fixed, absolute, or relative positioning.
If no positioned ancestor element exists, then relative to the document body.

50
Q

What is a viewport?

A

A visible area of a webpage

51
Q

Given a specified CSS position value, what properties specificy position by pixel relative to that?

52
Q

What is the CSS z-index property?

A

It is used to specify a relative distance that orders the appearance of elements.
Elements with higher z-index values are placed on top of elements with lower z-index values.

54
Q

How is a CSS variable given global scope?

A

With the “:root” selector.

Web Development (5 decks)

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