所有动态

CSS Browser Support Reference CSS Reference With Browser Support The table below lists all CSS properties and how each property is supported in the different browsers: The number to the right of the browser icon indicates in which browser version the property was first supported. Property Edge Firefox Chrome Safari Opera A accent-color 93 92 93 15.4 79 align-content 16 52 57 10.1 44 align-items 16 52 57 10.1 44 align-self 16 52 57 10.1 44 all 79 27 37 9.1 24 animation 10 16 43 9 30 animation-delay 10 16 43 9 30 animation-direction 10 16 43 9 30 animation-duration 10 16 43 9 30 animation-fill-mode 10 16 43 9 30 animation-iteration-count 10 16 43 9 30 animation-name 10 16 43 9 30 animation-play-state 10 16 43 9 30 animation-timing-function 10 16 43 9 30 aspect-ratio 88 89 88 15 74 B backdrop-filter 79 103 76 9 63 backface-visibility 12 16 36 15.4 23 background 4 1 1 1 3.5 background-attachment 4 1 1 1 3.5 background-blend-mode 79 30 35 7.1 22 background-clip 9 4 4 3 10.5 background-color 4 1 1 1 3.5 background-image 4 1 1 1 3.5 background-origin 9 4 4 3 10.5 background-position 4 1 1 1 3.5 background-position-x 12 49 1 1 15 background-position-y 12 49 1 1 15 background-repeat 4 1 1 1 3.5 background-size 9 4 4 4.1 10 block-size 79 41 57 12.1 44 border 4 1 1 1 3.5 border-block 87 66 87 14.1 73 border-block-color 87 66 87 14.1 73 border-block-end 79 41 69 12.1 56 border-block-end-color 79 41 69 12.1 56 border-block-end-style 79 41 69 12.1 56 border-block-end-width 79 41 69 12.1 56 border-block-start 79 41 69 12.1 56 border-block-start-color 79 41 69 12.1 56 border-block-start-style 79 41 69 12.1 56 border-block-start-width 79 41 69 12.1 56 border-block-style 87 66 87 14.1 73 border-block-width 87 66 87 14.1 73 border-bottom 4 1 1 1 3.5 border-bottom-color 4 1 1 1 3.5 border-bottom-left-radius 9 4 5 5 10.5 border-bottom-right-radius 9 4 5 5 10.5 border-bottom-style 5.5 1 1 1 9.2 border-bottom-width 4 1 1 1 3.5 border-collapse 5 1 1 1.2 4 border-color 4 1 1 1 3.5 border-end-end-radius 89 66 89 15 75 border-end-start-radius 89 66 89 15 75 border-image 11 15 16 6 15 border-image-outset 11 15 15 6 15 border-image-repeat 11 15 15 6 15 border-image-slice 11 15 15 6 15 border-image-source 11 15 15 6 15 border-image-width 11 13 15 6 15 border-inline 87 66 87 14.1 73 border-inline-color 87 66 87 14.1 73 border-inline-end 79 41 69 12.1 56 border-inline-end-color 79 41 69 12.1 56 border-inline-end-style 79 41 69 12.1 56 border-inline-end-width 79 41 69 12.1 56 border-inline-start 79 41 69 12.1 56 border-inline-start-color 79 41 69 12.1 56 border-inline-start-style 79 41 69 12.1 56 border-inline-start-width 79 41 69 12.1 56 border-inline-style 87 66 87 14.1 73 border-inline-width 87 66 87 14.1 73 border-left 4 1 1 1 3.5 border-left-color 4 1 1 1 3.5 border-left-style 5.5 1 1 1 9.2 border-left-width 4 1 1 1 3.5 border-radius 9 4 5 5 10.5 border-right 4 1 1 1 3.5 border-right-color 4 1 1 1 3.5 border-right-style 5.5 1 1 1 9.2 border-right-width 4 1 1 1 3.5 border-spacing 8 1 1 1 4 border-start-end-radius 89 66 89 15 75 border-start-start-radius 89 66 89 15 75 border-style 4 1 1 1 3.5 border-top 4 1 1 1 3.5 border-top-color 4 1 1 1 3.5 border-top-left-radius 9 4 5 5 10.5 border-top-right-radius 9 4 5 5 10.5 border-top-style 5.5 1 1 1 9.2 border-top-width 4 1 1 1 3.5 border-width 4 1 1 1 3.5 bottom 5 1 1 1 6 box-decoration-break 79 32 22 6.1 15 box-shadow 9 4 10 5.1 10.5 box-sizing 8 29 10 5.1 9.5 break-after 10 65 50 10 37 break-before 10 65 50 10 37 break-inside 10 65 50 10 37 C caption-side 8 1 1 1 4 caret-color 79 53 57 11.1 44 @charset 12 1.5 2 4 9 clear 5 1 1 1 6 clip 8 1 1 1 7 clip-path 79 3.5 55 9.1 42 color 3 1 1 1 3.5 color-scheme 81 96 81 13 68 column-count 10 52 50 9 37 column-fill 10 52 50 10 37 column-gap 84 63 84 14.1 70 column-rule 10 52 50 9 37 column-rule-color 10 52 50 9 37 column-rule-style 10 52 50 9 37 column-rule-width 10 52 50 9 37 column-span 10 71 50 9 37 column-width 10 52 50 9 37 columns 10 52 50 9 37 @container 105 110 105 16 91 content 8 1 1 1 4 counter-increment 8 2 4 3.1 9.6 counter-reset 8 2 4 3.1 9.6 counter-set 85 68 85 17.2 71 @counter-style 91 33 91 17 77 cursor 5.5 4 5 5 9.6 D direction 5.5 1 2 1.3 9.2 display 8 3 4 3.1 7 E empty-cells 8 1 1 1.2 4 F filter 13 35 53 9.1 40 flex 11 28 29 9 17 flex-basis 11 28 29 9 17 flex-direction 11 28 29 9 17 flex-flow 11 28 29 9 17 flex-grow 11 28 29 9 17 flex-shrink 11 28 29 9 17 flex-wrap 11 28 29 9 17 float 4 1 1 1 7 font 4 1 1 1 3.5 @font-face 9 3.5 4 3.1 10 font-family 4 1 1 1 3.5 font-feature-settings 10 34 48 9.1 35 @font-feature-values 34 font-kerning 79 34 33 9.1 20.1 font-language-override 34 @font-palette-values 101 107 101 15.4 87 font-size 5.5 1 1 1 7 font-size-adjust 127 3 127 17 113 font-stretch 9 9 48 11 35 font-style 4 1 1 1 7 font-synthesis 97 34 97 10 83 font-variant 4 1 1 1 3.5 font-variant-alternates 111 34 111 9.1 97 font-variant-caps 79 34 52 9.1 39 font-variant-east-asian 79 34 63 9.1 50 font-variant-ligatures 79 34 34 9.1 21 font-variant-numeric 79 34 52 9.1 39 font-variant-position 117 34 117 9.1 103 font-weight 4 1 2 1.3 3.5 G gap 84 63 84 14.1 70 grid 10 52 57 10 44 grid-area 10 52 57 10 44 grid-auto-columns 10 52 57 10 44 grid-auto-flow 10 52 57 10 44 grid-auto-rows 10 52 57 10 44 grid-column 10 52 57 10 44 grid-column-end 10 52 57 10 44 grid-column-start 10 52 57 10 44 grid-row 10 52 57 10 44 grid-row-end 10 52 57 10 44 grid-row-start 10 52 57 10 44 grid-template 10 52 57 10 44 grid-template-areas 10 52 57 10 44 grid-template-columns 10 52 57 10 44 grid-template-rows 10 52 57 10 44 H hanging-punctuation height 4 1 1 1 7 hyphens 79 43 55 17 44 hyphenate-character 106 98 106 17 92 I image-rendering 79 65 41 10 28 @import 5.5 1 1 1 3.5 initial-letter 110 110 9 96 inline-size 79 41 57 12.1 44 inset 87 66 87 14.1 73 inset-block 87 63 87 14.1 73 inset-block-end 87 63 87 14.1 73 inset-block-start 87 63 87 14.1 73 inset-inline 87 63 87 14.1 73 inset-inline-end 87 63 87 14.1 73 inset-inline-start 87 63 87 14.1 73 isolation 79 36 41 7.1 30 J justify-content 11 28 29 9 17 justify-items 16 45 57 10.1 44 justify-self 16 45 57 10.1 44 K @keyframes 10 16 43 9 30 L @layer 99 97 99 15.4 86 left 5.5 1 1 1 5 letter-spacing 4 1 1 1 3.5 line-break 14 69 58 11 45 line-height 4 1 1 1 7 list-style 4 1 1 1 7 list-style-image 4 1 1 1 7 list-style-position 4 1 1 1 3.5 list-style-type 4 1 1 1 3.5 M margin 6 1 1 1 3.5 margin-block 87 66 87 14.1 73 margin-block-end 87 41 87 12.1 73 margin-block-start 87 41 87 12.1 73 margin-bottom 6 1 1 1 3.5 margin-inline 87 66 87 14.1 73 margin-inline-end 87 41 87 12.1 73 margin-inline-start 87 41 87 12.1 73 margin-left 6 1 1 1 3.5 margin-right 6 1 1 1 3.5 margin-top 6 1 1 1 3.5 marker 80 72 80 13.1 67 marker-end 80 72 80 13.1 67 marker-mid 80 72 80 13.1 67 marker-start 80 72 80 13.1 67 mask 120 53 120 15.4 106 mask-clip 120 53 120 15.4 106 mask-composite 120 53 120 15.4 106 mask-image 120 53 120 15.4 15 mask-mode 120 53 120 15.4 106 mask-origin 120 53 120 15.4 106 mask-position 120 53 120 15.4 106 mask-repeat 120 53 120 15.4 106 mask-size 120 53 120 15.4 106 mask-type 79 35 24 7 15 max-block-size 79 41 57 12.1 44 max-height 7 1 1 2 7 max-inline-size 79 41 57 12.1 44 max-width 7 1 1 2 7 @media 9 3.5 21 4 9 min-block-size 79 41 57 12.1 44 min-inline-size 79 41 57 12.1 44 min-height 7 1 1 2 4 min-width 7 1 1 2 4 mix-blend-mode 79 32 41 8 35 N @namespace 12 1 1 1 8 O object-fit 16 36 31 7.1 19 object-position 16 36 31 7.1 19 offset 79 72 55 16 42 offset-anchor 116 72 116 16 102 offset-distance 79 72 55 16 42 offset-path 79 72 55 15.4 45 offset-position 116 122 116 16 102 offset-rotate 79 72 56 16 43 opacity 9 2 4 3.1 9 order 11 28 29 9 17 orphans 8 25 3.1 10 outline 8 1.5 1 1.2 7 outline-color 8 1.5 1 1.2 7 outline-offset 15 3.5 4 3 10.5 outline-style 8 1.5 1 1.2 7 outline-width 8 1.5 1 1.2 7 overflow 4 1 1 1 7 overflow-anchor 79 66 56 43 overflow-wrap 18 49 23 6.1 12.1 overflow-x 9 3.5 4 3 9.5 overflow-y 9 1.5 4 3 9.5 overscroll-behavior 18 59 63 16 50 overscroll-behavior-block 79 73 77 16 64 overscroll-behavior-inline 79 73 77 16 64 overscroll-behavior-x 18 59 63 16 50 overscroll-behavior-y 18 59 63 16 50 P padding 4 1 1 1 3.5 padding-block 87 66 87 14.1 73 padding-block-end 87 41 87 12.1 73 padding-block-start 87 41 87 12.1 73 padding-bottom 4 1 1 1 3.5 padding-inline 87 66 87 14.1 73 padding-inline-end 87 41 87 12.1 73 padding-inline-start 87 41 87 12.1 73 padding-left 4 1 1 1 3.5 padding-right 4 1 1 1 3.5 padding-top 4 1 1 1 3.5 @page 12 19 12 6 page-break-after 4 1 1 1.2 7 page-break-before 4 1 1 1.2 7 page-break-inside 8 19 1 1.3 7 paint-order 17 60 35 8 22 perspective 10 16 36 9 23 perspective-origin 10 16 36 9 23 place-content 79 53 59 11 46 place-items 79 45 59 11 46 place-self 79 45 59 11 46 pointer-events 11 3.6 2 4 9 position 7 1 1 1.2 4 @property 85 128 85 16.4 71 Q quotes 8 1.5 11 5.1 4 R resize 79 5 4 4 15 right 5.5 1 1 1 5 rotate 104 72 104 14.1 90 row-gap 84 63 84 14.1 70 S scale 104 72 104 14.1 90 @scope 118 118 17.4 104 scroll-behavior 79 36 61 14 48 scroll-margin 79 90 69 14.1 56 scroll-margin-block 79 68 69 14.1 56 scroll-margin-block-end 79 68 69 14.1 56 scroll-margin-block-start 79 68 69 14.1 56 scroll-margin-bottom 79 68 69 14.1 56 scroll-margin-inline 79 68 69 14.1 56 scroll-margin-inline-end 79 68 69 14.1 56 scroll-margin-inline-start 79 68 69 14.1 56 scroll-margin-left 79 68 69 14.1 56 scroll-margin-right 79 68 69 14.1 56 scroll-margin-top 79 68 69 14.1 56 scroll-padding 79 90 69 14.1 56 scroll-padding-block 79 68 69 14.1 56 scroll-padding-block-end 79 68 69 14.1 56 scroll-padding-block-start 79 68 69 14.1 56 scroll-padding-bottom 79 68 69 14.1 56 scroll-padding-inline 79 68 69 14.1 56 scroll-padding-inline-end 79 68 69 14.1 56 scroll-padding-inline-start 79 68 69 14.1 56 scroll-padding-left 79 68 69 14.1 56 scroll-padding-right 79 68 69 14.1 56 scroll-padding-top 79 68 69 14.1 56 scroll-snap-align 79 68 69 11 56 scroll-snap-stop 79 68 69 11 56 scroll-snap-type 79 68 69 11 56 scrollbar-color 121 64 121 107 scrollbar-gutter 94 97 94 80 scrollbar-width 121 64 121 107 shape-image-threshold 79 62 37 10.1 24 shape-margin 79 62 37 10.1 24 shape-outside 79 62 37 10.1 24 shape-rendering 80 72 80 13.1 67 @starting-style 117 129 117 17.5 103 @supports 12 22 28 9 12.1 T tab-size 79 91 21 7 15 table-layout 5 1 14 1 7 text-align 3 1 1 1 3.5 text-align-last 12 49 47 16 34 text-combine-upright 79 48 48 15.4 35 text-decoration 3 1 1 1 3.5 text-decoration-color 79 36 57 12.1 44 text-decoration-line 79 36 57 12.1 44 text-decoration-style 79 36 57 12.1 44 text-decoration-thickness 89 70 89 12.1 75 text-emphasis 99 46 99 7 85 text-emphasis-color 99 46 99 7 85 text-emphasis-position 99 46 99 7 85 text-emphasis-style 99 46 99 7 85 text-indent 3 1 1 1 3.5 text-justify 55 text-orientation 79 41 48 14 35 text-overflow 6 7 4 3.1 11 text-shadow 10 3.5 4 4 9.6 text-transform 4 1 1 1 7 text-underline-offset 87 70 87 12.1 73 text-underline-position 79 74 33 12.1 20 top 5 1 1 1 6 touch-action 12 52 36 13 23 transform 12 16 36 9 23 transform-origin 12 16 36 9 23 transform-style 12 16 36 9 23 transition 10 16 26 6.1 12.1 transition-delay 10 16 26 6.1 12.1 transition-duration 10 16 26 6.1 12.1 transition-property 10 16 26 6.1 12.1 transition-timing-function 10 16 26 6.1 12.1 translate 104 72 104 14.1 90 U unicode-bidi 5.5 1 2 1.3 9.2 user-select 79 69 54 3.1 41 V vertical-align 4 1 1 1 4 visibility 4 1 1 1 4 W white-space 8 3.5 1 3 9.5 widows 8 25 7 10 width 4 1 1 1 3.5 will-change 79 36 36 9.1 24 word-break 5.5 15 4 3.1 15 word-spacing 6 1 1 1 3.5 word-wrap 5.5 3.5 4 3.1 10.5 writing-mode 12 41 48 11 35 Z z-index 4 3 1 1 4 zoom 12 126 1 3.1 15 Icon Explanations Supported by Edge Supported by Firefox Supported by Chrome Supported by Safari Supported by Opera Supported by Edge with prefix -webkit- Supported by Firefox with prefix -moz- Supported by Chrome with prefix -webkit- Supported by Safari with prefix -webkit- Supported by Opera with prefix -webkit- ★ +1 Sign in to track progress

