Brainscape's Knowledge GenomeTM

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


See full index

D276 - Web Development Foundations > 5. CSS Fundamentals > Flashcards

5. CSS Fundamentals Flashcards

1
Q

A CSS ____ consists of a selector followed by a declaration block between braces ({})

A

rule

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

A CSS ____ specifies the HTML elements to which the specific style rule applies

A

selector

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

A ____ contains one or more declarations separated by semicolons (;)

A

declaration block

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

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

A

declaration

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

What are the three ways that CSS can be applied to HTML?

A
  1. inline style (CSS declarations are placed inside of an elements “style” attribute)
  2. embedded stylesheet (places CSS rules in an HTML document’s head using a <style> element)
  3. external stylesheet (places CSS rules in a separate file that is imported into an HTML document with a <link> element)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

The style declarations from a parent element ____ down and are applied to any child elements, a concept called ____

A

cascade, inheritance

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

When a style conflict occurs between a parent element and a child element, which styling takes precedence?

A

The child element’s styling

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

When a style conflict occurs between an embedded or external stylesheet and an inline style, which styling takes precedence?

A

The inline style

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

What are the three different types of CSS selectors, and how are they written?

A
  1. element selector
    p { color: blue; }
  2. class selector
    .notice { color: blue; }
  3. id selector
    #byLine { color: blue }
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

How do you specify an element’s class in HTML?

A

<p class=”gr”>Moon</p>

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

How do you indicate that an element belongs to more than one class?

A

<span class=”highlight first”>

The space separates the two class names

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

How do you specify an element’s id in HTML?

A

<p id=”second”>Blade Runner</p>

** An id can only be used in a single element, whereas a class can be used in multiple elements

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

What is a descendant selector? How is it written, and what does it do?

A

It matches elements that are contained in other elements.

It is written as a selector followed by a space followed by another selector.

Example:
h2 em { color: blue; }

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

The ____ selector matches elements based on user behavior or element metainformation

A

pseudo-class

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

How is a pseudo-class selector written?

A

Element followed by a colon followed by a pseudo-class

a:hover {
}

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

How can you write a selector that selects only elements that have a particular class?

A

Element followed by a period followed by the class name

span.highlight

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

What are some common pseudo-classes?

A

:disabled - Element is disabled

:hover - Mouse is hovering over 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
18
Q

The ____ selector matches all elements in the webpage.

A

universal

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

How is the universal selector specified?

A

With an asterisk

*.highlight

The universal selector is implied when an element name is not specified.

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

The ____ selector matches all listed elements to apply a style rule.

A

multiple

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

How is a multiple selector specified?

A

With a comma separating selectors

ul, ol {
background-color: gray;
}

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

The ____ selector matches any elements where the second element is a direct child of the first element.

A

child

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

How is the child selector specified?

A

With a greater than sign

p > em {
background-color: yellow;
}

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

How is the child selector (>) different from the descendant selector ( )?

A

The matching child element in the child selector must be a direct child of the matching parent element.

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

____ elements are elements that share the same parent element.

A

Sibling

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

The general sibling selector is specified with the ____ character between two selectors, and it matches the second element if the second element occurs ____ the first element and both elements are ____.

A

~, after, siblings

h1 ~ p {
border-top: 1px solid gray;
}

Any number of other elements can be placed between two general sibling elements

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

The ____ sibling selector, specified using a ____ character between two selectors, matches an element that ____ follows another element, where both elements have the same parent

A

adjacent, plus (+), immediately

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

____ are CSS selectors that match specific relationships between other selectors.

A

Combinators

The descendant, child, adjacent sibling, and general sibling selectors are all combinators

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

What type of selector is the following?

a[target=”_blank”]

A

Attribute selector

The attribute selector can be more specific by matching elements with attributes having a specific value. Ex: a[target=”_blank”] attribute selector matches anchor elements with a target attribute value of _blank.

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

Which attribute selector comparator matches an element when its attribute has the exact value specified?

A

=

[target=”_blank”]

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

Which attribute selector comparator matches an element when the attribute contains the whole word specified?

A

~=

[alt~=”sad”]

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

Which attribute selector comparator matches an element when the attribute begins with a value?

A

^=

[class^=”nav”]

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

What type of selector matches parts of elements?

In other words, which selector allows styles to apply to the first line or first letter of text of an element or to text that is selected by the user, or allow additional content to be inserted before or after an element?

A

pseudo-element selector

34
Q

With what character(s) is the pseudo-element selector specified?

A

Two colons

li::after { content: “<”; }

35
Q

What are common pseudo-element specifiers?

A

::after - Add content after the matched element

li::after { content: "<" }

::before - Add content before the matched element

li::before { content: "***" }

::first-line - Match the first line of text in a block element

p::first-line { color: red }

::first-letter - Match the first letter of text in a block element

p::first-letter { font-size:200% }

::selection - Matches the text selected by user

::selection { background: yellow }
36
Q

What CSS property changes the text color to a specified color value?

A

color

37
Q

In what different ways can a color be specified in CSS?

A
  • Color name (for 140 colors)
  • RGB color value - rgb(0, 0, 0)
  • Hexadecimal value - #FFFF00
  • HSL color value - hsl(120, 100%, 50%)
38
Q

What value can be added to RGB and HSL colors to allow for transparency, and what is the range for this value?

A

alpha, 0 to 1 (0 = fully transparent, 1 = opaque)

