CSS & CSS3* Questions

CSS & CSS3* Questions

memorize.aimemorize.ai (lvl 286)
Section 1

Preview this deck

mm

Front

Star 0%
Star 0%
Star 0%
Star 0%
Star 0%

0.0

0 reviews

5
0
4
0
3
0
2
0
1
0

Active users

0

All-time users

0

Favorites

0

Last updated

2 years ago

Date created

Mar 1, 2020

Cards (170)

Section 1

(50 cards)

mm

Front

Millimeters (0.039 in)

Back

Class Selectors

Front

A class selector applies style rules to elements that have the equivalent class attribute in their opening HTML tag.

Back

calc()

Front

+ (add) - (subtract) / (divide) * (multiply) mod (modulo division)

Back

text-decoration-color*

Front

Sets the color of underlines, overlines, and line-throughs created by text-decoration.

Back

Attribute selector

Front

E[attr] - Matches elements of type E with the attribute attr.

Back

pt

Front

Points (1/72 of an inch or 0.353 mm)

Back

First-line pseudo-element

Front

E:first-line - Matches the first line of element E.

Back

Pseudo-classes

Front

A pseudo-class doesn't rely on a class attribute in the HTML markup, but is applied automatically by the browser depending on the position of the element or its interactive state. ex/ E:focus, E:active

Back

font-variant

Front

Controls the display of small caps

Back

vh

Front

The viewport's height

Back

ch

Front

The width of the character 0 (zero) in the current font

Back

vmin

Front

The viewport's width or height, whichever is smaller

Back

Attribute Selectors

Front

An attribute selector matches any element that has a particular attribute in its opening HTML tag ex/ E[attr]

Back

overflow-wrap*

Front

Preferred name for word-wrap

Back

How is specificity calculated?

Front

• Count the number of ID selectors in the selector as a. • Count the number of class selectors, pseudo-classes, and attribute selectors in the selector as b. • Count the number of type selectors and pseudo-elements in the selector as c. • Ignore the universal selector. • String abc together to get the selector's specificity. • Inline styles always take precedence. In other words, ID selectors have a value of 100; class, pseudo-class, and attribute selectors each have a value of 10; and type selectors and pseudo-elements have a value of 1.

Back

First-letter pseudo-element

Front

E:first-letter - Matches the first letter of element E.

Back

Descendant Selectors

Front

A descendant selector matches any element that is a descendant of another. ex/ #sidebar p

Back

Link pseudo-class

Front

E:link - Matches elements of type E if E is an unvisited link.

Back

white-space

Front

Controls how spaces and word wrapping are handled.

Back

vw

Front

The viewport's width

Back

Focus pseudo-class

Front

E:focus - Matches elements of type E when the element currently has focus.

Back

Active pseudo-class

Front

E:active - Matches elements of type E at the moment the element is being clicked.

Back

font-family

Front

Property takes as its value a comma-separated list of fonts like this: ex/ font-family: Arial, Helvetica, sans-serif;

Back

in

Front

Inches (2.54 centimeters)

Back

letter-spacing

Front

Adjusts the horizontal space between characters.

Back

rem

Front

The font size of the root element

Back

Type Selectors

Front

A type selector uses the name of an HTML tag without the angle brackets, and redefines the default look of the tag.

Back

cm

Front

Centimeters (0.394 in)

Back

Visited pseudo-class

Front

E:visited - Matches elements of type E if E is a visited link.

Back

vertical-align

Front

Controls the vertical alignment of inline elements, such as <span> and images.

Back

pc

Front

Picas (12 points or 4.233 mm)

Back

Attribute selector begins with

Front

E[attr^= "x"] - Matches elements of type E where the value of the attr attribute begins with "x".

Back

text-indent

Front

Indents the first line of text.

Back

Attribute selector ends with

Front

E[attr$= "x"] - Matches elements of type E where the value of the attr attribute ends with "x".

Back

text-transform

Front

Converts text to initial capitals, all uppercase, or all lowercase.

Back

ID Selectors

Front

An ID selector applies styles to elements that have the equivalent id attribute in their opening HTML tag.

Back

em

Front

Height of the current font

Back

px

Front

Pixels (1/96 of an inch or 0.265 mm)

Back

Hover pseudo-class

Front

E:hover - Matches elements of type E when the cursor is hovering over it.

Back