CSS Default Values Reference Default CSS Values for HTML Elements The table below shows the default CSS browser values for all HTML elements. Element Default CSS Value Try it a:link color: (internal value); text-decoration: underline; cursor: auto; Try it » a:visited color: (internal value); text-decoration: underline; cursor: auto; Try it » a:link:active color: (internal value); Try it » a:visited:active color: (internal value); Try it » abbr None. address display: block; font-style: italic; Try it » area display: none; article display: block; aside display: block; audio None. b font-weight: bold; Try it » base None. bdi None. bdo unicode-bidi: bidi-override; blockquote display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; Try it » body display: block; margin: 8px; Try it » body:focus outline: none; Try it » br None. button None canvas None. caption display: table-caption; text-align: center; Try it » cite font-style: italic; Try it » code font-family: monospace; Try it » col display: table-column; Try it » colgroup display: table-column-group Try it » datalist display: none; dd display: block; margin-left: 40px; Try it » del text-decoration: line-through; Try it » details display: block; dfn font-style: italic; Try it » dialog None. div display: block; Try it » dl display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; Try it » dt display: block; Try it » em font-style: italic; Try it » embed:focus outline: none; fieldset display: block; margin-left: 2px; margin-right: 2px; padding-top: 0.35em; padding-bottom: 0.625em; padding-left: 0.75em; padding-right: 0.75em; border: 2px groove (internal value); Try it » figcaption display: block; figure display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; Try it » footer display: block; form display: block; margin-top: 0em; Try it » h1 display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; Try it » h2 display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; Try it » h3 display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; Try it » h4 display: block; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; Try it » h5 display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold; Try it » h6 display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold; Try it » head display: none; header display: block; hr display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px; Try it » html display: block; html:focus outline: none; i font-style: italic; Try it » iframe:focus outline: none; iframe[seamless] display: block; img display: inline-block; Try it » input None. ins text-decoration: underline; Try it » kbd font-family: monospace; Try it » label cursor: default; Try it » legend display: block; padding-left: 2px; padding-right: 2px; border: none; Try it » li display: list-item; link display: none; main None. map display: inline; mark background-color: yellow; color: black; Try it » menu display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; menuitem None. meta None. meter None. nav display: block; noscript None. object:focus outline: none; ol display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; Try it » optgroup None. option None. output display: inline; p display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; Try it » param display: none; picture None. pre display: block; font-family: monospace; white-space: pre; margin: 1em 0; Try it » progress None. q display: inline; Try it » q::before content: open-quote; Try it » q::after content: close-quote; Try it » rp None. rt line-height: normal; ruby None. s text-decoration: line-through; Try it » samp font-family: monospace; Try it » script display: none; section display: block; Try it » select None. small font-size: smaller; Try it » source None. span display: inline; strike text-decoration: line-through; Try it » strong font-weight: bold; Try it » style display: none; sub vertical-align: sub; font-size: smaller; Try it » summary display: block; sup vertical-align: super; font-size: smaller; Try it » table display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; Try it » tbody display: table-row-group; vertical-align: middle; border-color: inherit; td display: table-cell; vertical-align: inherit; template None. textarea None. tfoot display: table-footer-group; vertical-align: middle; border-color: inherit; th display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center; thead display: table-header-group; vertical-align: middle; border-color: inherit; time None. title display: none; tr display: table-row; vertical-align: inherit; border-color: inherit; track None. u text-decoration: underline; Try it » ul display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; Try it » var font-style: italic; Try it » video None. wbr None. ★ +1 Sign in to track progress

