5. CSS Fundamentals Flashcards
A CSS ____ consists of a selector followed by a declaration block between braces ({})
rule
A CSS ____ specifies the HTML elements to which the specific style rule applies
selector
A ____ contains one or more declarations separated by semicolons (;)
declaration block
A CSS styling ____ is a CSS property followed by a colon (:) and the property value
declaration
What are the three ways that CSS can be applied to HTML?
- inline style (CSS declarations are placed inside of an elements “style” attribute)
- embedded stylesheet (places CSS rules in an HTML document’s head using a <style> element)
- external stylesheet (places CSS rules in a separate file that is imported into an HTML document with a <link> element)
The style declarations from a parent element ____ down and are applied to any child elements, a concept called ____
cascade, inheritance
When a style conflict occurs between a parent element and a child element, which styling takes precedence?
The child element’s styling
When a style conflict occurs between an embedded or external stylesheet and an inline style, which styling takes precedence?
The inline style
What are the three different types of CSS selectors, and how are they written?
- element selector
p { color: blue; } - class selector
.notice { color: blue; } - id selector
#byLine { color: blue }
How do you specify an element’s class in HTML?
<p class=”gr”>Moon</p>
How do you indicate that an element belongs to more than one class?
<span class=”highlight first”>
The space separates the two class names
How do you specify an element’s id in HTML?
<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
What is a descendant selector? How is it written, and what does it do?
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; }
The ____ selector matches elements based on user behavior or element metainformation
pseudo-class
How is a pseudo-class selector written?
Element followed by a colon followed by a pseudo-class
a:hover {
}
How can you write a selector that selects only elements that have a particular class?
Element followed by a period followed by the class name
span.highlight
What are some common pseudo-classes?
: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
The ____ selector matches all elements in the webpage.
universal
How is the universal selector specified?
With an asterisk
*.highlight
The universal selector is implied when an element name is not specified.
The ____ selector matches all listed elements to apply a style rule.
multiple
How is a multiple selector specified?
With a comma separating selectors
ul, ol {
background-color: gray;
}
The ____ selector matches any elements where the second element is a direct child of the first element.
child
How is the child selector specified?
With a greater than sign
p > em {
background-color: yellow;
}
How is the child selector (>) different from the descendant selector ( )?
The matching child element in the child selector must be a direct child of the matching parent element.
____ elements are elements that share the same parent element.
Sibling
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 ____.
~, after, siblings
h1 ~ p {
border-top: 1px solid gray;
}
Any number of other elements can be placed between two general sibling elements
The ____ sibling selector, specified using a ____ character between two selectors, matches an element that ____ follows another element, where both elements have the same parent
adjacent, plus (+), immediately
____ are CSS selectors that match specific relationships between other selectors.
Combinators
The descendant, child, adjacent sibling, and general sibling selectors are all combinators
What type of selector is the following?
a[target=”_blank”]
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.
Which attribute selector comparator matches an element when its attribute has the exact value specified?
=
[target=”_blank”]
Which attribute selector comparator matches an element when the attribute contains the whole word specified?
~=
[alt~=”sad”]
Which attribute selector comparator matches an element when the attribute begins with a value?
^=
[class^=”nav”]
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?
pseudo-element selector
With what character(s) is the pseudo-element selector specified?
Two colons
li::after { content: “<”; }
What are common pseudo-element specifiers?
::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 }
What CSS property changes the text color to a specified color value?
color
In what different ways can a color be specified in CSS?
- Color name (for 140 colors)
- RGB color value - rgb(0, 0, 0)
- Hexadecimal value - #FFFF00
- HSL color value - hsl(120, 100%, 50%)
What value can be added to RGB and HSL colors to allow for transparency, and what is the range for this value?
alpha, 0 to 1 (0 = fully transparent, 1 = opaque)
Which CSS property specifies the background color for an element?
background-color
Which CSS property specifies a background image for an element?
background-image
How are background images for elements specified?
Either with the “none” keyword or by the URL function
url(‘URL’)
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?
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
Which CSS property moves elements below previously floated elements?
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
Which CSS property controls the layout of the element on a webpage?
display
What are the values for the display property in CSS?
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
A CSS ____ is a custom CSS property that defines a value.
variable
How can a CSS variable be given a global scope?
by declaring the variable in the :root selector which targets the highest DOM element: the <html> element.
How is a CSS variable defined?
With two dashes preceding the variable name
:root {
–main-color: red;
–main-bg-color: yellow;
}
How is a CSS variable accessed?
With the var() function
var(–my-variable)
What are some of the main CSS properties for setting font properties?
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;
A ____ in CSS is the name of a specific font, like “Times New Roman”
family name
If family names contain spaces, how should they be identified?
Surrounded by quotation marks
A ____ in CSS is a general group of fonts, like serif, sans-serif
generic family
What is best practice for writing the value of the font-family property?
Start with the intended font and end with a generic family
font-family: Arial, Helvetica, sans-serif;
A ____ is a CSS feature that allows custom fonts to be downloaded to the web browser
web font
Fonts can be declared with either ____ sizes or ____ sizes
absolute, relative
What are common relative sizes?
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
The ____ CSS property changes the horizontal alignment of text for an element
text-align
What are the available values for the text-align property?
left, right, center, justify
The ____ CSS property can add or remove properties of text like underline or strike-through
text-decoration
What are the different values for the text-decoration property?
overline, line-through, underline, none
The ____ CSS property transforms text to UPPERCASE, lowercase, or Capitalizes Initial Letters
text-transform
The ____ CSS property specifies the first line’s indentation amount
text-indent
The ____ model describes the size of each HTML element as a series of nested boxes.
box
The name for the innermost box in the CSS box model
content
This box contains the content box and adds a transparent area around the content
padding
This box contains the padded content and adds an optionally colored area around the padding
border
This box contains all three boxes and adds a transparent area around the border
margin
Is the padding box colored or transparent?
Transparent. It will be displayed using the same color as the element’s background
What will be the background color of the margin box?
It will be the background color of the parent element
For the padding and margin properties, what does it mean if 1, 2, 3, or 4 values are identified?
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
The ____ and ____ properties can change the content size of a block element’s content
width, height
The border property combines the border ____, ____, and ____.
width, style, color
The vertical margins of two elements can ____.
combine or collapse
The resulting margin size equals the top element’s bottom margin or the bottom element’s top margin, whichever is larger
What CSS property and value can you use to horizontally center a block element?
margin and auto
margin: 0px auto;
What are different absolute sizes that can be used in a web page?
cm
mm
Q (quarter-millimeters)
in
pc (picas, 1/16 in)
pt (1/72 in)
px (1/96 in)
CSS ____ determines which style rules take precedence when multiple rules target the same element
specificity
What styling takes precedence over id, class, and element selectors?
Inline styles
In CSS hierarchy, what other selectors are at the same specificity level as classes?
Pseudo-classes and attribute selectors
What other selector has the same general level of specificity as an element selector?
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
