CSS Flashcards by Jeff G

What is CSS and what is it used for?

Cascading Style Sheets (CSS) is a textual language used to control the look and layout of webpage content.

How well did you know this?

Not at all

Perfectly

What is a CSS Rule?

A CSS Rule specifies styling properties for specific HTML elements.

How well did you know this?

Not at all

Perfectly

What HTML tag is used to attach a .css to a .html?

< link >

How well did you know this?

Not at all

Perfectly

What is the syntax of a CSS rule?

A selector specifying the HTML element(s) to which the specific style rule applies
A declaration block containing one or more declarations separated by semicolons

How well did you know this?

Not at all

Perfectly

What are common CSS Rule Properties?

background-color
color
font-Family
font-size
padding
margin

How well did you know this?

Not at all

Perfectly

What is a CSS color?

A pre-defined name, or an rgb value.

How well did you know this?

Not at all

Perfectly

What is a CSS declaration?

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

How well did you know this?

Not at all

Perfectly

What are the 3 ways CSS can be applied to HTML?

inline style (CSS declarations inside an elements style attribute)
embedded stylesheet (CSS rules in the style element in the documents head)
External Stylesheet (A separate file imported into the HTML via a link element)

How well did you know this?

Not at all

Perfectly

How are conflicts between CSS rules resloved?

By the degree of specificity; the more specific, the higher the priority.

How well did you know this?

Not at all

Perfectly

What are the 3 common CSS selector types?

element selector (matches elements with specified names)
class selector (specified with a period character followed by the class name)
ID selector (specified with a hash character followed by ID name)

How well did you know this?

Not at all

Perfectly

What is a Descendent Selector?

Specified with a selector followed by a space and another selector, matches elements that are contained in other elements.

How well did you know this?

Not at all

Perfectly

What is a Psuedo-Class Selector?

Specified with a colon character followed by a pseudo-class name, matches elements based on user behavior or element metainformation

How well did you know this?

Not at all

Perfectly

What are common examples of Pseudo-Class Selectors?

:disabled (Element is disabled)
:hover (Mouse is hovering over the 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

How are Class Selectors and Pseudo-Class Selectors combined?

With the class name, colon, then pseudo-class name

How well did you know this?

Not at all

Perfectly

What is a Universal Selector, and how is it specified?

The universal selector matches all elements in the webpage. It is specified with the “*” character, but is the default if no element is provided.

How well did you know this?

Not at all

Perfectly

What is a Multiple Selector, and how is it specified?

The Multiple Selector matches all listed elements, and is specified by listing the elements separated by a comma.

How well did you know this?

Not at all

Perfectly

What is a Child Selector, and how is it specified?

Matches any elements where the second element is a direct child of the first element and is specified with the > character

How well did you know this?

Not at all

Perfectly

What are sibling elements?

Elements that share the same parent element

How well did you know this?

Not at all

Perfectly

What is a General Sibling Selector, and how is it specified?

Speficied with the ~ character, it matches the second element if the second element occurs after the first element and both elements are siblings.

How well did you know this?

Not at all

Perfectly

What is an Adjacent Sibling Selector, and how is it specified?

Specified with the + character, it matches an element that immediately follows another element, where both elements have the same parent.

How well did you know this?

Not at all

Perfectly

What is an Attribute Selector, and how is it specified?

It matches elements with the specified attribute or the specified attribute and value, and is specified with the attribute and value enclosed in square brackets.
Ex: img[alt^=”cat”]

How well did you know this?

Not at all

Perfectly

What are the common Attribute Selector comparitors?

Study These Flashcards

= (Attribute has exact value)
~= (Attribute contains value)
^= (Attribute starts with value)

What is a Psuedo-Element Selector and how is it specified??

Study These Flashcards

Matches parts of elements that are specified with element-name, two colons, and the psuedo element.
Ex: li::after

What are the common pseudo-elements?

Study These Flashcards

::after (add style after element)
::before (add style before element)
::first-line (add style to first line of matched block element)
::first-letter (add style to first letter of matched block element)
::selection (style selected text)

What are the ways to specifiy color in the Color CSS property?

- RGB / RGBA - Decimal / Hexadecimal - HSL / HSLA

What are the common Background properties?

- background-color - background-image (specified with the none value or the url('URL') function) -background (shorthand for setting several of the element's background properties at the same time.)

What is the CSS float 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

What are the 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)

What is the CSS Clear Property?

It moves elements below previously floated elements.

What are the values for the Clear property?

- none (Element allowed to float (default value)) - left (push below left floated elements) - right (push below right floated elements) - both (Stop floating on both sides)

What is the Display Property?

A property controlling the layout of an element on a webpage.

What are the common Display properties?

- 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.)

What is a CSS Variable?

A custom CSS property that defines a value.

How is a CSS variable declared?

Within a CSS selector (defines the variable's scope ) with two dashes, the variable name, colon, and vaue. Ex: h1 { --mainColor: red; }

How is a CSS variable accessed?

With the var() function. Ex: p { color: var(--mainColor)}

What are the common CSS text Properties?

- text-align - text-decoration - text-transform - text-indent

What are the common CSS font Properties?

- font-family - font-size - font-weight - font-style - font-variant - font

What is the box model?

A model that describes the size of each element as a series of nested boxes

What are the 4 boxes in the Box Model?

- Content - padding - border - margin

What are the rendering rules of the Box Model?

- The content is displayed with a background according to the element's background color. - The padding is transparent and will be displayed using the same color as the element's background. - The border can be either colored or transparent. If transparent, the border will be displayed with the same color as the padding. - The margin is transparent and will be displayed using the background color of the parent element.

How many vlaues can margin and padding properties have?

- 1 (all sides) - 2 (top /bottom, left / right) - 3 (top, left / right, bottom) - 4 (top, right, left, bottom)

How are values for a single side assigned?

With the -side flag. Ex: margin-bottom or padding-right

What are the 3 sub-properties of the "border" property?

- border-width - border-style - border-color

How does collapsing of margins work in CSS?

Vertical margins of two elements can sometimes combine or collapse into a single vertical space. Horizontal margins never collapse

What is are the four CSS position property values?

- static - relative - fixed - absolute

What CSS position property value is the default?

static

Where does CSS position value 'relative' position elements?

Relative to the elements default position

Where does CSS position value 'fixed' position elements?

Relative to the viewport in a fixed position

Where does CSS position value 'absolute' position elements?

Relative to the nearest positioned ancestor that uses fixed, absolute, or relative positioning. If no positioned ancestor element exists, then relative to the document body.

What is a viewport?

A visible area of a webpage

Given a specified CSS position value, what properties specificy position by pixel relative to that?

- top - left

What is the CSS z-index property?

It is used to specify a relative distance that orders the appearance of elements. Elements with higher z-index values are placed on top of elements with lower z-index values.

How is a CSS variable given global scope?

With the “:root” selector.

CSS Flashcards

(54 cards)