CSS Legal Color Values CSS Colors Colors in CSS can be specified by the following methods: Hexadecimal colors Hexadecimal colors with transparency RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser color names With the currentcolor keyword Hexadecimal Colors A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, the #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00. Example Define different HEX colors: #p1 {background-color: #ff0000;} /* red */ #p2 {background-color: #00ff00;} /* green */ #p3 {background-color: #0000ff;} /* blue */ Try it Yourself » Hexadecimal Colors With Transparency A hexadecimal color is specified with: #RRGGBB. To add transparency, add two additional digits between 00 and FF. Example Define different HEX colors with transparency: #p1a {background-color: #ff000080;} /* red transparency */ #p2a {background-color: #00ff0080;} /* green transparency */ #p3a {background-color: #0000ff80;} /* blue transparency */ Try it Yourself » RGB Colors An RGB color value is specified with the rgb() function, which has the following syntax: rgb(red, green, blue) Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%). For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0. Also, the following values define equal color: rgb(0,0,255) and rgb(0%,0%,100%). Example Define different RGB colors: #p1 {background-color: rgb(255, 0, 0);} /* red */ #p2 {background-color: rgb(0, 255, 0);} /* green */ #p3 {background-color: rgb(0, 0, 255);} /* blue */ Try it Yourself » RGBA Colors RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object. An RGBA color is specified with the rgba() function, which has the following syntax: rgba(red, green, blue, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). Example Define different RGB colors with opacity: #p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */ #p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */ #p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */ Try it Yourself » HSL Colors HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. An HSL color value is specified with the hsl() function, which has the following syntax: hsl(hue, saturation, lightness) Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white. Example Define different HSL colors: #p1 {background-color: hsl(120, 100%, 50%);} /* green */ #p2 {background-color: hsl(120, 100%, 75%);} /* light green */ #p3 {background-color: hsl(120, 100%, 25%);} /* dark green */ #p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */ Try it Yourself » HSLA Colors HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity of the object. An HSLA color value is specified with the hsla() function, which has the following syntax: hsla(hue, saturation, lightness, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). Example Define different HSL colors with opacity: #p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */ #p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */ #p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */ #p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */ Try it Yourself » Predefined/Cross-browser Color Names 140 color names are predefined in the HTML and CSS color specification. For example: blue, red, coral, brown, etc: Example Define different color names: #p1 {background-color: blue;} #p2 {background-color: red;} #p3 {background-color: coral;} #p4 {background-color: brown;} Try it Yourself » A list of all predefined names can be found in our Color Names Reference. The currentcolor Keyword The currentcolor keyword refers to the value of the color property of an element. Example The border color of the following <div> element will be blue, because the text color of the <div> element is blue: #myDIV { color: blue; /* Blue text color */ border: 10px solid currentcolor; /* Blue border color */ } Try it Yourself » ★ +1 Sign in to track progress

