Brainscape's Knowledge GenomeTM

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


See full index

Web Development Foundations > CSS Fundamentals > Flashcards

CSS Fundamentals Flashcards

1
Q

Blank is a textual language for describing how a web page is styled for visual presentation.

A

CSS (Cascading Style Sheets)

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

Blank use CSS to determine how a web page is rendered on the screen, printed to paper, or presented via other media

A

Web browsers

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

The process of combining multiple style rules and resolving conflicting styles.

A

Cascading

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

Describes the visual presentation of structured documents.

A

Style Sheets

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

A web developer uses CSS to write a list of blank

A

rules

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

A blank consists of a selector followed by a declaration block between braces ({ }

A

CSS rule

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

A blank specifies the HTML elements to which the specific style rule applies.

A

CSS selector

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

A blank 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
9
Q

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

A

CSS styling declaration

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

Blank are only required to separate rule declarations

A

Semicolons

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

CSS can be applied to HTML in what three ways

A

An inline style
An embedded stylesheet
An external stylesheet

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

places CSS declarations inside a tag’s style attribute.

A

inline style

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

places CSS rules in an HTML document’s head using <style> tags.</style>

A

An embedded stylesheet

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

places CSS rules in a separate file that is imported into an HTML document with a <link></link> tag

A

An external stylesheet

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

The blank attribute may be used on any tag.

A

style

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

good practice is to place blank and blank tags inside the document head (before the <body> tag).

A

<style>

 and <link>
</style>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Every browser has a blank that specifies styling for each HTML element.

A

default stylesheet

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

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

A

inheritance

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

Each element blank the style declarations from the element’s parent.

A

inherits

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

When two style declarations with identical properties apply to the same element, a blank occurs

A

conflict

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

A parent’s style declaration conflicts with a child’s style declaration. Ex: The parent element’s text is blue, but a child element’s style declaration indicates the color should be green. When a conflict occurs, the blank overrides the blank.

A

child’s declaration
parent’s declaration

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

An embedded or external stylesheet’s style declaration conflicts with an inline style. Ex: An inline style says the element should be blue, but the embedded stylesheet says the element should be green. When a conflict occurs, an blank overrides the blank’s declaration.

A

inline style
embedded or external stylesheet

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

The browser uses blank, a scoring system that resolves more complex CSS conflicts, to determine what style declarations apply to an element.

A

specificity

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

The blank rule may be used on a style declaration to override other declarations and disregard specificity.

A

!important

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

The blank matches elements with the specified element names.
Ex: p { color: blue; } selects all p elements.

A

element selector

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

The blank, specified with a period character followed by the class name, matches elements that have the specified class name.
Ex: .notice { color: blue; } selects all elements with a class=”notice” attribute.

A

class selector

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

The blank, specified with a hash character followed by the ID name, matches the element that has the specified ID.
Ex: #byLine { color: blue; } selects the element with the id=”byLine” attribute.

A

ID selector

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

The blank, specified with a selector followed by a space and another selector, matches elements that are contained in other elements.
Ex: h2 em { color: blue; } selects em elements contained in h2 elements.

A

descendant selector

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

The blank, specified with a colon character followed by a pseudo-class name, matches elements based on user behavior or element metainformation.
Ex: :hover { color: blue; } selects elements under the mouse cursor.

A

pseudo-class selector

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

An HTML tag’s blank specifies the classes to which the tag belongs, with each class name separated by a space. Ex: <span> has two classes, highlight and first. While HTML elements’ IDs are unique, many elements may use the same HTML class name.</span>

A

class attribute

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

:enabled - means

A

Element is enabled.

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

:lang(language) - means

A

Element contains text in a specified language.

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

:empty - means

A

Element has no child elements.

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

:hover - means

A

Mouse is hovering over the element.

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

Blank and blank can combine with element names to match more specific elements. Ex: a:hover selects only the anchor tag the mouse is hovering over, and span.highlight selects only span elements that have the highlight class attribute.

A

Class selectors and pseudo-class selectors

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

The blank, specified using an asterisk character (*), matches all elements in the web page.

A

universal selector

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

The blank, specified using a comma (,) to separate selectors, matches all listed elements to apply a style rule. Ex: The figure below shows two CSS examples that apply the same styles to <ol> and <ul> elements.

A

multiple selector

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

The blank, specified using a greater than character (>) between two selectors, matches any elements where the second element is a direct child of the first element. The child selector is similar to the descendant selector (space between selectors), but the matching child element in the child selector must be a direct child of the matching parent element.

A

child selector

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

Blank are elements that share the same parent element.

A

Sibling elements

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

The blank, specified using a tilde character (~) between two selectors, matches the second element if the second element occurs after the first element and both elements are siblings. Any number of other elements can be placed between two general sibling elements.

A

general sibling selector

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

The blank, specified using a plus character (+) between two selectors, matches an element that immediately follows another element, where both elements have the same parent.

A

adjacent sibling selector

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

Blank are CSS selectors that match specific relationships between other selectors. The descendant, child, adjacent sibling, and general sibling selectors are all blank.

A

Combinators

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

The blank, specified with an attribute name and optional value comparison enclosed in square brackets ([ and ]), matches elements with the specified attribute or the specified attribute and value. Ex: a[target] selector matches anchor elements with a target attribute specified.

A

attribute selector

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

= means [target=”_blank”]
<a></a>

A

Attribute has exact value

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

~= means [alt~=”sad”]
<img></img>

A

Attribute contains whole word

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

^= means [class^=”nav”]

<ul>
<ul>
</ul></ul>

A

Attribute begins with value

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

The blank, specified with two colon characters (::) followed by a pseudo-element, matches parts of elements. The pseudo-element selectors allow 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

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

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

A

Add content after the matched element.

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

::before means li::before { content: “***” }

A

Add content before the matched element.

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

::first-line means p::first-line { color: red }

A

Match the first line of text in a block element.

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

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

A

Match the first letter of text in a block element.

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

::selection means ::selection { background: yellow }

A

Matches the text selected by user.

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

The blank CSS property changes the text color to a specified color value

A

color

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

CSS defines blank color names. Ex: white, blue, black, gray, forestgreen, magenta.

A

140

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

An blank specifies a color using the rgb(red, green, blue) function by indicating the red, green, and blue intensities. Each intensity for red, green, and blue is between 0 and 255, where 0 is the lowest intensity and 255 is the highest.

A

RGB color value

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

A blank specifies a color using the #RRGGBB format by indicating the red, green, and blue intensities. Each intensity for red, green, and blue is between 00 and FF hexadecimal numbers, where 00 is the lowest intensity and FF is the highest.
Ex: #000000 is black, #0000FF is blue, #FFFF00 is yellow, and #FFFFFF is white.

A

hexadecimal color

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

An blank specifies a color using the hsl(hue, saturation, lightness) function by indicating the hue, saturation, and lightness values. The hue value ranges between 0 and 360, and the saturation and lightness values range between 0% and 100%. Ex: hsl(0, 0%, 0%) is black, hsl(120, 100%, 50%) is green, and hsl(0, 100%, 25%) is dark red.

The HSL color specification method is harder to understand and is not used as frequently as the RGB and hexadecimal color specification methods.

A

HSL color value

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

The RGB and HSL color values can add an blank to allow for transparency. The RGBA color value specifies a color using the rgba(red, green, blue, alpha) function by indicating the red, green, blue, and alpha intensities. The HSLA color value specifies a color using the hsla(hue, saturation, lightness, alpha) function by indicating the hue, saturation, lightness, and alpha intensities. The intensities have the same ranges as for RGB or HSL color values, but the alpha intensity is between 0 and 1. An alpha of 0 means fully transparent, 1 means fully opaque, and 0.5 means half transparent.

A

alpha value

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

Every element in a web page has a set of blank. The web browser first draws the element’s background and then draws the element’s content. If the element’s background is not fully opaque, the element’s parent is visible under the element’s content.

A

background properties

60
Q

The blank property specifies the background color.

A

background-color

61
Q

The blank property specifies a background image.

A

background-image

62
Q

The blank is shorthand for setting several of the element’s background properties at the same time.

A

background property

63
Q

By default, the initial background color is blank and background image is blank, which means the element’s parent’s background will display underneath the element’s content. When a background color and image are both specified, the background image is rendered on top of the color.

A

transparent
none

64
Q

CSS properties blank and blank control how text flows around HTML elements, making web pages look like a magazine or newspaper article where the article’s text wraps around the images in the page.

A

float and clear

65
Q

The blank property specifies whether the element will float to the right or left of the element’s parent container, allowing text to flow around the element.

A

float

66
Q

Name the three float values

A

left - Element floats to parent container’s left side
right - Element floats to parent container’s right side
none - Element does not float (default value)

67
Q

The blank property can stop elements from floating.

A

clear

68
Q

Name the four Values for the clear property

A

both - No elements allowed to float
left - No element allowed to float on parent container’s left side
right - No element allowed to float on parent container’s right side
none - Elements allowed to float (default value)

69
Q

The blank property controls the layout of the element on a web page

A

display

70
Q

Name the five values for the display property:

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.

71
Q

A blank is a custom CSS property that defines a value. A CSS variable is declared in a CSS selector that defines the variable’s scope. A CSS variable can have global scope by declaring the variable in the :root selector, which targets the highest DOM element: the <html> element.

A

CSS variable

72
Q

A CSS variable is defined with blank. Ex: –my-variable: red; A CSS variable is accessed with the var() function. Ex: var(–my-variable);

A

two dashes preceding the variable name

73
Q

The blank property specifies the font family, such as “Times New Roman” or serif.

A

font-family

74
Q

The blank property changes the font size, such as 120%, small, or 12px.

A

font-size

75
Q

The blank property specifies the font weight, such as normal or bold.

A

font-weight

76
Q

The blank property changes the text style, such as normal, italic, or oblique.

A

font-style

77
Q

The blank property specifies the variant of the text, such as normal or small-caps.

A

font-variant

78
Q

The blank property is shorthand for setting several font properties at the same time. Ex: font: italic 12pt Georgia, serif;

A

font

79
Q

The blank property contains a list of fonts specified as a family name or a generic family separated by commas.

A

font-family

80
Q

A blank is the name of a specific font, like “Times New Roman”, “Arial”, or “Georgia”. Family names containing spaces must be wrapped in quotations marks, while family names without spaces do not.

A

family name

81
Q

A blank is a general group of fonts, like serif, sans-serif, cursive, fantasy, or monospace. Ex: Times New Roman and Georgia are both serif fonts because the fonts contain serifs, which are small strokes attached to the end of larger strokes on each letter.

A

generic family

82
Q

Good practice is to start the list with the blank and end with a blank. Ex: font-family: Arial, Helvetica, sans-serif;

A

intended font
generic family

83
Q

“Embellishments” like finishing strokes or flare ends Garamond
Georgia
Times New Roman

A

Serif

84
Q

Plain stroke ends Arial
Helvetica
Verdana

A

Sans-Serif

85
Q

Cursive or calligraphy characteristics like joined strokes Brush Script MT
Comic Sans MS
Lucida Handwriting

A

Cursive

86
Q

Decorative Impact
Luminari

A

Fantasy

87
Q

Constant width for letters, punctuation, and space Consolas
Courier New

A

Monospace

88
Q

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

A

web font

89
Q

The blank can be specified using a predefined size name, a relative size name, or a number with an absolute or relative size unit.

A

font size

90
Q

The predefined size names are blank, blank, blank, blank, blank, blank, blank where medium is the default size.

A

xx-small, x-small, small, medium, large, x-large, and xx-large,

91
Q

The blank names are smaller and larger which change the font size for an element to be smaller or larger than the font size of the parent element.

A

relative size

92
Q

An blank is a size that is fixed and independent of other CSS sizes.

A

absolute size

93
Q

Absolute size units include what units (6):

A

cm - centimeters
mm - millimeters
in - inches
px - pixels (1px = 1/96in)
pt - points (1pt = 1/72in)
pc - pica (1pc = 12pt)

94
Q

A blank is a size that is relative to another size.

A

relative size

95
Q

Some common relative size units include what units:

A

em
rem
vw
vh
%

96
Q

Relative to the element’s font size. Ex: 2em = 2 × current font size.

A

em

97
Q
  • Relative to the root element’s font size. Ex: 1.5rem = 1.5 × <html> element’s font size.
A

rem

98
Q
  • 1% of the viewport’s width. Ex: 10vw = 10% of browser’s width.
A

vw

99
Q
  • 1% of the viewport’s height. Ex: 5vh = 5% of browser’s height.
A

vh

100
Q
  • Percentage of the element’s font size. Ex: 120% = 20% larger than the current font size.
A

%

101
Q

Most web browsers use a default font size of blank

A

16px

102
Q

The blank property changes the horizontal alignment of text for an element.

A

text-align

103
Q

text-align possible values

A

left, right, center, and justify.

104
Q

The blank property can add or remove text decorations like underlining or a line-through.

A

text-decoration

105
Q

text-decoration possible values

A

overline, line-through, underline, and none.

106
Q

The blank property converts letters to UPPERCASE, lowercase, or Capitalizes Initial Letters.

A

text-transform

107
Q

text-transform possible values

A

uppercase, lowercase, and capitalize.

108
Q

The blank property specifies the first line’s indentation amount.

A

text-indent

109
Q

The CSS blank is commonly used to remove the default underline from links. The underline helps users quickly identify links, so developers should use caution when removing link underlines. Relying solely on color to identify links can be problematic to users that are color blind or insensitive.

A

text-decoration:none

110
Q

The blank describes the size of each element as a series of nested boxes

A

box model

111
Q

The box model is important to understand when considering blank and blank

A

design and layout.

112
Q

The innermost box contains the blank of the element, such as text and images.

A

Content

113
Q

The blank box contains the content box and adds a transparent area around the content.

A

Padding

114
Q

The blank property specifies the blank thickness. Ex: padding: 5px; creates a 5 pixel padding around the content.

A

padding

115
Q

The blank box contains the padded content and adds an optionally colored area around the padding.

A

border

116
Q

The blank box contains all three boxes and adds a transparent area around the border.

A

margin

117
Q

The blank property specifies the blank’s thickness, style, and color. Ex: border: 2px solid blue; creates a solid blue border that is 2 pixels thick.

A

border

118
Q

The blank property specifies the margin thickness. Ex: margin: 10px; creates a 10 pixel margin.

A

margin

119
Q

The blank is displayed with a background according to the element’s background color.

A

content

120
Q

The blank is transparent and will be displayed using the same color as the element’s background.

A

padding

121
Q

The blank can be either colored or transparent. If transparent, the border will be displayed with the same color as the padding.

A

border

122
Q

The blank is transparent and will be displayed using the background color of the parent element.

A

margin

123
Q

The blank and blank properties may have from 1 to 4 values

A

padding and margin

124
Q

One value - Specifies blank thickness around the box. Ex: margin: 20px; specifies 20px margin thickness around the box.

A

uniform

125
Q

Two values - Specifies blank, blank thickness. Ex: margin: 10px 20px; specifies 10px top and bottom margins and 20px right and left margins.

A

top and bottom, right and left

126
Q

Three values - Specifies blank, blank and blank, blank thickness. Ex: margin: 10px 30px 20px; specifies 10px top margin, 30px right and left margins, and 20px bottom margin.

A

top, right and left, and bottom

127
Q

Four values - Specifies blank, blank, blank, and blank thickness. Ex: margin: 10px 30px 20px 40px; specifies 10px top margin, 30px right margin, 20px bottom margin, and 40px left margin.

A

top, right, bottom, and left

128
Q

The padding, border, and margin CSS properties can apply only to one side by adding a blank, blank, blank, or blank suffix to the CSS property. Ex: padding-top:5px; specifies 5 pixels of padding above the content.

A

-top, -left, -bottom, or -right

129
Q

A block element’s content spans the width of the enclosing parent element by default, but the content size can be changed with the blank and blank CSS properties:

A

width and height

130
Q

The blank property specifies the content’s width. Ex: width: 20px; makes the content 20px wide.

A

width

131
Q

The blank property specifies the content’s height. Ex: height: 30px; makes the content 30px high.

A

height

132
Q

A common error is to use width or height on blank. An inline element like <span> has a width and height that is equal to the size of the element’s content. The width and height cannot be changed unless the inline element’s display property is changed to blank</span>

A

inline elements
inline-block.

133
Q

The blank property specifies the border’s width. Ex: border-width: 5px; specifies a border that is 5px thick.

A

border-width

134
Q

The blank property specifies the border’s style. Ex: border-style: dashed; specifies a border that is dashed.

A

border-style

135
Q

The blank property specifies the border’s color. Ex: border-color: green; specifies a border that is green.

A

border-color

136
Q

Name the 9 common border styles

A

solid
dashed
dotted
none
double
groove
ridge
inset
outset

137
Q

Blank of two elements can sometimes combine or collapse into a single vertical space.

A

Vertical margins

138
Q

Blank margins never collapse

A

Horizontal

139
Q

When an element has the margin property set to blank, the browser will compute the left and right margins to use up the remaining width of the parent element.

A

auto

140
Q

The auto margin value is useful for blank centering an element in the parent element

A

horizontally

141
Q

A common error is to use margin:auto on elements that do not have the width specified or have blank, such as span elements.

A

display:inline

142
Q

Blank are used to define the page element length like font-size, height, width, and border, among other properties

A

CSS units

143
Q

Another point to consider about the number is that it can be blank or blank. The negative position in Figure 5.8.2 indicates that the element in the box model will collapse the margin.

A

positive or negative

144
Q

Blank consist of physical measurements that are fixed, meaning they are not related to other properties.

A

Absolute units

145
Q

Blank define a length based on another relative length property like font parent or size of a viewport. Relative units are mostly for pages that will be used on various screen sizes because the relative unit adapts itself to screen dimensions.

A

relative units

Web Development Foundations (6 decks)

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