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)
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
3
Q
The process of combining multiple style rules and resolving conflicting styles.
A
Cascading
4
Q
Describes the visual presentation of structured documents.
A
Style Sheets
5
Q
A web developer uses CSS to write a list of blank
A
rules
6
Q
A blank consists of a selector followed by a declaration block between braces ({ }
A
CSS rule
7
Q
A blank specifies the HTML elements to which the specific style rule applies.
A
CSS selector
8
Q
A blank contains one or more declarations separated by semicolons (;)
A
declaration block
9
Q
A blank is a CSS property followed by a colon (:) and the property value.
A
CSS styling declaration
10
Q
Blank are only required to separate rule declarations
A
Semicolons
11
Q
CSS can be applied to HTML in what three ways
A
An inline style
An embedded stylesheet
An external stylesheet
12
Q
places CSS declarations inside a tag’s style attribute.
A
inline style
13
Q
places CSS rules in an HTML document’s head using <style> tags.</style>
A
An embedded stylesheet
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
15
Q
The blank attribute may be used on any tag.
A
style
16
Q
good practice is to place blank and blank tags inside the document head (before the <body> tag).
A
<style>
and <link></style>
17
Q
Every browser has a blank that specifies styling for each HTML element.
A
default stylesheet
18
Q
The style declarations from a parent element cascade down and are applied to any child elements, a concept called blank.
A
inheritance
19
Q
Each element blank the style declarations from the element’s parent.
A
inherits
20
Q
When two style declarations with identical properties apply to the same element, a blank occurs
A
conflict
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
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
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
24
Q
The blank rule may be used on a style declaration to override other declarations and disregard specificity.
A
!important
25
The blank matches elements with the specified element names.
Ex: p { color: blue; } selects all p elements.
element selector
26
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.
class selector
27
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.
ID selector
28
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.
descendant selector
29
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.
pseudo-class selector
30
An HTML tag's blank specifies the classes to which the tag belongs, with each class name separated by a space. Ex: has two classes, highlight and first. While HTML elements' IDs are unique, many elements may use the same HTML class name.
class attribute
31
:enabled - means
Element is enabled.
32
:lang(language) - means
Element contains text in a specified language.
33
:empty - means
Element has no child elements.
34
:hover - means
Mouse is hovering over the element.
35
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.
Class selectors and pseudo-class selectors
36
The blank, specified using an asterisk character (*), matches all elements in the web page.
universal selector
37
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
- and
- elements.
multiple selector
38
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.
child selector
39
Blank are elements that share the same parent element.
Sibling elements
40
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.
general sibling selector
41
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.
adjacent sibling selector
42
Blank are CSS selectors that match specific relationships between other selectors. The descendant, child, adjacent sibling, and general sibling selectors are all blank.
Combinators
43
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.
attribute selector
45
~= means [alt~="sad"]
Attribute contains whole word
46
^= means [class^="nav"]
Attribute begins with value
47
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.
pseudo element selector
48
::after means li::after { content: "<" }
Add content after the matched element.
49
::before means li::before { content: "***" }
Add content before the matched element.
50
::first-line means p::first-line { color: red }
Match the first line of text in a block element.
51
::first-letter means p::first-letter { font-size:200% }
Match the first letter of text in a block element.
52
::selection means ::selection { background: yellow }
Matches the text selected by user.
53
The blank CSS property changes the text color to a specified color value
color
54
CSS defines blank color names. Ex: white, blue, black, gray, forestgreen, magenta.
140
55
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.
RGB color value
56
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.
hexadecimal color
57
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.
HSL color value
58
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.
alpha value
59
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.
background properties
60
The blank property specifies the background color.
background-color
61
The blank property specifies a background image.
background-image
62
The blank is shorthand for setting several of the element's background properties at the same time.
background property
63
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.
transparent
none
64
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.
float and clear
65
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.
float
66
Name the three float values
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
The blank property can stop elements from floating.
clear
68
Name the four Values for the clear property
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
The blank property controls the layout of the element on a web page
display
70
Name the five values for the display property:
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
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 element.
CSS variable
72
A CSS variable is defined with blank. Ex: --my-variable: red; A CSS variable is accessed with the var() function. Ex: var(--my-variable);
two dashes preceding the variable name
73
The blank property specifies the font family, such as "Times New Roman" or serif.
font-family
74
The blank property changes the font size, such as 120%, small, or 12px.
font-size
75
The blank property specifies the font weight, such as normal or bold.
font-weight
76
The blank property changes the text style, such as normal, italic, or oblique.
font-style
77
The blank property specifies the variant of the text, such as normal or small-caps.
font-variant
78
The blank property is shorthand for setting several font properties at the same time. Ex: font: italic 12pt Georgia, serif;
font
79
The blank property contains a list of fonts specified as a family name or a generic family separated by commas.
font-family
80
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.
family name
81
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.
generic family
82
Good practice is to start the list with the blank and end with a blank. Ex: font-family: Arial, Helvetica, sans-serif;
intended font
generic family
83
"Embellishments" like finishing strokes or flare ends Garamond
Georgia
Times New Roman
Serif
84
Plain stroke ends Arial
Helvetica
Verdana
Sans-Serif
85
Cursive or calligraphy characteristics like joined strokes Brush Script MT
Comic Sans MS
Lucida Handwriting
Cursive
86
Decorative Impact
Luminari
Fantasy
87
Constant width for letters, punctuation, and space Consolas
Courier New
Monospace
88
A blank is a CSS feature that allows custom fonts to be downloaded to the web browser.
web font
89
The blank can be specified using a predefined size name, a relative size name, or a number with an absolute or relative size unit.
font size
90
The predefined size names are blank, blank, blank, blank, blank, blank, blank where medium is the default size.
xx-small, x-small, small, medium, large, x-large, and xx-large,
91
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.
relative size
92
An blank is a size that is fixed and independent of other CSS sizes.
absolute size
93
Absolute size units include what units (6):
cm - centimeters
mm - millimeters
in - inches
px - pixels (1px = 1/96in)
pt - points (1pt = 1/72in)
pc - pica (1pc = 12pt)
94
A blank is a size that is relative to another size.
relative size
95
Some common relative size units include what units:
em
rem
vw
vh
%
96
Relative to the element's font size. Ex: 2em = 2 × current font size.
em
97
- Relative to the root element's font size. Ex: 1.5rem = 1.5 × element's font size.
rem
98
- 1% of the viewport's width. Ex: 10vw = 10% of browser's width.
vw
99
- 1% of the viewport's height. Ex: 5vh = 5% of browser's height.
vh
100
- Percentage of the element's font size. Ex: 120% = 20% larger than the current font size.
%
101
Most web browsers use a default font size of blank
16px
102
The blank property changes the horizontal alignment of text for an element.
text-align
103
text-align possible values
left, right, center, and justify.
104
The blank property can add or remove text decorations like underlining or a line-through.
text-decoration
105
text-decoration possible values
overline, line-through, underline, and none.
106
The blank property converts letters to UPPERCASE, lowercase, or Capitalizes Initial Letters.
text-transform
107
text-transform possible values
uppercase, lowercase, and capitalize.
108
The blank property specifies the first line's indentation amount.
text-indent
109
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.
text-decoration:none
110
The blank describes the size of each element as a series of nested boxes
box model
111
The box model is important to understand when considering blank and blank
design and layout.
112
The innermost box contains the blank of the element, such as text and images.
Content
113
The blank box contains the content box and adds a transparent area around the content.
Padding
114
The blank property specifies the blank thickness. Ex: padding: 5px; creates a 5 pixel padding around the content.
padding
115
The blank box contains the padded content and adds an optionally colored area around the padding.
border
116
The blank box contains all three boxes and adds a transparent area around the border.
margin
117
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.
border
118
The blank property specifies the margin thickness. Ex: margin: 10px; creates a 10 pixel margin.
margin
119
The blank is displayed with a background according to the element's background color.
content
120
The blank is transparent and will be displayed using the same color as the element's background.
padding
121
The blank can be either colored or transparent. If transparent, the border will be displayed with the same color as the padding.
border
122
The blank is transparent and will be displayed using the background color of the parent element.
margin
123
The blank and blank properties may have from 1 to 4 values
padding and margin
124
One value - Specifies blank thickness around the box. Ex: margin: 20px; specifies 20px margin thickness around the box.
uniform
125
Two values - Specifies blank, blank thickness. Ex: margin: 10px 20px; specifies 10px top and bottom margins and 20px right and left margins.
top and bottom, right and left
126
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.
top, right and left, and bottom
127
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.
top, right, bottom, and left
128
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.
-top, -left, -bottom, or -right
129
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:
width and height
130
The blank property specifies the content's width. Ex: width: 20px; makes the content 20px wide.
width
131
The blank property specifies the content's height. Ex: height: 30px; makes the content 30px high.
height
132
A common error is to use width or height on blank. An inline element like 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
inline elements
inline-block.
133
The blank property specifies the border's width. Ex: border-width: 5px; specifies a border that is 5px thick.
border-width
134
The blank property specifies the border's style. Ex: border-style: dashed; specifies a border that is dashed.
border-style
135
The blank property specifies the border's color. Ex: border-color: green; specifies a border that is green.
border-color
136
Name the 9 common border styles
solid
dashed
dotted
none
double
groove
ridge
inset
outset
137
Blank of two elements can sometimes combine or collapse into a single vertical space.
Vertical margins
138
Blank margins never collapse
Horizontal
139
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.
auto
140
The auto margin value is useful for blank centering an element in the parent element
horizontally
141
A common error is to use margin:auto on elements that do not have the width specified or have blank, such as span elements.
display:inline
142
Blank are used to define the page element length like font-size, height, width, and border, among other properties
CSS units
143
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.
positive or negative
144
Blank consist of physical measurements that are fixed, meaning they are not related to other properties.
Absolute units
145
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.
relative units
