5. CSS Fundamentals Flashcards by Johnathon Bowers

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

rule

How well did you know this?

Not at all

Perfectly

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

selector

How well did you know this?

Not at all

Perfectly

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

declaration block

How well did you know this?

Not at all

Perfectly

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

declaration

How well did you know this?

Not at all

Perfectly

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)

How well did you know this?

Not at all

Perfectly

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

cascade, inheritance

How well did you know this?

Not at all

Perfectly

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

The child element’s styling

How well did you know this?

Not at all

Perfectly

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

The inline style

How well did you know this?

Not at all

Perfectly

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 well did you know this?

Not at all

Perfectly

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

Moon

How well did you know this?

Not at all

Perfectly

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

The space separates the two class names

How well did you know this?

Not at all

Perfectly

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

Blade Runner

** 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?

Not at all

Perfectly

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; }

How well did you know this?

Not at all

Perfectly

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

pseudo-class

How well did you know this?

Not at all

Perfectly

How is a pseudo-class selector written?

Element followed by a colon followed by a pseudo-class

a:hover {
}

How well did you know this?

Not at all

Perfectly

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

How well did you know this?

Not at all

Perfectly

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

How well did you know this?

Not at all

Perfectly

The ____ selector matches all elements in the webpage.

universal

How well did you know this?

Not at all

Perfectly

How is the universal selector specified?

With an asterisk

*.highlight

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

How well did you know this?

Not at all

Perfectly

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

multiple

How well did you know this?

Not at all

Perfectly

How is a multiple selector specified?

With a comma separating selectors

ul, ol {
background-color: gray;
}

How well did you know this?

Not at all

Perfectly

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

child

How well did you know this?

Not at all

Perfectly

How is the child selector specified?

With a greater than sign

p > em {
background-color: yellow;
}

How well did you know this?

Not at all

Perfectly

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.

How well did you know this?

Not at all

Perfectly

____ 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 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

5. CSS Fundamentals Flashcards

(80 cards)