Changing the Look of the Cursor

Front

To change the look of the cursor, you use the CSS cursor property, which accepts any of the keywords listed below: -auto: Browser selects cursor based on current context -default: Default cursor—usually an arrow. -none: Cursor is hidden. -context-menu: Context menu is available for the current object. -help: Help is available. -pointer: Indicates a link. -progress: Indicates something is happening, but that user can still interact with the browser. -wait: Indicates the browser is busy and the user should wait. -cell: Indicates a cell or set of cells may be selected. -crosshair: Displays two thin intersecting lines. -text: Indicates text can be selected. -vertical-text: Indicates vertical text can be selected.

Back

text-align

Front

Controls whether text is aligned to the left or right, centered, or justified.

Back

text-align-last*

Front

Sets the alignment of the last line of a text block.

Back

Pseudo-elements

Front

Like a pseudo-class, a pseudo-element is not identified as such by HTML markup. It applies styles to content based on its position in the HTML hierarchy. ex/ E:first-letter, E:first-line

Back

ex

Front

Half an em in most browsers

Back

text-decoration

Front

Draws a line under, over, or through text.

Back

Universal Selector

Front

* - Matches any element.

Back

word-spacing

Front

Adjusts the width of the space character.

Back

vmax

Front

The viewport's width or height, whichever is larger

Back

text-decoration-line*

Front

Specifies what line decorations, if any, are added to the text.

Back

Attribute selector exact match

Front

E[attr= "x"] - Matches elements of type E where the value of the attr attribute is exactly "x".

Back

Section 2

(50 cards)

text-overflow*

Front

Cuts o text that's too long to fit, optionally replacing with ellipsis. Must be used in conjunction with the overflow property

Back

text-decoration-skip

Front

This specifies which elements, if any, the line(s) should skip over. Accepted values are none, objects, spaces, ink, and edges

Back

content-box*

Front

Width and height apply only to the content box

Back

overflow: visible;

Front

Controls the horizontal and vertical overflow of a block or inline block.

Back

text-decoration-style

Front

This sets the style of the line(s). Accepted values are solid, double, dotted, dashed, and wavy. e default is solid.

Back

Center the entire content of a web page

Front

To center the entire content of a web page, it's common to wrap everything inside the <body> in a <div>, give the <div> an ID such as wrapper, and set its width and horizontal margins like this: #wrapper { width: 100%; max-width: 1000px; margin: 0 auto; }

Back

float: right;

Front

Same as left, but the block is floated to the right and other elements fill the space on the left.

Back

Understanding Collapsing in Box Model

Front

Padding: Padding never collapses. Margin: Adjacent vertical margins collapse.

Back

position

Front

Controls how an element is positioned.

Back

border-box*

Front

Width and height include content, borders and padding.

Back

overflow-x: visible;

Front

Controls the horizontal overflow of a block or inline block.

Back

float: left;

Front

The element generates a block that is floated to the left inside its parent. Following elements move up into the empty space on the right.

Back

Multiple background images*

Front

CSS3 allows you to add multiple background images to an element by listing the image sources as a comma- separated list. e first image in the list is displayed at the front, and all subsequent images are displayed behind.

Back

background-attachment*

Front

Determines whether the background image remains in a fixed position or scrolls with the page.

Back

border-image-width

Front

Sets the width of the slices, not the width of the border.

Back

Difference between display: none; and visibility: hidden;

Front

display: none; removes the element from the document flow. visibility: hidden; does not remove the element from document flow, but instead leaves a space where the element should be.

Back

padding-box*

Front

Width and height include both content and padding.

Back

pre

Front

Lines can break at arbitrary points if no break points can be found.

Back

background-position*

Front

Determines the background image's horizontal and vertical position. e default is the top left of the element.

Back

text-decoration-color*

Front

This sets the color of the line

Back

text-decoration-line*

Front

This takes the same values as text-decoration in CSS2.1, except blink, which has been dropped.

Back

text-overflow

Front

Set its value to ellipsis

Back

word-wrap*

Front

Allows long text, such as a URL, to be broken if it would otherwise over overflow.

Back

background-origin*

Front

Determines the point from which background- position is measured.

Back

background-size*

Front

Controls the size of background images.

Back

border-image-slice

Front

Defines how the image should be sliced up. It expects 1-4 numbers or percentages that indicate how much of each side should be used for the border.

