101 docs tagged with "CSS"

align-content specify how browsers should position a flexible container's lines along the flexbox's cross-axis.

align-content specifies how browsers should align a grid container's rows along the container's column axis.

align-items specify how browsers should position a flexible container's items along the cross-axis of a flexbox.

align-items specify the default align-self value for all the grid items.

align-self specifies how browsers should position selected flexible items along the flexbox's cross-axis.

align-self specifies how browsers should align the selected grid item along its cell's column axis.

A CSS attribute selector selects an HTML element based on the element's attribute name or value.

A CSS basic selector selects an HTML element based on the element's name, id, or class.

We can center elements using margin, padding, text-align, and Flexbox. This article uses examples to discuss how element centering works in CSS.

Character encoding is the method used to encode a character from its standard form into code. Unicode assigns code points to characters.

column-gap specifies the gap sizes between a multi-column, grid, or flexbox container's columns.

A CSS combinator selector selects one or more HTML elements based on their relationship with some specified HTML nodes.

A CSS box model consists of some set of boxes wrapped around an HTML element for styling purposes.

clear specifies whether browsers should move the selected block-level element below its preceding floating element.

A CSS display property specifies how browsers should display an HTML element.

Flexbox allows easy resizing and repositioning of a flexible container and its items one-dimensionally.

float removes an element from the document's normal layout flow and relocates it to the right or left of its container.

gap is a shorthand for the row-gap and column-gap properties.

CSS grid lines are the lines browsers create on a grid container when you define the grid-template-columns or grid-template-rows property.

minmax() is a CSS Grid function for defining minimum and maximum grid sizes.

The CSS multi-column layout module makes browsers display content in multiple columns, just like how text flows in newspapers.

perspective() transforms an element by adding some perspective effects to it.

position defines how you want browsers to place the selected element.

rotate() transforms an element by rotating it two-dimensionally around a fixed point.

rotate3d() transforms an element by rotating it three-dimensionally around the x-, y-, and z-axis.

rotateX() transforms an element by rotating it three-dimensionally around the X-axis.

rotateY() transforms an element by rotating it three-dimensionally around the Y-axis.

A CSS ruleset consists of an element selector and a properties declaration block.

scale() transforms an element by resizing (scaling) it two-dimensionally from a fixed point.

scale3d() transforms an element by resizing (scaling) it three-dimensionally from a fixed point along the x-, y-, and z-axis.

scaleZ() transforms an element by resizing (scaling) it three-dimensionally from a fixed point along the z-axis.

skew() transforms an element by slanting (skewing) it two-dimensionally around a fixed point.

CSS transitions provide a smooth and gradual way to change a specific CSS property's value.

translate() transforms an element by repositioning (translating) it two-dimensionally.

translate3d() transforms an element by repositioning (translating) it three-dimensionally along the x-, y-, and z-axis.

translateZ() transforms an element by repositioning (translating) it three-dimensionally along the z-axis.

A CSS unit is the standard of measurement used in CSS to express the size of an element's property. Examples are px, em, rem, fr, and vh.

CSS variables are the custom CSS properties developers define for easy reuse throughout a stylesheet.

The difference between document, data, and code is that a document holds data. Data is a page's content. And code is a computer's language.

flex is a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

flex-basis sets the initial length of a flexible item.

flex-direction tells browsers the specific direction they should lay out a flexible container's direct children.

flex-flow is a shorthand for the flex-direction and flex-wrap properties.

flex-grow tells browsers how much of the flexbox's left-over space they should add to the selected flexible item's size.

flex-shrink tells browsers how much the specified flexible item should shrink when the sum of all items' sizes exceeds the flexbox's size.

flex-wrap specifies whether browsers should wrap overflown flexible items onto multiple lines.

Grid allows you to easily resize and reposition a grid container and its items two-dimensionally.

grid-area is a shorthand for the grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties.

grid-column is a shorthand for the grid-column-start and grid-column-end properties.

grid-column-end specifies where the selected grid item should end along the grid container's row axis.

grid-column-start specifies where the selected grid item should start along the grid container's row axis.

grid-row is a shorthand for the grid-row-start and grid-row-end properties.

grid-row-end specifies where the selected grid item should end along the grid container's column axis.

grid-row-start specifies where the selected grid item should start along the grid container's column axis.

grid-template-areas specify the area where you want to place named grid items within a grid container.

grid-template-columns specifies the number and widths of columns browsers should display in the selected grid container.

grid-template-rows specifies the number and heights of rows browsers should display in the selected grid container.

A comment tells browsers to ignore a piece of code. Developers typically use comments for notes, debugging, and code deactivation.

The main difference between HTML, CSS, and JavaScript is their functions. HTML is an orator, CSS a stylist, while JavaScript is a commander.

Inline CSS styles only the element on which you used it. But internal and external CSS style multiple HTML elements.

justify-content specifies how browsers should position a flexible container's items along the flexbox's main axis.

justify-content specifies how browsers should position a grid container's columns along its row axis.

justify-items specify the default justify-self value for all the grid items.

justify-self specifies how browsers should position the selected grid item along its cell's row axis.

Minimax algorithm is a recursive function that helps a player minimize the maximum possibility of losing a game.

Normal flow is the default way of laying out elements on an HTML page.

order changes a flexible item's default layout.

A CSS pseudo-selector selects a specific part of an HTML element or selects an HTML element only when it is in a particular state.

repeat() allows you to write more concise and readable values when specifying multiple grid tracks with repeated patterns.

rotateZ() transforms an element by rotating it three-dimensionally around the Z-axis.

row-gap specifies the gap size between an element's rows. A gap is sometimes called a gutter.

Learn the differences between text and font.

Learn the differences between the CSS text- and font- properties.

The CSS transform property translates, rotates, skews, or scales an HTML element.

This glossary defines web-related words and abbreviations beginning with A.

This glossary defines web-related words and abbreviations beginning with B.

This glossary defines web-related words and abbreviations beginning with C.

This glossary defines web-related words and abbreviations beginning with D.

This glossary defines web-related words and abbreviations beginning with E.

This glossary defines web-related words and abbreviations beginning with F.

This glossary defines web-related words and abbreviations beginning with G.

This glossary defines web-related words and abbreviations beginning with H.

This glossary defines web-related words and abbreviations beginning with I.

This glossary defines web-related words and abbreviations beginning with J.

This glossary defines web-related words and abbreviations beginning with L.

This glossary defines web-related words and abbreviations beginning with M.

This glossary defines web-related words and abbreviations beginning with N.

This glossary defines web-related words and abbreviations beginning with O.

This glossary defines web-related words and abbreviations beginning with P.

This glossary defines web-related words and abbreviations beginning with Q.

This glossary defines web-related words and abbreviations beginning with R.

This glossary defines web-related words and abbreviations beginning with S.

This glossary defines web-related words and abbreviations beginning with T.

This glossary defines web-related words and abbreviations beginning with U.

This glossary defines web-related words and abbreviations beginning with V.

This glossary defines web-related words and abbreviations beginning with W.

This glossary defines web-related words and abbreviations beginning with Y.

This glossary defines web-related words and abbreviations beginning with Z.

A block is a pair of braces used to group multiple statements. Block typically gets used in JavaScript functions and CSS rulesets.

:nth-child() selects one or more child elements among their direct siblings regardless of their node types.

:nth-of-type() selects one or more child elements among their direct siblings of the same node type.