CSS Colors Color Names Supported by All Browsers All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors): For a full overview of CSS colors, visit our colors tutorial. AliceBlue #F0F8FF Color Mixer Color Picker AntiqueWhite #FAEBD7 Color Mixer Color Picker Aqua #00FFFF Color Mixer Color Picker Aquamarine #7FFFD4 Color Mixer Color Picker Azure #F0FFFF Color Mixer Color Picker Beige #F5F5DC Color Mixer Color Picker Bisque #FFE4C4 Color Mixer Color Picker Black #000000 Color Mixer Color Picker BlanchedAlmond #FFEBCD Color Mixer Color Picker Blue #0000FF Color Mixer Color Picker BlueViolet #8A2BE2 Color Mixer Color Picker Brown #A52A2A Color Mixer Color Picker BurlyWood #DEB887 Color Mixer Color Picker CadetBlue #5F9EA0 Color Mixer Color Picker Chartreuse #7FFF00 Color Mixer Color Picker Chocolate #D2691E Color Mixer Color Picker Coral #FF7F50 Color Mixer Color Picker CornflowerBlue #6495ED Color Mixer Color Picker Cornsilk #FFF8DC Color Mixer Color Picker Crimson #DC143C Color Mixer Color Picker Cyan #00FFFF Color Mixer Color Picker DarkBlue #00008B Color Mixer Color Picker DarkCyan #008B8B Color Mixer Color Picker DarkGoldenRod #B8860B Color Mixer Color Picker DarkGray #A9A9A9 Color Mixer Color Picker DarkGrey #A9A9A9 Color Mixer Color Picker DarkGreen #006400 Color Mixer Color Picker DarkKhaki #BDB76B Color Mixer Color Picker DarkMagenta #8B008B Color Mixer Color Picker DarkOliveGreen #556B2F Color Mixer Color Picker DarkOrange #FF8C00 Color Mixer Color Picker DarkOrchid #9932CC Color Mixer Color Picker DarkRed #8B0000 Color Mixer Color Picker DarkSalmon #E9967A Color Mixer Color Picker DarkSeaGreen #8FBC8F Color Mixer Color Picker DarkSlateBlue #483D8B Color Mixer Color Picker DarkSlateGray #2F4F4F Color Mixer Color Picker DarkSlateGrey #2F4F4F Color Mixer Color Picker DarkTurquoise #00CED1 Color Mixer Color Picker DarkViolet #9400D3 Color Mixer Color Picker DeepPink #FF1493 Color Mixer Color Picker DeepSkyBlue #00BFFF Color Mixer Color Picker DimGray #696969 Color Mixer Color Picker DimGrey #696969 Color Mixer Color Picker DodgerBlue #1E90FF Color Mixer Color Picker FireBrick #B22222 Color Mixer Color Picker FloralWhite #FFFAF0 Color Mixer Color Picker ForestGreen #228B22 Color Mixer Color Picker Fuchsia #FF00FF Color Mixer Color Picker Gainsboro #DCDCDC Color Mixer Color Picker GhostWhite #F8F8FF Color Mixer Color Picker Gold #FFD700 Color Mixer Color Picker GoldenRod #DAA520 Color Mixer Color Picker Gray #808080 Color Mixer Color Picker Grey #808080 Color Mixer Color Picker Green #008000 Color Mixer Color Picker GreenYellow #ADFF2F Color Mixer Color Picker HoneyDew #F0FFF0 Color Mixer Color Picker HotPink #FF69B4 Color Mixer Color Picker IndianRed #CD5C5C Color Mixer Color Picker Indigo #4B0082 Color Mixer Color Picker Ivory #FFFFF0 Color Mixer Color Picker Khaki #F0E68C Color Mixer Color Picker Lavender #E6E6FA Color Mixer Color Picker LavenderBlush #FFF0F5 Color Mixer Color Picker LawnGreen #7CFC00 Color Mixer Color Picker LemonChiffon #FFFACD Color Mixer Color Picker LightBlue #ADD8E6 Color Mixer Color Picker LightCoral #F08080 Color Mixer Color Picker LightCyan #E0FFFF Color Mixer Color Picker LightGoldenRodYellow #FAFAD2 Color Mixer Color Picker LightGray #D3D3D3 Color Mixer Color Picker LightGrey #D3D3D3 Color Mixer Color Picker LightGreen #90EE90 Color Mixer Color Picker LightPink #FFB6C1 Color Mixer Color Picker LightSalmon #FFA07A Color Mixer Color Picker LightSeaGreen #20B2AA Color Mixer Color Picker LightSkyBlue #87CEFA Color Mixer Color Picker LightSlateGray #778899 Color Mixer Color Picker LightSlateGrey #778899 Color Mixer Color Picker LightSteelBlue #B0C4DE Color Mixer Color Picker LightYellow #FFFFE0 Color Mixer Color Picker Lime #00FF00 Color Mixer Color Picker LimeGreen #32CD32 Color Mixer Color Picker Linen #FAF0E6 Color Mixer Color Picker Magenta #FF00FF Color Mixer Color Picker Maroon #800000 Color Mixer Color Picker MediumAquaMarine #66CDAA Color Mixer Color Picker MediumBlue #0000CD Color Mixer Color Picker MediumOrchid #BA55D3 Color Mixer Color Picker MediumPurple #9370DB Color Mixer Color Picker MediumSeaGreen #3CB371 Color Mixer Color Picker MediumSlateBlue #7B68EE Color Mixer Color Picker MediumSpringGreen #00FA9A Color Mixer Color Picker MediumTurquoise #48D1CC Color Mixer Color Picker MediumVioletRed #C71585 Color Mixer Color Picker MidnightBlue #191970 Color Mixer Color Picker MintCream #F5FFFA Color Mixer Color Picker MistyRose #FFE4E1 Color Mixer Color Picker Moccasin #FFE4B5 Color Mixer Color Picker NavajoWhite #FFDEAD Color Mixer Color Picker Navy #000080 Color Mixer Color Picker OldLace #FDF5E6 Color Mixer Color Picker Olive #808000 Color Mixer Color Picker OliveDrab #6B8E23 Color Mixer Color Picker Orange #FFA500 Color Mixer Color Picker OrangeRed #FF4500 Color Mixer Color Picker Orchid #DA70D6 Color Mixer Color Picker PaleGoldenRod #EEE8AA Color Mixer Color Picker PaleGreen #98FB98 Color Mixer Color Picker PaleTurquoise #AFEEEE Color Mixer Color Picker PaleVioletRed #DB7093 Color Mixer Color Picker PapayaWhip #FFEFD5 Color Mixer Color Picker PeachPuff #FFDAB9 Color Mixer Color Picker Peru #CD853F Color Mixer Color Picker Pink #FFC0CB Color Mixer Color Picker Plum #DDA0DD Color Mixer Color Picker PowderBlue #B0E0E6 Color Mixer Color Picker Purple #800080 Color Mixer Color Picker RebeccaPurple #663399 Color Mixer Color Picker Red #FF0000 Color Mixer Color Picker RosyBrown #BC8F8F Color Mixer Color Picker RoyalBlue #4169E1 Color Mixer Color Picker SaddleBrown #8B4513 Color Mixer Color Picker Salmon #FA8072 Color Mixer Color Picker SandyBrown #F4A460 Color Mixer Color Picker SeaGreen #2E8B57 Color Mixer Color Picker SeaShell #FFF5EE Color Mixer Color Picker Sienna #A0522D Color Mixer Color Picker Silver #C0C0C0 Color Mixer Color Picker SkyBlue #87CEEB Color Mixer Color Picker SlateBlue #6A5ACD Color Mixer Color Picker SlateGray #708090 Color Mixer Color Picker SlateGrey #708090 Color Mixer Color Picker Snow #FFFAFA Color Mixer Color Picker SpringGreen #00FF7F Color Mixer Color Picker SteelBlue #4682B4 Color Mixer Color Picker Tan #D2B48C Color Mixer Color Picker Teal #008080 Color Mixer Color Picker Thistle #D8BFD8 Color Mixer Color Picker Tomato #FF6347 Color Mixer Color Picker Turquoise #40E0D0 Color Mixer Color Picker Violet #EE82EE Color Mixer Color Picker Wheat #F5DEB3 Color Mixer Color Picker White #FFFFFF Color Mixer Color Picker WhiteSmoke #F5F5F5 Color Mixer Color Picker Yellow #FFFF00 Color Mixer Color Picker YellowGreen #9ACD32 Color Mixer Color Picker ★ +1 Sign in to track progress

