کاربر:Zaman/صفحه تمرینcss1

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


///////////////////////////////////////


CSS Reference

❮ HomeNext ❯


CSS Properties

A

align-content Specifies the alignment between the lines inside a flexible container when the items do not use all available space
align-items Specifies the alignment for items inside a flexible container
align-self Specifies the alignment for selected items inside a flexible container
all Resets all properties (except unicode-bidi and direction)
animation A shorthand property for all the animation-* properties
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration Specifies how long an animation should take to complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies a name for the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of an animation

B

backface-visibility Defines whether or not the back face of an element should be visible when facing the user
background A shorthand property for all the background-* properties
background-attachment Sets whether a background image scrolls with the rest of the page, or is fixed
background-blend-mode Specifies the blending mode of each background layer (color/image)
background-clip Defines how far the background (color or image) should extend within an element
background-color Specifies the background color of an element
background-image Specifies one or more background images for an element
background-origin Specifies the origin position of a background image
background-position Specifies the position of a background image
background-repeat Sets if/how a background image will be repeated
background-size Specifies the size of the background images
border A shorthand property for border-width, border-style and border-color
border-bottom A shorthand property for border-bottom-width, border-bottom-style and border-bottom-color
border-bottom-color Sets the color of the bottom border
border-bottom-left-radius Defines the radius of the border of the bottom-left corner
border-bottom-right-radius Defines the radius of the border of the bottom-right corner
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-collapse Sets whether table borders should collapse into a single border or be separated
border-color Sets the color of the four borders
border-image A shorthand property for all the border-image-* properties
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the border image should be repeated, rounded or stretched
border-image-slice Specifies how to slice the border image
border-image-source Specifies the path to the image to be used as a border
border-image-width Specifies the width of the border image
border-left A shorthand property for all the border-left-* properties
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius A shorthand property for the four border-*-radius properties
border-right A shorthand property for all the border-right-* properties
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-spacing Sets the distance between the borders of adjacent cells
border-style Sets the style of the four borders
border-top A shorthand property for border-top-width, border-top-style and border-top-color
border-top-color Sets the color of the top border
border-top-left-radius Defines the radius of the border of the top-left corner
border-top-right-radius Defines the radius of the border of the top-right corner
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders
bottom Sets the elements position, from the bottom of its parent element
box-decoration-break Sets the behavior of the background and border of an element at page-break, or, for in-line elements, at line-break.
box-shadow Attaches one or more shadows to an element
box-sizing Defines how the width and height of an element are calculated: should they include padding and borders, or not
break-after Specifies whether or not a page-, column-, or region-break should occur after the specified element
break-before Specifies whether or not a page-, column-, or region-break should occur before the specified element
break-inside Specifies whether or not a page-, column-, or region-break should occur inside the specified element

C

caption-side Specifies the placement of a table caption
caret-color Specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable
@charset Specifies the character encoding used in the style sheet
clear Specifies on which sides of an element floating elements are not allowed to float
clip Clips an absolutely positioned element
color Sets the color of text
column-count Specifies the number of columns an element should be divided into
column-fill Specifies how to fill columns, balanced or not
column-gap Specifies the gap between the columns
column-rule A shorthand property for all the column-rule-* properties
column-rule-color Specifies the color of the rule between columns
column-rule-style Specifies the style of the rule between columns
column-rule-width Specifies the width of the rule between columns
column-span Specifies how many columns an element should span across
column-width Specifies the column width
columns A shorthand property for column-width and column-count
content Used with the :before and :after pseudo-elements, to insert generated content
counter-increment Increases or decreases the value of one or more CSS counters
counter-reset Creates or resets one or more CSS counters
cursor Specifies the mouse cursor to be displayed when pointing over an element

D

direction Specifies the text direction/writing direction
display Specifies how a certain HTML element should be displayed

E

empty-cells Specifies whether or not to display borders and background on empty cells in a table

F