39
Q

Which CSS property specifies the background color for an element?

A

background-color

40
Q

Which CSS property specifies a background image for an element?

A

background-image

41
Q

How are background images for elements specified?

A

Either with the “none” keyword or by the URL function

url(‘URL’)

42
Q

Which CSS property specifies whether the element will be positioned to the right or left of the element’s parent container, allowing text to flow around the element?

A

float

Values for the float property:
- 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
43
Q

Which CSS property moves elements below previously floated elements?

A

clear

Values for the clear property:
- none - Element allowed to float (default value)

  • left - Stop floating on parent container’s left side
  • right - Stop floating on parent container’s right side
  • both - Stop floating on both sides
44
Q

Which CSS property controls the layout of the element on a webpage?

A

display

45
Q

What are the values for the display property in CSS?

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

inline-block - Displays the contents of the element as a block element, but formats the element as an inline element

none - Hides the element from being displayed, like style elements

list-item - Displays the contents of the element as a list item element

46
Q

A CSS ____ is a custom CSS property that defines a value.

A

variable

47
Q

How can a CSS variable be given a global scope?

A

by declaring the variable in the :root selector which targets the highest DOM element: the <html> element.

48
Q

How is a CSS variable defined?

A

With two dashes preceding the variable name

:root {
–main-color: red;
–main-bg-color: yellow;
}

49
Q

How is a CSS variable accessed?

A

With the var() function

var(–my-variable)

50
Q

What are some of the main CSS properties for setting font properties?

A

font-family - (Times New Roman, serif)

font-size - (120%, small,12px)

font-weight - (normal, bold)

font-style - (normal, italic, oblique)

font-variant - (normal, small-caps)

The “font” property can set several font properties at the same time:

font: italic 12pt Georgia, serif;

51
Q

A ____ in CSS is the name of a specific font, like “Times New Roman”

A

family name

52
Q

If family names contain spaces, how should they be identified?

A

Surrounded by quotation marks

53
Q

A ____ in CSS is a general group of fonts, like serif, sans-serif

A

generic family

54
Q

What is best practice for writing the value of the font-family property?

A

Start with the intended font and end with a generic family

font-family: Arial, Helvetica, sans-serif;
55
Q

A ____ is a CSS feature that allows custom fonts to be downloaded to the web browser

A

web font

56
Q

Fonts can be declared with either ____ sizes or ____ sizes

A

absolute, relative

57
Q

What are common relative sizes?

A

em - Relative to the element’s font size

ex - x-height of the actual font

ch - width of the zero

rem - Relative to the root element’s font size

vw - 1% of the viewport’s width

vh - 1% of the viewport’s height

vmin - 1% of viewport’s smaller dimension

vmax - 1% of viewport’s larger dimension

% - Percentage of the element’s font size

58
Q

The ____ CSS property changes the horizontal alignment of text for an element

A

text-align

59
Q

What are the available values for the text-align property?

A

left, right, center, justify

60
Q

The ____ CSS property can add or remove properties of text like underline or strike-through

A

text-decoration

61
Q

What are the different values for the text-decoration property?

A

overline, line-through, underline, none

62
Q

The ____ CSS property transforms text to UPPERCASE, lowercase, or Capitalizes Initial Letters

A

text-transform

63
Q

The ____ CSS property specifies the first line’s indentation amount

A

text-indent

64
Q

The ____ model describes the size of each HTML element as a series of nested boxes.

A

box

65
Q

The name for the innermost box in the CSS box model

A

content

66
Q

This box contains the content box and adds a transparent area around the content

A

padding

67
Q

This box contains the padded content and adds an optionally colored area around the padding

A

border

68
Q

This box contains all three boxes and adds a transparent area around the border

A

margin

69
Q

Is the padding box colored or transparent?

A

Transparent. It will be displayed using the same color as the element’s background

70
Q

What will be the background color of the margin box?

A

It will be the background color of the parent element

71
Q

For the padding and margin properties, what does it mean if 1, 2, 3, or 4 values are identified?

A

1: uniform thickness around the box

2: specifies top and bottom, right and left thickness

3: specifies top, right and left, and bottom thickness

4: specifies top, right, bottom, and left thickness

72
Q

The ____ and ____ properties can change the content size of a block element’s content

A

width, height

73
Q

The border property combines the border ____, ____, and ____.

A

width, style, color

74
Q

The vertical margins of two elements can ____.

A

combine or collapse

The resulting margin size equals the top element’s bottom margin or the bottom element’s top margin, whichever is larger

75
Q

What CSS property and value can you use to horizontally center a block element?

A

margin and auto

margin: 0px auto;
76
Q

What are different absolute sizes that can be used in a web page?

A

cm
mm
Q (quarter-millimeters)
in
pc (picas, 1/16 in)
pt (1/72 in)
px (1/96 in)

77
Q

CSS ____ determines which style rules take precedence when multiple rules target the same element

A

specificity

78
Q

What styling takes precedence over id, class, and element selectors?

A

Inline styles

79
Q

In CSS hierarchy, what other selectors are at the same specificity level as classes?

A

Pseudo-classes and attribute selectors

80
Q

What other selector has the same general level of specificity as an element selector?

A

Pseudo-element selector

** Although pseudo-elements have a specificity of 0, 0, 0, 1, they often combine with the specificity level of other elements or classes, giving the combination a higher precedence

D276 - Web Development Foundations (7 decks)

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