Back

box-shadow: inset

Front

Inset shadows are drawn inside the element

Back

box-shadow

Front

The box-shadow property adds one or more drop shadows to an element. You specify a shadow using 2-4 space- separated lengths, which represent the following values (in this order): - Horizontal offset: A positive value positions the shadow to the right. A negative value positions it to the left. - Vertical offset: A positive value moves the shadow down. A negative value moves it up. Blur radius: If omitted or set to 0, the shadow has a crisp edge. Negative values are not allowed. - Spread distance: A positive value causes the shape to expand in all directions. A negative value (used with an inset shadow) causes it to contract. To create a spread e ect without setting a blur radius, the third length must be set to 0.

Back

outline

Front

An outline is similar to a border in that it's drawn around an element, but it differs in the following ways: • An outline doesn't add to the overall width or height of an element. It's drawn on top of other styles. • An element can have both an outline and a border. Browsers normally draw the outline outside the border. • All sides of an outline must be the same. ey can't be styled independently. • The outline of an inline element surrounds the whole element. Unlike a border, it doesn't break when the element wraps to another line

Back

Understanding Background in Box Model

Front

Padding: The content's background stretches into padding. Margin: The background of the content's parent element shows through margins.

Back

Understanding Border in Box Model

Front

Padding: Padding goes inside the border. Margin: Margins go outside the border.

Back

text-decoration-style*

Front

Specifies the type of line used for text decoration, for example, solid or wavy.

Back

text-shadow*

Front

Applies one or more shadows to text.

Back

Centering images

Front

Images are inline elements, so setting the left and right margins to auto has no effect on them, unless you set the image's display property to block

Back

break-word

Front

Lines can break at arbitrary points if no break points can be found.

Back

pre-wrap

Front

Preserve sequences of whitespace and new lines, but automatically wrap text when the border is reached.

Back

overflow: visible, hidden, scroll, auto

Front

visible: The content flows outside the box. hidden: Content that is too big is clipped. No scrollbars are provided. scroll: Content that is too big is clipped. Scrollbars are provided, even if not needed. auto: Scrollbars should be provided if the content is too big, but actual implementation is left up to the browser.

Back

Box model order from inside out

Front

1st - Content is is the content of an HTML element 2nd - Padding Horizontal and vertical space surrounding the content. 3rd - Border A border drawn around the padding. 4th - Margin Horizontal and vertical space outside the border.

Back

clear: left, right, both, none

Front

left: Forces the element to a new line below any left-floated elements. right: Forces the element to a new line below any right-floated elements. both: Forces the element to a new line below any floated elements.

Back

CSS box model

Front

Regards every HTML element as a box. The position of each box is determined by the flow of the web page—in other words, the order in which the HTML elements appear in the source code. There are two main types of boxes: block-level and inline. A block-level box or element

Back

nowrap

Front

Prevent the browser from automatically wrapping text.

Back

overflow-y: visible;

Front

Controls the vertical overflow of a block or inline block.

Back

text-shadow

Front

Adds a shadow to text without the need to embed the text in an image. Text-shadow property expects the following values: horizontal offset, vertical offset, blur radius ex/ .blur { text-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.4); }

Back

border-image-source

Front

Tells the browser which image to use for the borders. You specify the image in the normal way with url().

Back

pre-line

Front

Close up sequences of whitespace as in normal text, but honor new lines.

Back

Centering Block-level Elements

Front

You center a block-level element by giving it a declared width and setting the left and right margins to auto.

Back

background-clip*

Front

Determines the area covered by the background.

Back

CSS positioning

Front

Allows you to remove an element from the flow of the document and place it wherever you want on the page. Once an element has been positioned, it ceases to interact with other elements on the page. So, you can't flow other content around it or use margins to separate it from other elements that remain in the document flow. The positioned element resides on a separate layer in front of the normal content. This introduces a third dimension that allows you to make elements overlap.

Back

CSS sprite

Front

Because background images are cut o when they extend beyond the element to which they're applied, you can combine multiple images in a single file and then use negative background-position o sets to display only a portion of the background image

Back

overflow

Front

To hide over ow text, the overflow property needs to be set to hidden

Back

Section 3

(50 cards)

:checked*

Front

Matches a form element that has been checked or selected.

Back

background: repeating-radial-gradient()

Front

Creates a radial gradient that repeats infinitely.