filter Defines effects (e.g. blurring or color shifting) on an element before the element is displayed
flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
flex-basis Specifies the initial length of a flexible item
flex-direction Specifies the direction of the flexible items
flex-flow A shorthand property for the flex-direction and the flex-wrap properties
flex-grow Specifies how much the item will grow relative to the rest
flex-shrink Specifies how the item will shrink relative to the rest
flex-wrap Specifies whether the flexible items should wrap or not
float Specifies whether or not a box should float
font A shorthand property for the font-style, font-variant, font-weight, font-size/line-height, and the font-family properties
@font-face A rule that allows websites to download and use fonts other than the "web-safe" fonts
font-family Specifies the font family for text
font-feature-settings Allows control over advanced typographic features in OpenType fonts
@font-feature-values Allows authors to use a common name in font-variant-alternate for feature activated differently in OpenType
font-kerning Controls the usage of the kerning information (how letters are spaced)
font-language-override Controls the usage of language-specific glyphs in a typeface
font-size Specifies the font size of text
font-size-adjust Preserves the readability of text when font fallback occurs
font-stretch Selects a normal, condensed, or expanded face from a font family
font-style Specifies the font style for text
font-synthesis Controls which missing typefaces (bold or italic) may be synthesized by the browser
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-variant-alternates Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values
font-variant-caps Controls the usage of alternate glyphs for capital letters
font-variant-east-asian Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese)
font-variant-ligatures Controls which ligatures and contextual forms are used in textual content of the elements it applies to
font-variant-numeric Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers
font-variant-position Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font
font-weight Specifies the weight of a font

G

grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-area Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
grid-auto-columns Specifies a default column size
grid-auto-flow Specifies how auto-placed items are inserted in the grid
grid-auto-rows Specifies a default row size
grid-column A shorthand property for the grid-column-start and the grid-column-end properties
grid-column-end Specifies where to end the grid item
grid-column-gap Specifies the size of the gap between columns
grid-column-start Specifies where to start the grid item
grid-gap A shorthand property for the grid-row-gap and grid-column-gap properties
grid-row A shorthand property for the grid-row-start and the grid-row-end properties
grid-row-end Specifies where to end the grid item
grid-row-gap Specifies the size of the gap between rows
grid-row-start Specifies where to start the grid item
grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areas Specifies how to display columns and rows, using named grid items
grid-template-columns Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows Specifies the size of the rows in a grid layout

H

hanging-punctuation Specifies whether a punctuation character may be placed outside the line box
height Sets the height of an element
hyphens Sets how to split words to improve the layout of paragraphs

I

image-rendering Gives a hint to the browser about what aspects of an image are most important to preserve when the image is scaled
@import Allows you to import a style sheet into another style sheet
isolation Defines whether an element must create a new stacking content

J

justify-content Specifies the alignment between the items inside a flexible container when the items do not use all available space

K

@keyframes Specifies the animation code

L

left Specifies the left position of a positioned element
letter-spacing Increases or decreases the space between characters in a text
line-break Specifies how/if to break lines
line-height Sets the line height
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies the position of the list-item markers (bullet points)
list-style-type Specifies the type of list-item marker

M

margin Sets all the margin properties in one declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
@media Sets the style rules for different media types/devices/sizes
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
mix-blend-mode Specifies how an element's content should blend with its direct parent background

O

object-fit Specifies how the contents of a replaced element should be fitted to the box established by its used height and width
object-position Specifies the alignment of the replaced element inside its box
opacity Sets the opacity level for an element
order Sets the order of the flexible item, relative to the rest
orphans Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element
outline A shorthand property for the outline-width, outline-style, and the outline-color properties
outline-color Sets the color of an outline
outline-offset Offsets an outline, and draws it beyond the border edge
outline-style Sets the style of an outline
outline-width Sets the width of an outline
overflow Specifies what happens if content overflows an element's box
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)
overflow-x Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area
overflow-y Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area

P

padding A shorthand property for all the padding-* properties
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element
page-break-after Sets the page-break behavior after an element
page-break-before Sets the page-break behavior before an element
page-break-inside Sets the page-break behavior inside an element
perspective Gives a 3D-positioned element some perspective
perspective-origin Defines at which position the user is looking at the 3D-positioned element
pointer-events Defines whether or not an element reacts to pointer events
position Specifies the type of positioning method used for an element (static, relative, absolute or fixed)

Q

quotes Sets the type of quotation marks for embedded quotations

R

