Section 1
Preview this deck
mm
Front
| 5 | 0 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
0
All-time users
0
Favorites
0
Last updated
4 years ago
Date created
Mar 1, 2020
Cards (170)
Section 1
(50 cards)
mm
Millimeters (0.039 in)
Class Selectors
A class selector applies style rules to elements that have the equivalent class attribute in their opening HTML tag.
calc()
+ (add) - (subtract) / (divide) * (multiply) mod (modulo division)
text-decoration-color*
Sets the color of underlines, overlines, and line-throughs created by text-decoration.
Attribute selector
E[attr] - Matches elements of type E with the attribute attr.
pt
Points (1/72 of an inch or 0.353 mm)
First-line pseudo-element
E:first-line - Matches the first line of element E.
Pseudo-classes
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
font-variant
Controls the display of small caps
vh
The viewport's height
ch
The width of the character 0 (zero) in the current font
vmin
The viewport's width or height, whichever is smaller
Attribute Selectors
An attribute selector matches any element that has a particular attribute in its opening HTML tag ex/ E[attr]
overflow-wrap*
Preferred name for word-wrap
How is specificity calculated?
• 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.
First-letter pseudo-element
E:first-letter - Matches the first letter of element E.
Descendant Selectors
A descendant selector matches any element that is a descendant of another. ex/ #sidebar p
Link pseudo-class
E:link - Matches elements of type E if E is an unvisited link.
white-space
Controls how spaces and word wrapping are handled.
vw
The viewport's width
Focus pseudo-class
E:focus - Matches elements of type E when the element currently has focus.
Active pseudo-class
E:active - Matches elements of type E at the moment the element is being clicked.
font-family
Property takes as its value a comma-separated list of fonts like this: ex/ font-family: Arial, Helvetica, sans-serif;
in
Inches (2.54 centimeters)
letter-spacing
Adjusts the horizontal space between characters.
rem
The font size of the root element
Type Selectors
A type selector uses the name of an HTML tag without the angle brackets, and redefines the default look of the tag.
cm
Centimeters (0.394 in)
Visited pseudo-class
E:visited - Matches elements of type E if E is a visited link.
vertical-align
Controls the vertical alignment of inline elements, such as <span> and images.
pc
Picas (12 points or 4.233 mm)
Attribute selector begins with
E[attr^= "x"] - Matches elements of type E where the value of the attr attribute begins with "x".
text-indent
Indents the first line of text.
Attribute selector ends with
E[attr$= "x"] - Matches elements of type E where the value of the attr attribute ends with "x".
text-transform
Converts text to initial capitals, all uppercase, or all lowercase.
ID Selectors
An ID selector applies styles to elements that have the equivalent id attribute in their opening HTML tag.
em
Height of the current font
px
Pixels (1/96 of an inch or 0.265 mm)
Hover pseudo-class
E:hover - Matches elements of type E when the cursor is hovering over it.
Changing the Look of the Cursor
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.
text-align
Controls whether text is aligned to the left or right, centered, or justified.
text-align-last*
Sets the alignment of the last line of a text block.
Pseudo-elements
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
ex
Half an em in most browsers
text-decoration
Draws a line under, over, or through text.
Universal Selector
* - Matches any element.
word-spacing
Adjusts the width of the space character.
vmax
The viewport's width or height, whichever is larger
text-decoration-line*
Specifies what line decorations, if any, are added to the text.
Attribute selector exact match
E[attr= "x"] - Matches elements of type E where the value of the attr attribute is exactly "x".
Section 2
(50 cards)
text-overflow*
Cuts o text that's too long to fit, optionally replacing with ellipsis. Must be used in conjunction with the overflow property
text-decoration-skip
This specifies which elements, if any, the line(s) should skip over. Accepted values are none, objects, spaces, ink, and edges
content-box*
Width and height apply only to the content box
overflow: visible;
Controls the horizontal and vertical overflow of a block or inline block.
text-decoration-style
This sets the style of the line(s). Accepted values are solid, double, dotted, dashed, and wavy. e default is solid.
Center the entire content of a web page
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; }
float: right;
Same as left, but the block is floated to the right and other elements fill the space on the left.
Understanding Collapsing in Box Model
Padding: Padding never collapses. Margin: Adjacent vertical margins collapse.
position
Controls how an element is positioned.
border-box*
Width and height include content, borders and padding.
overflow-x: visible;
Controls the horizontal overflow of a block or inline block.
float: left;
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.
Multiple background images*
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.
background-attachment*
Determines whether the background image remains in a fixed position or scrolls with the page.
border-image-width
Sets the width of the slices, not the width of the border.
Difference between display: none; and visibility: hidden;
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.
padding-box*
Width and height include both content and padding.
pre
Lines can break at arbitrary points if no break points can be found.
background-position*
Determines the background image's horizontal and vertical position. e default is the top left of the element.
text-decoration-color*
This sets the color of the line
text-decoration-line*
This takes the same values as text-decoration in CSS2.1, except blink, which has been dropped.
text-overflow
Set its value to ellipsis
word-wrap*
Allows long text, such as a URL, to be broken if it would otherwise over overflow.
background-origin*
Determines the point from which background- position is measured.
background-size*
Controls the size of background images.
border-image-slice
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.
box-shadow: inset
Inset shadows are drawn inside the element
box-shadow
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.
outline
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
Understanding Background in Box Model
Padding: The content's background stretches into padding. Margin: The background of the content's parent element shows through margins.
Understanding Border in Box Model
Padding: Padding goes inside the border. Margin: Margins go outside the border.
text-decoration-style*
Specifies the type of line used for text decoration, for example, solid or wavy.
text-shadow*
Applies one or more shadows to text.
Centering images
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
break-word
Lines can break at arbitrary points if no break points can be found.
pre-wrap
Preserve sequences of whitespace and new lines, but automatically wrap text when the border is reached.
overflow: visible, hidden, scroll, auto
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.
Box model order from inside out
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.
clear: left, right, both, none
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.
CSS box model
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
nowrap
Prevent the browser from automatically wrapping text.
overflow-y: visible;
Controls the vertical overflow of a block or inline block.
text-shadow
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); }
border-image-source
Tells the browser which image to use for the borders. You specify the image in the normal way with url().
pre-line
Close up sequences of whitespace as in normal text, but honor new lines.
Centering Block-level Elements
You center a block-level element by giving it a declared width and setting the left and right margins to auto.
background-clip*
Determines the area covered by the background.
CSS positioning
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.
CSS sprite
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
overflow
To hide over ow text, the overflow property needs to be set to hidden
Section 3
(50 cards)
:checked*
Matches a form element that has been checked or selected.
background: repeating-radial-gradient()
Creates a radial gradient that repeats infinitely.
:first-of-type*
Selects an element that is the first sibling of its type.
Descendant combinator
E F - Selects any F element that is a descendant of an E element. The descendant can be nested at any level.
:disabled*
Matches a form element that is disabled.
right
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.
table-header-group
<thead> Makes the element act as a table header.
table
<table> Makes the element act like an HTML table. Child elements are treated as table rows and/or cells.
bottom
Specifies the bottom offset of a positioned element. A positive value moves the element up. A negative value moves it down.
top
Specifies the top offset of a positioned element. A positive value moves the element down. A negative value moves it up.
background: linear-gradient();
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.
position: static;
This leaves the element in the normal document flow.
z-index
Sets the stacking order of positioned elements. If elements are in the same stacking context, ones with a higher z-index appear in front.
table-column
<col> Used internally by browsers to hide <col> elements.
table-cell
<td> Makes the element act as a table cell.
left
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.
:nth-of-type()*
Selects the nth sibling of its type.
counter-reset
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.
:last-of-type*
Selects an element that is the last sibling of its type.
:enabled*
Matches a form element that is not disabled.
Containing Block
• 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.
:only-of-type*
Selects an element that is the only sibling of its type. It can have other siblings, but not of the same type.
background: radial-gradient()
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.
:nth-last-child()*
Selects the nth-child of its parent counting from the last one.
:nth-last-of-type()*
Selects the nth sibling of its type counting from the last one.
table-row
<tr> Makes the element act like a table row. Child elements are treated as table cells.
Makes the element act as a table cell.
<caption> Makes the element act as a table caption.
content
Defines the content to be inserted by the pseudo-element.
table-row-group
<tbody> Makes the element act as a group of one or more table rows.
General sibling combinator
E ~ F - Selects all F elements that follow a sibling of type E.
background: repeating-linear-gradient()
Creates a linear gradient, in which the colors are repeated infinitely in both directions.
position: fixed;
This is similar to absolute, but the offsets are always calculated with reference to the browser viewport.
:not()*
Matches elements based on a negative condition.
Offsets of a Positioned Element
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.
table-column-group
<colgroup> Used internally by browsers to hide elements.
Adjacent sibling combinator
E + F - Selects an F element that immediately follows a sibling of type E.
clip
Defines the area of an absolutely positioned element that remains visible.
:only-child*
Selects an element that is the only child of its parent and has no siblings.
:first-child*
Selects an element that is the first child of its parent.
table-footer-group
<tfoot> Makes the element act as a table footer.
:nth-child()*
Selects the nth-child of its parent using the value between the parentheses.
counter-increment
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.
inline-table
<table> Same as table, but the element is displayed as an inline block.
generated content
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.
quotes
Defines the styles of quotation marks at any number of nested levels. The default value depends on the browser.
:empty*
Matches elements that have no content. To be empty, an element cannot even have whitespace between the opening and closing tags.
:last-child*
Selects an element that is the last child of its parent.
position: absolute;
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.
position: relative;
This moves the element relative to its normal position in the document flow, but without affecting the position of other elements.
Child combinator
E > F - Selects any F element that is the direct child of an E element.
Section 4
(20 cards)