CSS Fundamentals Flashcards
Blank is a textual language for describing how a web page is styled for visual presentation.
CSS (Cascading Style Sheets)
Blank use CSS to determine how a web page is rendered on the screen, printed to paper, or presented via other media
Web browsers
The process of combining multiple style rules and resolving conflicting styles.
Cascading
Describes the visual presentation of structured documents.
Style Sheets
A web developer uses CSS to write a list of blank
rules
A blank consists of a selector followed by a declaration block between braces ({ }
CSS rule
A blank specifies the HTML elements to which the specific style rule applies.
CSS selector
A blank contains one or more declarations separated by semicolons (;)
declaration block
A blank is a CSS property followed by a colon (:) and the property value.
CSS styling declaration
Blank are only required to separate rule declarations
Semicolons
CSS can be applied to HTML in what three ways
An inline style
An embedded stylesheet
An external stylesheet
places CSS declarations inside a tag’s style attribute.
inline style
places CSS rules in an HTML document’s head using <style> tags.</style>
An embedded stylesheet
places CSS rules in a separate file that is imported into an HTML document with a <link></link> tag
An external stylesheet
The blank attribute may be used on any tag.
style
good practice is to place blank and blank tags inside the document head (before the <body> tag).
<style>
and <link></style>
Every browser has a blank that specifies styling for each HTML element.
default stylesheet
The style declarations from a parent element cascade down and are applied to any child elements, a concept called blank.
inheritance
Each element blank the style declarations from the element’s parent.
inherits
When two style declarations with identical properties apply to the same element, a blank occurs
conflict
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.
child’s declaration
parent’s declaration
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.
inline style
embedded or external stylesheet
The browser uses blank, a scoring system that resolves more complex CSS conflicts, to determine what style declarations apply to an element.
specificity
The blank rule may be used on a style declaration to override other declarations and disregard specificity.
!important
The blank matches elements with the specified element names.
Ex: p { color: blue; } selects all p elements.
element selector
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
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
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
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
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>
class attribute
:enabled - means
Element is enabled.
:lang(language) - means
Element contains text in a specified language.
:empty - means
Element has no child elements.
:hover - means
Mouse is hovering over the element.
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
The blank, specified using an asterisk character (*), matches all elements in the web page.
universal selector
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.
multiple selector
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
Blank are elements that share the same parent element.
Sibling elements
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
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
Blank are CSS selectors that match specific relationships between other selectors. The descendant, child, adjacent sibling, and general sibling selectors are all blank.
Combinators
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
= means [target=”_blank”]
<a></a>
Attribute has exact value
~= means [alt~=”sad”]
<img></img>
Attribute contains whole word
^= means [class^=”nav”]
<ul>
<ul>
</ul></ul>
Attribute begins with value
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
::after means li::after { content: “<” }
Add content after the matched element.
::before means li::before { content: “***” }
Add content before the matched element.
::first-line means p::first-line { color: red }
Match the first line of text in a block element.
::first-letter means p::first-letter { font-size:200% }
Match the first letter of text in a block element.
::selection means ::selection { background: yellow }
Matches the text selected by user.
The blank CSS property changes the text color to a specified color value
color
CSS defines blank color names. Ex: white, blue, black, gray, forestgreen, magenta.
140
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
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
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
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
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
The blank property specifies the background color.
background-color
The blank property specifies a background image.
background-image
The blank is shorthand for setting several of the element’s background properties at the same time.
background property
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
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
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
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)
The blank property can stop elements from floating.
clear
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)
The blank property controls the layout of the element on a web page
display
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.
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.
CSS variable
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
The blank property specifies the font family, such as “Times New Roman” or serif.
font-family
The blank property changes the font size, such as 120%, small, or 12px.
font-size
The blank property specifies the font weight, such as normal or bold.
font-weight
The blank property changes the text style, such as normal, italic, or oblique.
font-style
The blank property specifies the variant of the text, such as normal or small-caps.
font-variant
The blank property is shorthand for setting several font properties at the same time. Ex: font: italic 12pt Georgia, serif;
font
The blank property contains a list of fonts specified as a family name or a generic family separated by commas.
font-family
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
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
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
“Embellishments” like finishing strokes or flare ends Garamond
Georgia
Times New Roman
Serif
Plain stroke ends Arial
Helvetica
Verdana
Sans-Serif
Cursive or calligraphy characteristics like joined strokes Brush Script MT
Comic Sans MS
Lucida Handwriting
Cursive
Decorative Impact
Luminari
Fantasy
Constant width for letters, punctuation, and space Consolas
Courier New
Monospace
A blank is a CSS feature that allows custom fonts to be downloaded to the web browser.
web font
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
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,
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
An blank is a size that is fixed and independent of other CSS sizes.
absolute size
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)
A blank is a size that is relative to another size.
relative size
Some common relative size units include what units:
em
rem
vw
vh
%
Relative to the element’s font size. Ex: 2em = 2 × current font size.
em
- Relative to the root element’s font size. Ex: 1.5rem = 1.5 × <html> element’s font size.
rem
- 1% of the viewport’s width. Ex: 10vw = 10% of browser’s width.
vw
- 1% of the viewport’s height. Ex: 5vh = 5% of browser’s height.
vh
- Percentage of the element’s font size. Ex: 120% = 20% larger than the current font size.
%
Most web browsers use a default font size of blank
16px
The blank property changes the horizontal alignment of text for an element.
text-align
text-align possible values
left, right, center, and justify.
The blank property can add or remove text decorations like underlining or a line-through.
text-decoration
text-decoration possible values
overline, line-through, underline, and none.
The blank property converts letters to UPPERCASE, lowercase, or Capitalizes Initial Letters.
text-transform
text-transform possible values
uppercase, lowercase, and capitalize.
The blank property specifies the first line’s indentation amount.
text-indent
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
The blank describes the size of each element as a series of nested boxes
box model
The box model is important to understand when considering blank and blank
design and layout.
The innermost box contains the blank of the element, such as text and images.
Content
The blank box contains the content box and adds a transparent area around the content.
Padding
The blank property specifies the blank thickness. Ex: padding: 5px; creates a 5 pixel padding around the content.
padding
The blank box contains the padded content and adds an optionally colored area around the padding.
border
The blank box contains all three boxes and adds a transparent area around the border.
margin
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
The blank property specifies the margin thickness. Ex: margin: 10px; creates a 10 pixel margin.
margin
The blank is displayed with a background according to the element’s background color.
content
The blank is transparent and will be displayed using the same color as the element’s background.
padding
The blank can be either colored or transparent. If transparent, the border will be displayed with the same color as the padding.
border
The blank is transparent and will be displayed using the background color of the parent element.
margin
The blank and blank properties may have from 1 to 4 values
padding and margin
One value - Specifies blank thickness around the box. Ex: margin: 20px; specifies 20px margin thickness around the box.
uniform
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
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
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
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
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
The blank property specifies the content’s width. Ex: width: 20px; makes the content 20px wide.
width
The blank property specifies the content’s height. Ex: height: 30px; makes the content 30px high.
height
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>
inline elements
inline-block.
The blank property specifies the border’s width. Ex: border-width: 5px; specifies a border that is 5px thick.
border-width
The blank property specifies the border’s style. Ex: border-style: dashed; specifies a border that is dashed.
border-style
The blank property specifies the border’s color. Ex: border-color: green; specifies a border that is green.
border-color
Name the 9 common border styles
solid
dashed
dotted
none
double
groove
ridge
inset
outset
Blank of two elements can sometimes combine or collapse into a single vertical space.
Vertical margins
Blank margins never collapse
Horizontal
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
The auto margin value is useful for blank centering an element in the parent element
horizontally
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
Blank are used to define the page element length like font-size, height, width, and border, among other properties
CSS units
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
Blank consist of physical measurements that are fixed, meaning they are not related to other properties.
Absolute units
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