Back

:first-of-type*

Front

Selects an element that is the first sibling of its type.

Back

Descendant combinator

Front

E F - Selects any F element that is a descendant of an E element. The descendant can be nested at any level.

Back

:disabled*

Front

Matches a form element that is disabled.

Back

right

Front

Specifies the right offset of a positioned element. A positive value moves the element to the left. A negative value moves it to the right.

Back

table-header-group

Front

<thead> Makes the element act as a table header.

Back

table

Front

<table> Makes the element act like an HTML table. Child elements are treated as table rows and/or cells.

Back

bottom

Front

Specifies the bottom offset of a positioned element. A positive value moves the element up. A negative value moves it down.

Back

top

Front

Specifies the top offset of a positioned element. A positive value moves the element down. A negative value moves it up.

Back

background: linear-gradient();

Front

Sets the direction and colors of a gradient that fades from one color to the next in a straight line. The direction can be set using keywords or an angle. If the direction is omitted, the gradient is drawn from the top to the bottom.

Back

position: static;

Front

This leaves the element in the normal document flow.

Back

z-index

Front

Sets the stacking order of positioned elements. If elements are in the same stacking context, ones with a higher z-index appear in front.

Back

table-column

Front

<col> Used internally by browsers to hide <col> elements.

Back

table-cell

Front

<td> Makes the element act as a table cell.

Back

left

Front

Specifies the left offset of a positioned element. A positive value moves the element to the right. A negative value moves it to the left.

Back

:nth-of-type()*

Front

Selects the nth sibling of its type.

Back

counter-reset

Front

Resets the specified counter or creates it if it doesn't already exist. By default, counters are initialized at 0. To specify a different start value, add an integer after the counter name.

Back

:last-of-type*

Front

Selects an element that is the last sibling of its type.

Back

:enabled*

Front

Matches a form element that is not disabled.

Back

Containing Block

Front

• If an element's position is absolute, the containing block is the nearest positioned ancestor. In other words, the containing block must have a position of absolute, fixed, or relative. If no such element exists, the page is the containing block. • If an element's position is fixed, the containing block is the browser viewport. • If an element's position is relative, the containing block is the nearest block level ancestor—in other words, its parent.

Back

:only-of-type*

Front

Selects an element that is the only sibling of its type. It can have other siblings, but not of the same type.

Back

background: radial-gradient()

Front

Creates a circular or elliptical gradient, and optionally sets its shape, size, and position. If all optional features are omitted, an elliptical gradient is centered in the element's background.

Back

:nth-last-child()*

Front

Selects the nth-child of its parent counting from the last one.

Back

:nth-last-of-type()*

Front

Selects the nth sibling of its type counting from the last one.

Back

table-row

Front

<tr> Makes the element act like a table row. Child elements are treated as table cells.

Back

Makes the element act as a table cell.

Front

<caption> Makes the element act as a table caption.

Back

content

Front

Defines the content to be inserted by the pseudo-element.

Back

table-row-group

Front

<tbody> Makes the element act as a group of one or more table rows.

Back

General sibling combinator

Front

E ~ F - Selects all F elements that follow a sibling of type E.

Back

background: repeating-linear-gradient()

Front

Creates a linear gradient, in which the colors are repeated infinitely in both directions.

Back

position: fixed;

Front

This is similar to absolute, but the offsets are always calculated with reference to the browser viewport.

Back

:not()*

Front

Matches elements based on a negative condition.

Back

Offsets of a Positioned Element

Front

You specify where an element is positioned by setting offsets from its containing block with the top, right, bottom, and left properties, all of which accept a length or a percentage. The offsets are calculated from the same sides of the element and its containing block.

Back

table-column-group

Front

<colgroup> Used internally by browsers to hide elements.

Back

Adjacent sibling combinator

Front

E + F - Selects an F element that immediately follows a sibling of type E.

Back

clip

Front

Defines the area of an absolutely positioned element that remains visible.

Back

:only-child*

Front

Selects an element that is the only child of its parent and has no siblings.

Back

:first-child*

Front

Selects an element that is the first child of its parent.

Back

table-footer-group

Front

<tfoot> Makes the element act as a table footer.

Back

:nth-child()*

Front

Selects the nth-child of its parent using the value between the parentheses.

Back

counter-increment

Front