PX to EM Conversion PX to EM Converter Set a default font size (usually 16px) Then, convert a pixel value to em, based on the default size Or, convert an em value to pixels, based on the default size Set a default font size: px Convert PX to EM: px Convert EM to PX: em Convert Result: Body Font Size In the table below, select a body font size in pixels (px) to display a complete "px to em and percent" conversion table. Tip: The default font size is usually 16px. What is the difference between PX, EM and Percent? Pixel is a static measurement, while percent and EM are relative measurements. Percent depends on its parent font size. EM is relative to the current font size of the element (2em means 2 times the size of the current font). So, If the font size of body is 16 pixels, then 150% will be 24 pixels (1.5 * 16), and 2em will be 32 pixels (16 * 2). Look at CSS Units for more measurement units. ★ +1 Sign in to track progress

CSS Units CSS Units CSS has several different units for expressing a length. Many CSS properties take "length" values, such as width, margin, padding, font-size, etc. Length is a number followed by a length unit, such as 10px, 2em, etc. Example Set different length values, using px (pixels): h1 { font-size: 60px; } p { font-size: 25px; line-height: 50px; } Try it Yourself » Note: A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted. For some CSS properties, negative lengths are allowed. There are two types of length units: absolute and relative. Absolute Lengths The absolute length units are fixed and a length expressed in any of these will appear as exactly that size. Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout. Unit Description cm centimeters Try it mm millimeters Try it in inches (1in = 96px = 2.54cm) Try it px * pixels (1px = 1/96th of 1in) Try it pt points (1pt = 1/72 of 1in) Try it pc picas (1pc = 12 pt) Try it * Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels. Relative Lengths Relative length units specify a length relative to another length property. Relative length units scale better between different rendering medium. Unit Description em Relative to the font-size of the element (2em means 2 times the size of the current font) Try it ex Relative to the x-height of the current font (rarely used) Try it ch Relative to the width of the "0" (zero) Try it rem Relative to font-size of the root element Try it vw Relative to 1% of the width of the viewport* Try it vh Relative to 1% of the height of the viewport* Try it vmin Relative to 1% of viewport's* smaller dimension Try it vmax Relative to 1% of viewport's* larger dimension Try it % Relative to the parent element Try it Tip: The em and rem units are practical in creating perfectly scalable layout! * Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm. Browser Support The numbers in the table specify the first browser version that fully supports the length unit. Length Unit em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5 ch 27.0 9.0 1.0 7.0 20.0 rem 4.0 9.0 3.6 4.1 11.6 vh, vw 20.0 9.0 19.0 6.0 20.0 vmin 20.0 12.0 19.0 6.0 20.0 vmax 26.0 16.0 19.0 7.0 20.0 ★ +1 Sign in to track progress