resize Defines if (and how) an element is resizable by the user
right Specifies the right position of a positioned element

S

scroll-behavior Specifies whether to smoothly animate the scroll position in a scrollable box, instead of a straight jump

T

tab-size Specifies the width of a tab character
table-layout Defines the algorithm used to lay out table cells, rows, and columns
text-align Specifies the horizontal alignment of text
text-align-last Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"
text-combine-upright Specifies the combination of multiple characters into the space of a single character
text-decoration Specifies the decoration added to text
text-decoration-color Specifies the color of the text-decoration
text-decoration-line Specifies the type of line in a text-decoration
text-decoration-style Specifies the style of the line in a text decoration
text-indent Specifies the indentation of the first line in a text-block
text-justify Specifies the justification method used when text-align is "justify"
text-orientation Defines the orientation of the text in a line
text-overflow Specifies what should happen when text overflows the containing element
text-shadow Adds shadow to text
text-transform Controls the capitalization of text
text-underline-position Specifies the position of the underline which is set using the text-decoration property
top Specifies the top position of a positioned element
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements
transform-style Specifies how nested elements are rendered in 3D space
transition A shorthand property for all the transition-* properties
transition-delay Specifies when the transition effect will start
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property Specifies the name of the CSS property the transition effect is for
transition-timing-function Specifies the speed curve of the transition effect

U

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
user-select Specifies whether the text of an element can be selected

V

vertical-align Sets the vertical alignment of an element
visibility Specifies whether or not an element is visible

W

white-space Specifies how white-space inside an element is handled
widows Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element
width Sets the width of an element
word-break Specifies how words should break when reaching the end of a line
word-spacing Increases or decreases the space between words in a text
word-wrap Allows long, unbreakable words to be broken and wrap to the next line
writing-mode Specifies whether lines of text are laid out horizontally or vertically

Z

z-index Sets the stack order of a positioned element


❮ HomeNext ❯

///////////////////////////////////////


CSS Browser Support Reference

