| layout | title |
|---|---|
../../layouts/CheatSheet.astro |
CSS Cheatsheet |
CSS is a language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language.
Syntax: property-name : value;
Some common values to all properties: inherit / initial / revert / revert-layer / unset
| Property Name | Description | Values (Separated by /) |
|---|---|---|
align-content |
Aligns a flex container's lines within the flex container when there is extra space in the cross-axis | flex-start / flex-end / center / space-between / space-around / space-evenly / stretch / start / end / baseline / first baseline / last baseline / safe center / unsafe center |
align-items |
Aligns flex items of the current line the same way as justify-content | flex-start / flex-end / center / baseline / stretch |
align-self |
Aligns flex items of the current line the same way as justify-content | auto / flex-start / flex-end / center / baseline / stretch |
all |
Sets all the properties | initial / inherit / unset |
animation |
A shorthand property for all the animation-* properties | Syntax: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state |
animation-delay |
Defines when the animation will start | time / % |
animation-direction |
Defines whether the animation should play in reverse on alternate cycles | normal / reverse / alternate / alternate-reverse |
animation-duration |
Defines how long an animation should take to complete one cycle | time / % |
animation-fill-mode |
Defines a style for the target element when the animation is not playing (when it is finished, or when it has a delay) | none / forwards / backwards / both |
animation-iteration-count |
Defines the number of times an animation should be played | number / infinite |
animation-name |
Specifies a name for the @keyframes animation | none / keyframes-name |
animation-play-state |
Defines whether the animation is running or paused | running / paused |
animation-timing-function |
Defines the speed curve of the animation | ease / linear / ease-in / ease-out / ease-in-out / cubic-bezier(n,n,n,n) |
backface-visibility |
Defines whether or not the back face of an element should be visible when facing the user | visible / hidden |
background |
A shorthand property for all the background-* properties | Syntax background-color background-image background-position background-size background-repeat background-origin background-clip background-attachment background-blend-mode |
background-attachment |
Sets whether a background image scrolls with the rest of the page, or is fixed | scroll / fixed / local |
background-blend-mode |
Specifies the blending mode of each background layer (color/image) | normal / multiply / screen / overlay / darken / lighten / color-dodge / saturation / color / luminosity |
background-clip |
Specifies how far the background (color or image) should extend within an element | border-box / padding-box / content-box |
background-color |
Sets the background color of an element | color |
background-image |
Sets one or more background images for an element | url(image-path) / none |
background-origin |
Specifies the origin position of a background image | padding-box / border-box / content-box |
background-position |
Sets the starting position of a background image | top left / top center / top right / center left / center center / center right / bottom left / bottom center / bottom right / x-axis y-axis / x-axis / y-axis |
background-repeat |
The way the background image is repeated | repeat / repeat-x / repeaty / no-repeat |
background-size |
Background image size | length / percentage / auto / cover / contain |
border |
Sets all border properties in one line | Syntax: top right bottom left / top-bottom left-right / all-at-once |
border-bottom |
Bottom border properties in one line | Syntax: width style color |
border-bottom-color |
Color of the bottom | color (RGB, HEX, name) / transparent |
border-bottom-left-radius |
Border bottom left radius | length / percentage |
border-bottom-right-radius |
Border bottom right radius | length / percentage |
border-bottom-style |
Border bottom style | none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset |
border-bottom-width |
Border bottom width | length / percentage |
border-collapse |
Collapses the borders between table cells | collapse / separate |
border-color |
Sets all border color properties in one line | Syntax: top right bottom left / top-bottom left-right / all-at-once |
border-image |
Shorthand property for border-image-* | Syntax: source slice width outset repeat |
border-image-outset |
Outset of the border image | length / number |
border-image-repeat |
How the border image is repeated | stretch / repeat / round |
border-image-slice |
Slices the border image | number / percentage |
border-image-source |
Source of the border image | url (path to image) / none |
border-image-width |
Width of the border image | length / percentage / number |
border-left |
Left border properties in one line | Syntax: width style color |
border-left-color |
Color of the left border | color (RGB, HEX, name) / transparent |
border-left-style |
Style of the left border | none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset |
border-left-width |
Width of the left border | length / percentage |
border-radius |
Sets all border radius properties in one line | Syntax: top-left top-right bottom-right bottom-left / top-bottom left-right / all-at-once |
border-right |
Right border properties in one line | Syntax: width style color |
border-right-color |
Color of the right border | color (RGB, HEX, name) / transparent |
border-right-style |
Style of the right border | none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset |
border-right-width |
Width of the right border | length / percentage |
border-spacing |
Spacing between the cells | length / percentage |
border-style |
Sets all border style properties in one line | Syntax: top right bottom left / top-bottom left-right / all-at-once |
border-top |
Top border properties in one line | Syntax: width style color |
border-top-color |
Color of the top border | color (RGB, HEX, name) / transparent |
border-top-left-radius |
Border top left radius | length / percentage |
border-top-right-radius |
Border top right radius | length / percentage |
border-top-style |
Style of the top border | none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset |
border-top-width |
Width of the top border | length / percentage |
border-width |
Sets all border width properties in one line | Syntax: top right bottom left / top-bottom left-right / all-at-once |
bottom |
Distance from the bottom of the element | length / percentage / auto |
box-shadow |
Adds shadow to the box | Syntax: h-offset v-offset blur spread color inset |
box-sizing |
Defines how the width and height of the element are calculated | content-box / border-box |
caption-side |
Position of the table caption | top / bottom |
caret-color |
Color of the caret | color (RGB, HEX, name) / auto |
clear |
Specifies on which sides of an element floating elements are not allowed | none / left / right / both |
clip |
Clipping region | rect (top right bottom left) / auto |
color |
Text color | color (RGB, HEX, name) / transparent |
column-count |
Number of columns | number / auto |
column-fill |
How to fill columns | balance / auto |
column-gap |
Gap between the columns | length / percentage |
column-rule |
Sets all column rule properties in one line | Syntax: width style color |
column-rule-color |
Color of the column rule | color (RGB, HEX, name) / transparent |
column-rule-style |
Style of the column rule | none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset |
column-rule-width |
Width of the column rule | length / percentage |
column-span |
How many columns an element should span across | none / all |
column-width |
Width of the columns | length / percentage |
columns |
Sets all column properties in one line | Syntax: column-width column-count |
content |
Used with the ::before and ::after pseudo-elements, to insert generated content | string / url (path to image) / none |
counter-increment |
Increases or decreases the value of one or more CSS counters | counter-name value |
counter-reset |
Resets one or more CSS counters | counter-name value |
cursor |
Specifies the mouse cursor to be displayed when pointing over an element | auto / default / none / context-menu / help / pointer / progress / wait / cell / crosshair / text / vertical-text / alias / copy / move / no-drop / not-allowed / e-resize / n-resize / ne-resize / nw-resize / s-resize / se-resize / sw-resize / w-resize / ew-resize / ns-resize / nesw-resize / nwse-resize / col-resize / row-resize / all-scroll / zoom-in / zoom-out / grab / grabbing |
direction |
Specifies the text direction/writing direction | ltr / rtl |
display |
Specifies how a certain HTML element should be displayed | none / inline / block / inline-block / list-item / run-in / compact / marker / table / inline-table / table-row-group / table-header-group / table-footer-group / table-row / table-column-group / table-column / table-cell / table-caption / ruby / ruby-base / ruby-text / ruby-base-container / ruby-text-container / contents / flow / flow-root / table / flex / inline-flex / grid / inline-grid / ruby-base-group / ruby-text-group |
empty-cells |
Specifies whether or not to display borders and background on empty cells in a table | show / hide |
filter |
Defines effects (e.g. blurring or color shifting) on an element before the element is displayed | none / url (path to SVG filter) / blur (length) / brightness (percentage) / contrast (percentage) / drop-shadow (h-offset v-offset blur spread color) / grayscale (percentage) / hue-rotate (angle) / invert (percentage) / opacity (percentage) / saturate (percentage) / sepia (percentage) |
flex |
Sets all flex properties in one line | Syntax: flex-grow flex-shrink flex-basis |
flex-basis |
Specifies the initial length of a flexible item | length / auto |
flex-direction |
Specifies the direction of the flexible items | row / row-reverse / column / column-reverse |
flex-flow |
Sets all flex flow properties in one line | Syntax: flex-direction flex-wrap |
flex-grow |
Specifies how much the item will grow relative to the rest | number |
flex-shrink |
Specifies how the item will shrink relative to the rest | number |
flex-wrap |
Specifies whether the flexible items should wrap or not | nowrap / wrap / wrap-reverse |
float |
Specifies whether or not a box should float | left / right / none |
font |
Sets all font properties in one line | Syntax: font-style font-variant font-weight font-size/line-height font-family |
font-family |
Specifies the font family for text | font-name / generic-family |
font-feature-settings |
Controls advanced typographic features in OpenType fonts | normal / string |
font-kerning |
Controls the usage of the kerning information | auto / normal / none |
font-language-override |
Controls the usage of language-specific glyphs in a typeface | normal / string |
font-size |
Specifies the font size of text | length / percentage / xx-small / x-small / small / medium / large / x-large / xx-large / smaller / larger |
font-size-adjust |
Preserves the readability of text when font fallback occurs | none / number |
font-stretch |
Selects a normal, condensed, or expanded face from a font family | normal / ultra-condensed / extra-condensed / condensed / semi-condensed / semi-expanded / expanded / extra-expanded / ultra-expanded |
font-style |
Specifies the font style for text | normal / italic / oblique |
font-synthesis |
Controls which missing typefaces (bold or italic) may be synthesized by the browser | none / weight / style / weight style |
font-variant |
Specifies whether or not a text should be displayed in a small-caps font | normal / small-caps / all-small-caps / petite-caps / all-petite-caps / unicase / titling-caps |
font-variant-alternates |
Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values | normal / string |
font-variant-caps |
Controls the usage of alternate glyphs for capital letters | normal / small-caps / all-small-caps / petite-caps / all-petite-caps / unicase / titling-caps |
font-variant-east-asian |
Controls the usage of alternate glyphs for East Asian scripts | normal / string |
font-variant-ligatures |
Controls which ligatures and contextual forms are used in textual content of the elements it applies to | normal / none / string |
font-variant-numeric |
Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers | normal / ordinal / slashed-zero / lining-nums / oldstyle-nums / proportional-nums / tabular-nums / diagonal-fractions / stacked-fractions |
font-variant-position |
Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font | normal / sub / super |
font-weight |
Specifies the weight of a font | normal / bold / bolder / lighter / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900 |
grid |
Sets all grid properties in one line | Syntax: grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow grid-column-gap grid-row-gap |
grid-area |
Specifies a name for the grid item | grid-row-start / grid-column-start / grid-row-end / grid-column-end |
grid-auto-columns |
Specifies the size of an implicitly-created column track | length / percentage / auto |
grid-auto-flow |
Specifies how auto-placed items are inserted in the grid | row / column / row dense / column dense |
grid-auto-rows |
Specifies the size of an implicitly-created row track | length / percentage / auto |
grid-column |
Specifies a grid item's size and location within the grid column by referring to specific grid lines | grid-column-start / grid-column-end |
grid-column-end |
Specifies where to end the grid item | grid-column-line |
grid-column-gap |
Specifies the size of the gap between columns | length / percentage |
grid-column-start |
Specifies where to start the grid item | grid-column-line |
grid-gap |
Sets the gap between the rows and columns | Syntax: grid-row-gap grid-column-gap |
grid-row |
Specifies a grid item's size and location within the grid row by referring to specific grid lines | grid-row-start / grid-row-end |
grid-row-end |
Specifies where to end the grid item | grid-row-line |
grid-row-gap |
Specifies the size of the gap between rows | length / percentage |
grid-row-start |
Specifies where to start the grid item | grid-row-line |
grid-template |
Sets all grid template properties in one line | Syntax: grid-template-rows grid-template-columns grid-template-areas |
grid-template-areas |
Specifies how to display columns and rows, using named grid items | none / string |
grid-template-columns |
Specifies the size of the columns, and how many columns in a grid layout | none / track-list |
grid-template-rows |
Specifies the size of the rows in a grid layout | none / track-list |
height |
Sets the height of an element | length / percentage / auto |
hyphens |
Specifies how to split words to improve the layout of paragraphs | none / manual / auto |
image-orientation |
Specifies the orientation of an image | angle / from-image |
image-rendering |
Gives a hint to the browser about what aspects of an image are most important to preserve when the image is scaled | auto / optimizeSpeed / optimizeQuality |
image-resolution |
Specifies the intended resolution for a raster image | from-image / resolution |
ime-mode |
Specifies the state of the Input Method Editor for text fields | auto / normal / active / inactive / disabled |
initial-letter |
Specifies the styling of dropped, raised, and sunken initial letters | normal / number / length / percentage |
initial-letter-align |
Specifies the alignment of an initial letter | auto / alphabetic / hanging / ideographic / mathematical |
initial-letter-wrap |
Specifies whether the initial letter may be wrapped to the next line | normal / first / all |
inline-size |
Sets the width or height of an inline box, depending on the value of the writing-mode property | length / percentage / auto |
justify-content |
Specifies the alignment between the items inside a flexible container when the items do not use all available space | flex-start / flex-end / center / space-between / space-around / space-evenly / start / end / left / right |
justify-items |
Specifies the alignment for items inside a flexible container | auto / normal / stretch / start / end / center / self-start / self-end / left / right / baseline / first baseline / last baseline / safe center / unsafe center |
justify-self |
Specifies the alignment for selected items inside a flexible container | auto / normal / stretch / start / end / center / self-start / self-end / left / right / baseline / first baseline / last baseline / safe center / unsafe center |
left |
Specifies the left position of a positioned element | length / percentage / auto |
letter-spacing |
Increases or decreases the space between characters in a text | normal / length |
line-break |
Specifies how/if to break lines | auto / loose / normal / strict / anywhere |
line-height |
Specifies the line height | normal / number / length / percentage |
list-style |
Sets all the properties for a list in one declaration | Syntax: list-style-type list-style-position list-style-image |
list-style-image |
Specifies an image as the list-item marker | none / url |
list-style-position |
Specifies the position of the list-item markers (bullet points) | inside / outside |
list-style-type |
Specifies the type of list-item marker | none / disc / circle / square / decimal / decimal-leading-zero / lower-roman / upper-roman / lower-greek / lower-latin / upper-latin / armenian / georgian / lower-alpha / upper-alpha / hebrew / cjk-ideographic / hiragana / hiragana-iroha / katakana / katakana-iroha |
margin |
Sets all the margin properties in one declaration | Syntax: margin-top margin-right margin-bottom margin-left |
margin-block-end |
Sets the margin at the bottom of an element | length / percentage / auto |
margin-block-start |
Sets the margin at the top of an element | length / percentage / auto |
margin-bottom |
Sets the bottom margin of an element | length / percentage / auto |
margin-inline-end |
Sets the margin on the right side of an element | length / percentage / auto |
margin-inline-start |
Sets the margin on the left side of an element | length / percentage / auto |
margin-left |
Sets the left margin of an element | length / percentage / auto |
margin-right |
Sets the right margin of an element | length / percentage / auto |
margin-top |
Sets the top margin of an element | length / percentage / auto |
max-height |
Sets the maximum height of an element | length / percentage / none |
max-inline-size |
Sets the maximum width or height of an inline box, depending on the value of the writing-mode property | length / percentage / none |
max-width |
Sets the maximum width of an element | length / percentage / none |
min-block-size |
Sets the minimum height or width of an element, depending on the value of the writing-mode property | length / percentage |
min-height |
Sets the minimum height of an element | length / percentage |
min-inline-size |
Sets the minimum width or height of an element, depending on the value of the writing-mode property | length / percentage |
min-width |
Sets the minimum width of an element | length / percentage |
mix-blend-mode |
Specifies how an element's content should blend with its direct parent background | normal / multiply / screen / overlay / darken / lighten / color-dodge / saturation / color / luminosity |
object-fit |
Specifies how the contents of a replaced element should be fitted to the box established by its used height and width | fill / contain / cover / none / scale-down |
object-position |
Specifies the alignment of the replaced element inside its box | x-axis y-axis / x-axis / y-axis / center |
offset |
Sets all the offset properties in one declaration | Syntax: offset-path offset-distance offset-rotate offset-anchor |
offset-anchor |
Specifies the position of the origin of an element's offset | auto / x-axis y-axis / x-axis / y-axis / center |
offset-distance |
Specifies the distance between the origin of an element's offset and its offset path | length / percentage / auto |
offset-path |
Specifies the path the element should follow | none / path() / <basic-shape> / <geometry-box> |
offset-position |
Sets all the offset-position properties in one declaration | Syntax: offset-path offset-distance offset-rotate |
offset-rotate |
Specifies how an element should be rotated along the offset path | auto / angle / reverse |
opacity |
Sets the opacity level for an element | number |
order |
Specifies the order of the flexible item, relative to the rest | integer |
orphans |
Specifies the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element | integer |
outline |
Sets all the outline properties in one declaration | Syntax: outline-width outline-style outline-color |
outline-color |
Sets the color of an outline | color |
outline-offset |
Offsets an outline, and draws it beyond the border edge | length |
outline-style |
Sets the style of an outline | none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset |
outline-width |
Sets the width of an outline | thin / medium / thick / length |
overflow |
Specifies what happens if content overflows an element's box | visible / hidden / scroll / auto / overlay / clip |
overflow-wrap |
Specifies whether or not the browser may break lines within words in order to prevent overflow (when a string is too long to fit its containing box) | normal / break-word / anywhere |
overflow-x |
Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area | visible / hidden / scroll / auto / overlay / clip |
overflow-y |
Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area | visible / hidden / scroll / auto / overlay / clip |
padding |
Sets all the padding properties in one declaration | Syntax: padding-top padding-right padding-bottom padding-left |
padding-block-end |
Sets the padding at the bottom of an element | length / percentage |
padding-block-start |
Sets the padding at the top of an element | length / percentage |
padding-bottom |
Sets the bottom padding of an element | length / percentage |
padding-inline-end |
Sets the padding on the right side of an element | length / percentage |
padding-inline-start |
Sets the padding on the left side of an element | length / percentage |
padding-left |
Sets the left padding of an element | length / percentage |
padding-right |
Sets the right padding of an element | length / percentage |
padding-top |
Sets the top padding of an element | length / percentage |
page-break-after |
Specifies the page-breaking behavior after an element | auto / always / avoid / left / right |
page-break-before |
Specifies the page-breaking behavior before an element | auto / always / avoid / left / right |
page-break-inside |
Specifies the page-breaking behavior inside an element | auto / avoid |
perspective |
Gives a 3D-positioned element some perspective | none / length |
perspective-origin |
Defines at which position the user is looking at the 3D-positioned element | x-axis y-axis / x-axis / y-axis / center |
place-content |
Sets the align-content and justify-content properties in one declaration | Syntax: align-content justify-content |
place-items |
Sets the align-items and justify-items properties in one declaration | Syntax: align-items justify-items |
place-self |
Sets the align-self and justify-self properties in one declaration | Syntax: align-self justify-self |
pointer-events |
Defines whether or not an element reacts to pointer events | auto / none / visiblePainted / visibleFill / visibleStroke / visible / painted / fill / stroke / all |
position |
Specifies the type of positioning method used for an element (static, relative, absolute or fixed) | static / relative / absolute / fixed / sticky |
quotes |
Specifies how quotation marks should look | none / string string string string |
resize |
Specifies whether or not an element is resizable by the user | none / both / horizontal / vertical / block / inline |
right |
Specifies the right position of a positioned element | length / percentage / auto |
row-gap |
Sets the size of the gap between an element's grid rows | length / percentage |
scroll-behavior |
Specifies whether to smoothly animate the scroll position in a scrollable box, instead of a straight jump | auto / smooth |
tab-size |
Specifies the width of a tab character | number / length |
table-layout |
Specifies the algorithm used to lay out table cells, rows, and columns | auto / fixed |
text-align |
Specifies the horizontal alignment of text | left / right / center / justify / justify-all / start / end / match-parent |
text-align-last |
Specifies the alignment of the last line of a block element | auto / left / right / center / justify / start / end |
text-combine-upright |
Specifies how to combine multiple characters into the space of a single character | none / all / digits |
text-decoration |
Sets all the text-decoration properties in one declaration | Syntax: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness |
text-decoration-color |
Specifies the color of the text-decoration | color |
text-decoration-line |
Specifies the type of line in a text-decoration | none / underline / overline / line-through / blink |
text-decoration-skip |
Specifies what parts of an element's content are skipped over when applying any text decoration | none / objects / spaces / ink |
text-decoration-style |
Specifies the style of the line in a text decoration | solid / double / dotted / dashed / wavy |
text-decoration-thickness |
Specifies the thickness of the line in a text decoration | auto / from-font / length |
text-indent |
Specifies the indentation of the first line in a text-block | length / percentage |
text-orientation |
Specifies the orientation of the text in a line | mixed / upright / sideways / sideways-right / sideways-left / use-glyph-orientation |
text-overflow |
Specifies what should happen when text overflows the containing element | clip / ellipsis |
text-rendering |
Gives a fine-grained control over the algorithm used to render text | auto / optimizeSpeed / optimizeLegibility / geometricPrecision |
text-shadow |
Adds shadow to text | none / h-shadow v-shadow blur color |
text-transform |
Controls the capitalization of text | none / capitalize / uppercase / lowercase / full-width / full-size-kana |
text-underline-offset |
Specifies the position of the underline which is set using the text-decoration property | auto / length |
text-underline-position |
Specifies the position of the underline which is set using the text-decoration property | auto / under / left / right |
top |
Specifies the top position of a positioned element | length / percentage / auto |
touch-action |
Specifies whether and how a particular region can be manipulated by a user | auto / none / pan-x / pan-left / pan-right / pan-y / pan-up / pan-down / pinch-zoom |
transform |
Applies a 2D or 3D transformation to an element | none / matrix() / matrix3d() / perspective() / rotate() / rotate3d() / rotateX() / rotateY() / rotateZ() / scale() / scale3d() / scaleX() / scaleY() / scaleZ() / skew() / skewX() / skewY() / translate() / translate3d() / translateX() / translateY() / translateZ() |
transform-box |
Defines the box to which the transform-origin property applies | border-box / fill-box / view-box |
transform-origin |
Allows you to change the position on transformed elements | x-axis y-axis z-axis / x-axis y-axis / x-axis / y-axis / z-axis / left / center / right / top / bottom |
transform-style |
Specifies how nested elements are rendered in 3D space | flat / preserve-3d |
transition |
A shorthand property for all the transition-* properties | Syntax: transition-property transition-duration transition-timing-function transition-delay |
transition-delay |
Specifies when the transition effect will start | time |
transition-duration |
Specifies how many seconds or milliseconds a transition effect takes to complete | time |
transition-property |
Specifies the name of the CSS property the transition effect is for | none / all / property |
transition-timing-function |
Specifies the speed curve of the transition effect | ease / ease-in / ease-out / ease-in-out / linear / step-start / step-end / steps() / cubic-bezier() |
unicode-bidi |
Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document | normal / embed / bidi-override |
user-select |
Specifies whether the text of an element can be selected | auto / none / text / all / contain |
vertical-align |
Sets the vertical alignment of an element | baseline / sub / super / top / text-top / middle / bottom / text-bottom / length / percentage |
visibility |
Specifies whether or not an element is visible | visible / hidden / collapse |
white-space |
Specifies how white-space inside an element is handled | normal / pre / nowrap / pre-wrap / pre-line / break-spaces |
width |
Sets the width of an element | length / percentage / auto |
will-change |
Indicates what will change before the element is actually changed | auto / contents / scroll-position / transform |
word-break |
Specifies how words should break when reaching the end of a line | normal / break-all / keep-all / break-word |
word-spacing |
Increases or decreases the space between words in a text | normal / length |
word-wrap |
Specifies whether or not the browser may break lines within words in order to prevent overflow (when a string is too long to fit its containing box) | normal / break-word |
writing-mode |
Specifies whether lines of text are laid out horizontally or vertically and the direction which lines of text and blocks progress | horizontal-tb / vertical-rl / vertical-lr / sideways-rl / sideways-lr |
z-index |
Specifies the stack order of an element | auto / number |
| Command | Description |
|---|---|
* |
all elements |
div |
all 'div' tags |
div.p |
all 'div' and 'p' paragraphs |
div p |
paragraphs inside divs |
div > p |
all 'p' tag one level deep in 'div' |
div + p |
p tags immediately after div |
div ~ p |
p tags preceded by div |
.class-name |
all elements with class |
#id-name |
element with 'id' |
div.class-name |
divs with certain classname |
div#id-name |
div with certain 'id' |
#id-name |
all elements iside that #id-name |
| Command | Description |
|---|---|
a:link |
link in normal state |
a:active |
link in clicked state |
a:hover |
link with mouse over it |
a:visited |
visited link |
p::after{content:"yo"/} |
add content after p |
p::before |
add content before p |
input:checked |
checked inputs |
input:disabled |
disabled inputs |
input:enabled |
enabled inputs |
input:focus |
input has focus |
input:in-range |
value in range |
input:out-of-range |
input value out of range |
input:valid |
input with valid value |
input:invalid |
input with invalid value |
input:optional |
no required attribute |
input:required |
input with requred attribute |
input:read-only |
with readonly attribute |
input:read-write |
no readonly attrib. |
div:empty |
element with no children |
p::first-letter |
first letter in p |
p::first-line |
first line in p |
p:first-of-type |
first of some type |
p:last-of-type |
last of some type |
p:lang(en) |
p with en language attribute |
:not(span) |
element that's not a span |
p:first-child |
first child of its parent |
p:last-child |
last child of its parent |
p:nth-child(2) |
second child of its parent |
p:nth-child(3n+1) |
nth-child (an + b) formula |
p:nth-last-child(2) |
second child from behind |
p:nth-of-type(2) |
second p of its parent |
p:nth-last-of-type(2) |
...from behind |
p:only-of-type |
unique of its parent |
p:only-child |
only child of its parent |
:root |
documents root element |
::selection |
portion selected by user |
:target |
highlight active anchor |
| Command | Description |
|---|---|
a[target] |
links with a target attribute |
a[target="_blank"] |
links which open in new tab |
[title~="chair"] |
title element containing a word |
[class^="chair"] |
class starts with chair |
[class="chair"] |
class starts with the chair word |
[class*="chair"] |
class contains chair |
[class$="chair"] |
class ends with chair |
input[type="button"] |
specified input type |