CSS Animatable Definition and Usage Some CSS properties are animatable, meaning that they can be used in animations and transitions. Animatable properties can change gradually from one value to another, like size, numbers, percentage and color. Browser Support The animation properties are supported in all modern browsers. The numbers in the table specifies the first browser version that fully support CSS animations. 43 10 16 9 30 Example Animate the background-color from red to blue: @keyframes mymove { from {background-color: red;} to {background-color: blue;} } Try it Yourself » Animatable Properties These properties are animatable in CSS: Property aspect-ratioTry it backgroundTry it background-colorTry it background-positionTry it background-position-xTry it background-position-yTry it background-sizeTry it block-sizeTry it borderTry it border-bottomTry it border-bottom-colorTry it border-end-end-radiusTry it border-end-start-radiusTry it border-blockTry it border-block-colorTry it border-block-end-colorTry it border-block-end-widthTry it border-block-start-colorTry it border-block-start-widthTry it border-block-widthTry it border-bottom-left-radiusTry it border-bottom-right-radiusTry it border-inlineTry it border-inline-colorTry it border-inline-end-colorTry it border-inline-end-widthTry it border-inline-start-colorTry it border-inline-start-widthTry it border-inline-widthTry it border-start-end-radiusTry it border-start-start-radiusTry it border-bottom-widthTry it border-colorTry it border-leftTry it border-left-colorTry it border-left-widthTry it border-rightTry it border-right-colorTry it border-right-widthTry it border-spacingTry it border-topTry it border-top-colorTry it border-top-left-radiusTry it border-top-right-radiusTry it border-top-widthTry it bottomTry it box-shadowTry it clipTry it colorTry it column-countTry it column-gapTry it column-ruleTry it column-rule-colorTry it column-rule-widthTry it column-widthTry it columnsTry it filterTry it flexTry it flex-basisTry it flex-growTry it flex-shrinkTry it fontTry it font-sizeTry it font-size-adjust font-stretch font-weightTry it gridTry it grid-areaTry it grid-auto-columnsTry it grid-auto-flowTry it grid-auto-rowsTry it grid-columnTry it grid-column-endTry it grid-column-gapTry it grid-column-startTry it grid-gapTry it grid-rowTry it grid-row-endTry it grid-row-gapTry it grid-row-startTry it grid-templateTry it grid-template-areasTry it grid-template-columnsTry it grid-template-rowsTry it heightTry it inline-sizeTry it insetTry it inset-blockTry it inset-block-endTry it inset-block-startTry it inset-inlineTry it inset-inline-endTry it inset-inline-startTry it leftTry it letter-spacingTry it line-heightTry it marginTry it margin-blockTry it margin-block-endTry it margin-block-startTry it margin-bottomTry it margin-inlineTry it margin-inline-endTry it margin-inline-startTry it margin-leftTry it margin-rightTry it margin-topTry it max-heightTry it max-widthTry it max-block-sizeTry it max-inline-sizeTry it min-block-sizeTry it min-inline-sizeTry it min-heightTry it min-widthTry it object-positionTry it offset-anchorTry it offset-distanceTry it offset-pathTry it offset-rotateTry it opacityTry it orderTry it outlineTry it outline-colorTry it outline-offsetTry it outline-widthTry it paddingTry it padding-blockTry it padding-block-endTry it padding-block-startTry it padding-bottomTry it padding-inlineTry it padding-inline-endTry it padding-inline-startTry it padding-leftTry it padding-rightTry it padding-topTry it perspectiveTry it perspective-originTry it rightTry it rotateTry it scaleTry it text-decoration-colorTry it text-indentTry it text-shadowTry it topTry it transformTry it transform-originTry it translateTry it vertical-alignTry it visibility widthTry it word-spacingTry it z-indexTry it ★ +1 Sign in to track progress