❮ PreviousNext ❯


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
align-content 11 28 21 9 12.1
align-items 11 20 21 9 12.1
align-self 11 20 21 9 12.1
all 27 37 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
B
backface-visibility 10 16 36 4 23
background 4 1 1 1 3.5
background-attachment 4 1 1 1 3.5
background-blend-mode 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-repeat 4 1 1 1 3.5
background-size 9 4 4 4.1 10
border 4 1 1 1 3.5
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-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-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-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 32 22 6.1 11.5
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 53 57 44
@charset 1.5 2 4 9
clear 5 1 1 1 6
clip 8 1 1 1 7
clip-path 12 54 55 9.1 42
color 3 1 1 1 3.5
column-count 10 52 50 9 37
column-fill 10 52 50 10 37
column-gap 10 52 50 9 37
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 50 9 37
column-width 10 52 50 9 37
columns 10 52 50 9 37
content 8 1 1 1 4
counter-increment 8 2 4 3.1 9.6
counter-reset 8 2 4 3.1 9.6
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.6 4 3 10
font-family 4 1 1 1 3.5
font-feature-settings 10 34 48 9.1 35
@font-feature-values 34
font-kerning 10 34 32 7
font-language-override 34
font-size 5.5 1 1 1 7
font-size-adjust 3
font-stretch 9 9 48 11 35
font-style 4 1 1 1 7
font-synthesis 34 10
font-variant 4 1 1 1 3.5
font-variant-alternates 34 9.1
font-variant-caps 34 52 39
font-variant-east-asian 34
font-variant-ligatures 10 34 34 7 19
font-variant-numeric 34 52 39
font-variant-position 34
font-weight 4 1 2 1.3 3.5
G
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-gap 10 52 57 10 44
grid-column-start 10 52 57 10 44
grid-gap 10 52 57 10 44
grid-row 10 52 57 10 44
grid-row-end 10 52 57 10 44
grid-row-gap 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 10 43 55 5.1 44
I
image-rendering 3.6 41 10 28
@import 5.5
isolation 36 41 7.1 30
J
justify-content 11 28 29 9 17
K
@keyframes 10 16 43 9 30
L
left 5.5 1 1 1 5
letter-spacing 4 1 1 1 3.5
line-break 5.5 1
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-bottom 6 1 1 1 3.5
margin-left 6 1 1 1 3.5
margin-right 6 1 1 1 3.5
margin-top 6 1 1 1 3.5
mask 53 4 4 15
mask-type 53 4 4 15
max-height 7 1 1 2 7
max-width 7 1 1 2 7
@media 9 3.5 21 4 9
min-height 7 1 1 2 4
min-width 7 1 1 2 4
mix-blend-mode 32 41 8 35
N
@namespace 9 1 1 1 8
O
object-fit 16 36 31 7.1 19
object-position 16 36 31 7.1 19
opacity 9 2 4 3.1 9
order 11 28 29 9 17
orphans 10 25 7 12.1
outline 8 1.5 1 1.2 7
outline-color 8 1.5 1 1.2 7
outline-offset 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-wrap 18 49 23 6.1 12.1
overflow-x 9 3.5 4 3 9.5
overflow-y 9 4 3 9.5
P
padding 4 1 1 1 3.5
padding-bottom 4 1 1 1 3.5
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 8 19 15 15
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
perspective 10 16 36 9 23
perspective-origin 10 16 36 9 23
place-content 60 59 11.1 51
pointer-events 11 3.6 2 4 9
position 7 1 1 1.2 4
Q
quotes 8 1.5 11 5.1 4
R
resize 5 4 4 15
right 5.5 1 1 1 5
S
scroll-behavior 36 61 48
shape-image-threshold 62 37 10.1 24
shape-margin 62 37 10.1 24
@supports 22 28 9 12.1
T
tab-size 4 21 6.1 15
table-layout 5 1 14 1 7
text-align 3 1 1 1 3.5
text-align-last 5.5 49 47 34
text-combine-upright 11 48 48 34
text-decoration 3 1 1 1 3.5
text-decoration-color 36 57 7.1 44
text-decoration-line 36 57 7.1 44
text-decoration-style 36 57 44
text-emphasis 46 25 7.1 15
text-emphasis-color 46 25 7.1 15
text-emphasis-position 46 25 7.1 15
text-emphasis-style 46 25 7.1 15
text-indent 3 1 1 1 3.5
text-justify 5.5 55
text-orientation 41 48 10.1 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-position 33
top 5 1 1 1 6
touch-action 11 52 36 23
transform 10 16 36 9 23
transform-origin 10 16 36 9 23
transform-style 11 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
U
unicode-bidi 5.5 1 2 1.3 9.2
user-select 10 69 54 3.1 41
V
vertical-align 4 1 1 1 4
@viewport 10 29 16
visibility 4 1 1 1 4
W
white-space 8 3.5 1 3 9.5
widows 10 25 7 12.1
width 4 1 1 1 3.5
will-change 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

Icon Explanations

Supported by Edge/Internet Explorer
Supported by Firefox
Supported by Google Chrome
Supported by Safari
Supported by Opera


Supported by Edge/Internet Explorer with prefix -ms-
Supported by Firefox with prefix -moz-
Supported by Google Chrome with prefix -webkit-
Supported by Safari with prefix -webkit-
Supported by Opera with prefix -webkit-


❮ PreviousNext ❯

///////////////////////////////////////


CSS Selector Reference

❮ PreviousNext ❯


CSS Selectors

In CSS, selectors are patterns used to select the element(s) you want to style.

Use our CSS Selector Tester to demonstrate the different selectors.