Increments the specified counter for a numbered sequence. To increment in steps greater than 1, also specify an integer. A negative integer creates a back-counting sequence.

Back

inline-table

Front

<table> Same as table, but the element is displayed as an inline block.

Back

generated content

Front

Content that's not physically present in the HTML markup. For example, when you create an ordered list, the numbers are not in the HTML. The browser generates and inserts them automatically, and it updates the sequence if items are added or removed. The ::before and ::after pseudo-elements perform a similar function, but go much further, allowing you to add just about any type of automatically generated content not only before list items, but before and after almost any HTML element.

Back

quotes

Front

Defines the styles of quotation marks at any number of nested levels. The default value depends on the browser.

Back

:empty*

Front

Matches elements that have no content. To be empty, an element cannot even have whitespace between the opening and closing tags.

Back

:last-child*

Front

Selects an element that is the last child of its parent.

Back

position: absolute;

Front

This removes the element, including any child elements, completely from the flow of the document, and positions it at the specified offsets. If the element is nested inside another positioned element, the offsets are calculated with reference to the positioned parent. Otherwise, the offsets are calculated with reference to the page.

Back

position: relative;

Front

This moves the element relative to its normal position in the document flow, but without affecting the position of other elements.

Back

Child combinator

Front

E > F - Selects any F element that is the direct child of an E element.

Back

Section 4

(20 cards)

transform: translateX();

Front

Moves the element along the X axis by the specified length or percentage.

Back

transform: matrix();

Front

Specifies a 2D transform using a transform matrix of six values.

Back

Properties to Animate

Front

The transition-property property accepts the keyword all or a comma-separated list of properties you want to animate. There's currently a table of 63 properties that can be animated.

Back

transition-property

Front

Specifies the name(s) of the CSS properties to which the transition is to be applied.

Back

transition

Front

Shorthand property that sets all four values in a single declaration.

Back

transform: scaleY();

Front

Scales the element along the Y axis by the specified scaling factor.

Back

transform: scale();

Front

Scales the element. Takes one or two numbers as the scaling factor. If one number is given, both axes are scaled by the same multiplier. If two comma-separated numbers are given, the first applies to the X axis and the second to the Y axis.

Back

transform: rotate();

Front

Rotates the element around its anchor point by the specified angle.

Back

transform: translateY();

Front

Moves the element along the Y axis by the specified length or percentage.

Back

transform: scaleX();

Front

Scales the element along the X axis by the specified scaling factor.

Back

CSS Transitions

Front

CSS transitions animate a smooth change between one state and another over a specified duration. For example, you can scale and rotate the image over a period of one second. When you move the mouse away from the image, the transition is reversed, returning to its original state over the same duration. Transitions can be applied to all elements including the ::before and ::after pseudo-elements.

Back

transform: skewY();

Front

Skews the element along the Y axis by the specified angle.

Back

transition-timing-function

Front

Describes the pace of change using easing or stepping keywords or functions.

Back

transform: translate();

Front

Moves the element from its default position. Takes two comma-separated lengths or percentages. The first value represents the horizontal offset and the second the vertical offset. If only one value is given, the element is moved only horizontally.

Back

transform-origin

Front

Specifies the anchor point of the transform. Takes one or two lengths, percentages, or keywords representing the horizontal and vertical positions, respectively. If only one value is given, the vertical position defaults to center.

Back

transition-delay

Front

Defines when the transition should start measured in seconds or milliseconds. A positive value delays the start. A negative value initiates the transition immediately, but part-way through its cycle at the point it would have reached after the specified offset.

Back

transform

Front

Specifies how the element is to be transformed. Takes as its value a space-separated list of transform functions

Back

transform: skewX();

Front

Skews the element along the X axis by the specified angle.

Back

Pace of the Transition

Front

ease: Starts slow, speeds up, and slows toward the end. linear: Transitions at an even pace throughout. ease-in: Starts slow and speeds up. ease-out: Starts fast and slows toward the end. ease-in-out: Similar to ease, but slower at each end. cubic-bezier(): Specifies a custom transition using a cubic-bézier curve. step-start: The change takes place at the beginning of the duration. step-end: The change takes place at the end of the duration. steps(): The change takes place in the specified number of equal steps.

Back

transition-duration

Front

Specifies how long the transition should take in seconds (s) or milliseconds (ms). Negative values are not allowed.

Back