CSS Web Safe Fonts Best Web Safe Fonts for HTML and CSS The following fonts are the best web safe fonts for HTML and CSS: Arial (sans-serif) Verdana (sans-serif) Tahoma (sans-serif) Trebuchet MS (sans-serif) Times New Roman (serif) Georgia (serif) Garamond (serif) Courier New (monospace) Brush Script MT (cursive) Note: Before you publish your website, always check how your fonts appear on different browsers and devices, and always use fallback fonts! Arial (sans-serif) Arial is the most widely used font for both online and printed media. Arial is also the default font in Google Docs. Arial is one of the safest web fonts, and it is available on all major operating systems. Example Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9 Try it Yourself » Verdana (sans-serif) Verdana is a very popular font. Verdana is easily readable even for small font sizes. Example Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9 Try it Yourself » Tahoma (sans-serif) The Tahoma font has less space between the characters. Example Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9 Try it Yourself » Trebuchet MS (sans-serif) Trebuchet MS was designed by Microsoft in 1996. Use this font carefully. Not supported by all mobile operating systems. Example Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9 Try it Yourself » Times New Roman (serif) Times New Roman is one of the most recognizable fonts in the world. It looks professional and is used in many newspapers and "news" websites. It is also the primary font for Windows devices and applications. Example Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9 Try it Yourself » Georgia (serif) Georgia is an elegant serif font. It is very readable at different font sizes, so it is a good candidate for mobile-responsive design. Example Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9 Try it Yourself » Garamond (serif) Garamond is a classical font used for many printed books. It has a timeless look and good readability. Example Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9 Try it Yourself » Courier New (monospace) Courier New is the most widely used monospace serif font. Courier New is often used with coding displays, and many email providers use it as their default font. Courier New is also the standard font for movie screenplays. Example Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9 Try it Yourself » Brush Script MT (cursive) The Brush Script MT font was designed to mimic handwriting. It is elegant and sophisticated, but can be hard to read. Use it carefully. Example Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9 Try it Yourself » Tip: Also check out all available Google Fonts and how to use them. ★ +1 Sign in to track progress

CSS Aural Reference Aural Style Sheets Aural style sheets use a combination of speech synthesis and sound effects to make the user listen to information, instead of reading information. Aural presentation can be used: by blind people to help users learning to read to help users who have reading problems for home entertainment in the car by print-impaired communities The aural presentation converts the document to plain text and feed this to a screen reader (a program that reads all the characters on the screen). An example of an Aural style sheet: @media aural { h1, h2, h3, h4 { voice-family: male; richness: 80; cue-before: url("beep.au") } } The example above will make the speech synthesizer play a sound, then speak the headers in a very rich male voice. Note: The aural CSS media type is deprecated. CSS Aural Reference Property Description Values azimuth Sets where the sound should come from angle left-side far-left left center-left center center-right right far-right right-side behind leftwards rightwards cue Sets the cue properties in one declaration cue-before cue-after cue-after Specifies a sound to be played after speaking an element's content none url cue-before Specifies a sound to be played before speaking an element's content none url elevation Sets where the sound should come from angle below level above higher lower pause Sets the pause properties in one declaration pause-before pause-after pause-after Specifies a pause after speaking an element's content time % pause-before Specifies a pause before speaking an element's content time % pitch Specifies the speaking voice frequency x-low low medium high x-high pitch-range Specifies the variation in the speaking voice. (Monotone voice or animated voice?) number play-during Specifies a sound to be played while speaking an element's content auto none url mix repeat richness Specifies the richness of the speaking voice. (Rich voice or thin voice?) number speak Specifies whether content will render aurally normal none spell-out speak-header Specifies how to handle table headers. Should the headers be spoken before every cell, or only before a cell with a different header than the previous cell always once speak-numeral Specifies how to speak numbers digits continuous speak-punctuation Specifies how to speak punctuation characters none code speech-rate Specifies the speed of the speaking number x-slow slow medium fast x-fast faster slower stress Specifies the "stress" in the speaking voice number voice-family Specifies the voice family of the speaking specific-voice generic-voice volume Specifies the volume of the speaking number % silent x-soft soft medium loud x-loud ★ +1 Sign in to track progress