Selector Example Example description
.class .intro Selects all elements with class="intro"
.class1.class2 .name1.name2 Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2 .name1 .name2 Selects all elements with name2 that is a descendant of an element with name1
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element.class p.intro Selects all <p> elements with class="intro"
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects all <p> elements that are placed immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target=_blank] Selects all elements with target="_blank"
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower"
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en"
[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring "w3schools"
:active a:active Selects the active link
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
:checked input:checked Selects every checked <input> element
:default input:default Selects the default <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children (including text nodes)
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> element that is the first child of its parent
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the input element which has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects input elements with a value within a specified range
:indeterminate input:indeterminate Selects input elements that are in an indeterminate state
:invalid input:invalid Selects all input elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to "it" (Italian)
:last-child p:last-child Selects every <p> element that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects input elements with no "required" attribute
:out-of-range input:out-of-range Selects input elements with a value outside a specified range
::placeholder input::placeholder Selects input elements with the "placeholder" attribute specified
:read-only input:read-only Selects input elements with the "readonly" attribute specified
:read-write input:read-write Selects input elements with the "readonly" attribute NOT specified
:required input:required Selects input elements with the "required" attribute specified
:root :root Selects the document's root element
::selection ::selection Selects the portion of an element that is selected by a user
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all input elements with a valid value
:visited a:visited Selects all visited links


❮ PreviousNext ❯

///////////////////////////////////////


CSS Functions Reference

❮ PreviousNext ❯


CSS Functions

CSS functions are used as a value for various CSS properties.

Function Description
attr() Returns the value of an attribute of the selected element
calc() Allows you to perform calculations to determine CSS property values
cubic-bezier() Defines a Cubic Bezier curve
hsl() Defines colors using the Hue-Saturation-Lightness model (HSL)
hsla() Defines colors using the Hue-Saturation-Lightness-Alpha model (HSLA)
linear-gradient() Sets a linear gradient as the background image. Define at least two colors (top to bottom)
radial-gradient() Sets a radial gradient as the background image. Define at least two colors (center to edges)
repeating-linear-gradient() Repeats a linear gradient
repeating-radial-gradient() Repeats a radial gradient
rgb() Defines colors using the Red-Green-Blue model (RGB)
rgba() Defines colors using the Red-Green-Blue-Alpha model (RGBA)
var() Inserts the value of a custom property


❮ PreviousNext ❯

///////////////////////////////////////


CSS Aural Reference

❮ PreviousNext ❯


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:

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.



CSS Aural Reference

The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Property Description Values CSS
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

2
cue Sets the cue properties in one declaration cue-before

cue-after

2
cue-after Specifies a sound to be played after speaking an element's content none

url

2
cue-before Specifies a sound to be played before speaking an element's content none

url

2
elevation Sets where the sound should come from angle

below

level

above

higher

lower

2
pause Sets the pause properties in one declaration pause-before

pause-after

2
pause-after Specifies a pause after speaking an element's content time

%

2
pause-before Specifies a pause before speaking an element's content time

%

2
pitch Specifies the speaking voice frequency

x-low

low

medium

high

x-high

2
pitch-range Specifies the variation in the speaking voice. (Monotone voice or animated voice?) number 2
play-during Specifies a sound to be played while speaking an element's content auto

none

url

mix

repeat

2
richness Specifies the richness of the speaking voice. (Rich voice or thin voice?) number 2
speak Specifies whether content will render aurally normal

none

spell-out

2
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

2
speak-numeral Specifies how to speak numbers digits

continuous

2
speak-punctuation Specifies how to speak punctuation characters none

code

2
speech-rate Specifies the speed of the speaking number

x-slow

slow

medium

fast

x-fast

faster

slower

2
stress Specifies the "stress" in the speaking voice number 2
voice-family Specifies the voice family of the speaking specific-voice

generic-voice

2
volume Specifies the volume of the speaking number

%

silent

x-soft

soft

medium

loud

x-loud

2


❮ PreviousNext ❯

///////////////////////////////////////


CSS Web Safe Font Combinations

❮ PreviousNext ❯


Commonly Used Font Combinations

The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available:

Example

p {

  font-family: "Times New Roman", Times, serif;

}

Try it Yourself »

Below are some commonly used font combinations, organized by generic family.


Serif Fonts

font-family Example text
Georgia, serif

This is a heading

This is a paragraph

"Palatino Linotype", "Book Antiqua", Palatino, serif

This is a heading

This is a paragraph

"Times New Roman", Times, serif

This is a heading

This is a paragraph



Sans-Serif Fonts

font-family Example text
Arial, Helvetica, sans-serif

This is a heading

This is a paragraph

"Arial Black", Gadget, sans-serif

This is a heading

This is a paragraph

"Comic Sans MS", cursive, sans-serif

This is a heading

This is a paragraph

Impact, Charcoal, sans-serif

This is a heading

This is a paragraph

"Lucida Sans Unicode", "Lucida Grande", sans-serif

This is a heading

This is a paragraph

Tahoma, Geneva, sans-serif

This is a heading

This is a paragraph

"Trebuchet MS", Helvetica, sans-serif

This is a heading

This is a paragraph

Verdana, Geneva, sans-serif

This is a heading

This is a paragraph

Monospace Fonts

font-family Example text
"Courier New", Courier, monospace

This is a heading

This is a paragraph

"Lucida Console", Monaco, monospace

This is a heading

This is a paragraph

Tip: Also check out all available Google Fonts and how to use them.


❮ PreviousNext ❯

///////////////////////////////////////


CSS Animatable

❮ PreviousNext ❯


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 numbers in the table specifies the first browser version that fully support CSS animations.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

43.0

4.0 -webkit-

10.0 16.0

5.0 -moz-

9.0

4.0 -webkit-

30.0

15.0 -webkit-

12.0 -o-


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
backgroundTry it
background-colorTry it
background-positionTry it
background-sizeTry it
borderTry it
border-bottomTry it
border-bottom-colorTry it
border-bottom-left-radiusTry it
border-bottom-right-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
leftTry it
letter-spacingTry it
line-heightTry it
marginTry it
margin-bottomTry it
margin-leftTry it
margin-rightTry it
margin-topTry it
max-heightTry it
max-widthTry it
min-heightTry it
min-widthTry it
object-positionTry it
opacityTry it
orderTry it
outlineTry it
outline-colorTry it
outline-offsetTry it
outline-widthTry it
paddingTry it
padding-bottomTry it
padding-leftTry it
padding-rightTry it
padding-topTry it
perspectiveTry it
perspective-originTry it
rightTry it
text-decoration-colorTry it
text-indentTry it
text-shadowTry it
topTry it
transformTry it
transform-originTry it
vertical-alignTry it
visibility
widthTry it
word-spacingTry it
z-indexTry it


❮ PreviousNext ❯

///////////////////////////////////////


CSS Units

❮ PreviousNext ❯


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.

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 centimetersTry it
mm millimetersTry 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 mediums.

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 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

❮ PreviousNext ❯

///////////////////////////////////////


PX to EM Conversion

❮ PreviousNext ❯


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.

px em percent
5px 0.3125em 31.25%
6px 0.3750em 37.50%
7px 0.4375em 43.75%
8px 0.5000em 50.00%
9px 0.5625em 56.25%
10px 0.6250em 62.50%
11px 0.6875em 68.75%
12px 0.7500em 75.00%
13px 0.8125em 81.25%
14px 0.8750em 87.50%
15px 0.9375em 93.75%
16px 1.0000em 100.00%
17px 1.0625em 106.25%
18px 1.1250em 112.50%
19px 1.1875em 118.75%
20px 1.2500em 125.00%
21px 1.3125em 131.25%
22px 1.3750em 137.50%
23px 1.4375em 143.75%
24px 1.5000em 150.00%
25px 1.5625em 156.25%

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.


❮ PreviousNext ❯

///////////////////////////////////////


CSS Colors

❮ PreviousNext ❯


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

AntiqueWhite

#FAEBD7

Aqua

#00FFFF

Aquamarine

#7FFFD4

Azure

#F0FFFF

Beige

#F5F5DC

Bisque

#FFE4C4

Black

#000000

BlanchedAlmond

#FFEBCD

Blue

#0000FF

BlueViolet

#8A2BE2

Brown

#A52A2A

BurlyWood

#DEB887

CadetBlue

#5F9EA0

Chartreuse

#7FFF00

Chocolate

#D2691E

Coral

#FF7F50

CornflowerBlue

#6495ED

Cornsilk

#FFF8DC

Crimson

#DC143C

Cyan

#00FFFF

DarkBlue

#00008B

DarkCyan

#008B8B

DarkGoldenRod

#B8860B

DarkGray

#A9A9A9

DarkGrey

#A9A9A9

DarkGreen

#006400

DarkKhaki

#BDB76B

DarkMagenta

#8B008B

DarkOliveGreen

#556B2F

DarkOrange

#FF8C00

DarkOrchid

#9932CC

DarkRed

#8B0000

DarkSalmon

#E9967A

DarkSeaGreen

#8FBC8F

DarkSlateBlue

#483D8B

DarkSlateGray

#2F4F4F

DarkSlateGrey

#2F4F4F

DarkTurquoise

#00CED1

DarkViolet

#9400D3

DeepPink

#FF1493

DeepSkyBlue

#00BFFF

DimGray

#696969

DimGrey

#696969

DodgerBlue

#1E90FF

FireBrick

#B22222

FloralWhite

#FFFAF0

ForestGreen

#228B22

Fuchsia

#FF00FF

Gainsboro

#DCDCDC

GhostWhite

#F8F8FF

Gold

#FFD700

GoldenRod

#DAA520

Gray

#808080

Grey

#808080

Green

#008000

GreenYellow

#ADFF2F

HoneyDew

#F0FFF0

HotPink

#FF69B4

IndianRed

#CD5C5C

Indigo

#4B0082

Ivory

#FFFFF0

Khaki

#F0E68C

Lavender

#E6E6FA

LavenderBlush

#FFF0F5

LawnGreen

#7CFC00

LemonChiffon

#FFFACD

LightBlue

#ADD8E6

LightCoral

#F08080

LightCyan

#E0FFFF

LightGoldenRodYellow

#FAFAD2

LightGray

#D3D3D3

LightGrey

#D3D3D3

LightGreen

#90EE90

LightPink

#FFB6C1

LightSalmon

#FFA07A

LightSeaGreen

#20B2AA

LightSkyBlue

#87CEFA

LightSlateGray

#778899

LightSlateGrey

#778899

LightSteelBlue

#B0C4DE

LightYellow

#FFFFE0

Lime

#00FF00

LimeGreen

#32CD32

Linen

#FAF0E6

Magenta

#FF00FF

Maroon

#800000

MediumAquaMarine

#66CDAA

MediumBlue

#0000CD

MediumOrchid

#BA55D3

MediumPurple

#9370DB

MediumSeaGreen

#3CB371

MediumSlateBlue

#7B68EE

MediumSpringGreen

#00FA9A

MediumTurquoise

#48D1CC

MediumVioletRed

#C71585

MidnightBlue

#191970

MintCream

#F5FFFA

MistyRose

#FFE4E1

Moccasin

#FFE4B5

NavajoWhite

#FFDEAD

Navy

#000080

OldLace

#FDF5E6

Olive

#808000

OliveDrab

#6B8E23

Orange

#FFA500

OrangeRed

#FF4500

Orchid

#DA70D6

PaleGoldenRod

#EEE8AA

PaleGreen

#98FB98

PaleTurquoise

#AFEEEE

PaleVioletRed

#DB7093

PapayaWhip

#FFEFD5

PeachPuff

#FFDAB9

Peru

#CD853F

Pink

#FFC0CB

Plum

#DDA0DD

PowderBlue

#B0E0E6

Purple

#800080

RebeccaPurple

#663399

Red

#FF0000

RosyBrown

#BC8F8F

RoyalBlue

#4169E1

SaddleBrown

#8B4513

Salmon

#FA8072

SandyBrown

#F4A460

SeaGreen

#2E8B57

SeaShell

#FFF5EE

Sienna

#A0522D

Silver

#C0C0C0

SkyBlue

#87CEEB

SlateBlue

#6A5ACD

SlateGray

#708090

SlateGrey

#708090

Snow

#FFFAFA

SpringGreen

#00FF7F

SteelBlue

#4682B4

Tan

#D2B48C

Teal

#008080

Thistle

#D8BFD8

Tomato

#FF6347

Turquoise

#40E0D0

Violet

#EE82EE

Wheat

#F5DEB3

White

#FFFFFF

WhiteSmoke

#F5F5F5

Yellow

#FFFF00

YellowGreen

#9ACD32


❮ PreviousNext ❯

///////////////////////////////////////


CSS Legal Color Values

❮ PreviousNext ❯


CSS Colors

Colors in CSS can be specified by the following methods:

  • Hexadecimal colors
  • 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 »


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 »


❮ PreviousNext ❯

///////////////////////////////////////


CSS Default Values Reference

❮ PreviousNext ❯


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 None.
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.


❮ PreviousNext ❯

///////////////////////////////////////