CSS Functions Reference CSS Functions CSS functions can be used to calculate values, manipulate strings or colors, create complex gradients and shapes, and more. CSS functions are typically used as values for various CSS properties. Function Description acos() Returns the inverse cosine of a number between -1 and 1 asin() Returns the inverse sine of a number between -1 and 1 atan() Returns the inverse tangent of a number between -∞ and ∞ atan2() Returns the inverse tangent of two values between -infinity and infinity attr() Returns the value of an attribute of the selected element blur() Applies a blur effect to an element brightness() Adjusts the brightness of an element (brighter or darker) calc() Allows you to perform calculations to determine CSS property values circle() Defines a circle clamp() Sets a value that will adjust responsively between a minimum value and a maximum value depending on the size of the viewport color() Allows a color to be specified in a particular, specified color space color-mix() Mixes two color values in a given color space, by a given amount conic-gradient() Creates a conic gradient contrast() Adjusts the contrast of an element cos() Returns the cosine of an angle counter() Returns the current value of the named counter counters() Returns the current values of the named and nested counters cubic-bezier() Defines a Cubic Bezier curve drop-shadow() Applies a drop shadow effect to an image ellipse() Defines an ellipse exp() Returns E raised to the power of the specified number x (Ex) fit-content() Allows you to size an element based on its content grayscale() Converts an image to grayscale hsl() / hsla() Defines a color using the Hue-Saturation-Lightness model (HSL); with an optional alpha component hue-rotate() Applies a color rotation to an element hwb() Defines a color using the Hue-Whiteness-Blackness model (HWB); with an optional alpha component hypot() Returns the square root of the sum of squares of its parameters inset() Defines a rectangle at the specified inset distances from each side of the reference box invert() Inverts the color of an image lab() Specifies a color in the CIE L*a*b color space lch() Specifies a color in the LCH (Lightness-Chroma-Hue) color space light-dark() Enables two color-value settings, and returns the first value if the user has set a light color theme, and the second value if the user has set a dark color theme linear-gradient() Creates a linear gradient log() Returns the natural logarithm (base E) of a specified number, or the logarithm of the number to the specified base matrix() Defines a 2D transformation, using a matrix of six values matrix3d() Defines a 3D transformation, using a 4x4 matrix of 16 values max() Uses the largest value, from a comma-separated list of values, as the property value min() Uses the smallest value, from a comma-separated list of values, as the property value minmax() Defines a size range greater than or equal to a min value and less than or equal to a max value (used with CSS grids) mod() Returns the remainder left over when a number is divided by another number oklab() Specifies a color in the OKLAB color space oklch() Specifies a color in the OKLCH color space opacity() Applies an opacity effect to an element perspective() Defines a perspective view for a 3D transformed element polygon() Defines a polygon pow() Returns the value of a number (x) raised to the power of another number (y) radial-gradient() Creates a radial gradient ray() Defines the offset-path line segment that an animated element should follow rem() Returns the remainder left over when a number is divided by another number repeat() Repeats a set of columns or rows in a grid repeating-conic-gradient() Repeats a conic gradient repeating-linear-gradient() Repeats a linear gradient repeating-radial-gradient() Repeats a radial gradient rgb() / rgba() Defines colors using the Red-Green-Blue model (RGB); with an optional alpha component rotate() Defines a 2D rotation of an element rotate3d() Defines a 3D rotation of an element rotateX() Defines a 3D rotation of an element around the x-axis (horizontal) rotateY() Defines a 3D rotation of an element around the y-axis (vertical) rotateZ() Defines a 3D rotation of an element around the z-axis round() Rounds a number according to the specified rounding-strategy saturate() Adjusts the saturation (color intensity) of an element scale() Defines a 2D scaling of an element scale3d() Defines a 3D scaling of an element scaleX() Scales an element horizontally (the width) scaleY() Scales an element vertically (the height) sepia() Converts an image to sepia sin() Returns the sine of a number (angle) skew() Skews an element along the x- and y-axis skewX() Skews an element along the x-axis skewY() Skews an element along the y-axis sqrt() Returns the square root of a number steps() Creates a stepped timing function for animations tan() Returns the tangent of a number translate() Allows you to re-position an element along the x- and y-axis translateX() Allows you to re-position an element along the x-axis translateY() Allows you to re-position an element along the y-axis url() Allows you to include a file in the stylesheet var() Inserts the value of a custom property ★ +1 Sign in to track progress

CSS At-rules Reference CSS At-rules CSS at-rules are statements that instruct CSS on how to behave. Each at-rule begins with an @ followed by a name. The table below shows the different at-rules in CSS: At-rule Description @charset Specifies the character encoding used in the style sheet @container Define styles for elements in container, depending on the container's size or style @counter-style Lets you define your own counter styles @font-face Specifies a custom font with which to display text @font-palette-values Allows you to customize the default values of a font-palette @import Allows you to import a style sheet into another style sheet @keyframes Controls the steps in an animation by defining styles for points along the animation sequence @layer Used to control how the CSS cascade layers evaluates the order of styles @media Applies parts of a style sheet based on the result of one or more media queries @namespace Defines an XML namespace to be used in the style sheet @page Customizes the dimension, orientation, and margins of printed pages @property Allows you to define custom CSS properties directly in the stylesheet without having to run any JavaScript. This at-rule has data type checking and constraining, sets default values, and defines whether the property can inherit values or not @scope Allows you to select elements in specific DOM subtrees and target elements precisely without writing overly-specific selectors @starting-style Defines an element's starting styles before the element gets its first style update @supports Used to test whether a browser supports a CSS feature ★ +1 Sign in to track progress