CSS color Property |Online Tutorial

\n\n

Online Tutorial -- Learn not only technology, but also dreams!

\n\n

\n
• Home
\n
• HTML
\n
• JavaScript
\n
• CSS
\n
• Vue
\n
• React
\n
• Python3
\n
• Java
\n
• C
\n
• C++
\n
• C#
\n
• AI
\n
• Go
\n
• SQL
\n
• Linux
\n
• VS Code
\n
• Bootstrap
\n
• Git
\n
• Local Bookmarks
\n

\n\n

\n
• Home
\n
• HTML
\n
• CSS
\n
• JS
\n
• Local Bookmarks
\n
• Search
\n

\n\n

\n
• Vue3 Tutorial
\n
• Vue2 Tutorial
\n

\n\n

\n
• Bootstrap3
\n
• Bootstrap4
\n
• Bootstrap5
\n

\n\n

\n
• Machine Learning
\n
• PyTorch
\n
• TensorFlow
\n
• Sklearn
\n
• NLP
\n
• AI Agent
\n
• Ollama
\n
• Coding Plan
\n

\n\n

CSS Reference Manual

\n\n

CSS Reference ManualCSS SelectorsCSS Aural Reference ManualCSS Web Safe FontsCSS AnimationCSS FunctionsCSS UnitsCSS ColorsCSS Legal Color ValuesCSS Color NamesCSS Color Hexadecimal ValuesCSS Browser SupportSass Tutorial

\n\n

CSS Properties

\n\n

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionappearancebackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sideclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightheightleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-widthmin-heightmin-widthopacityoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidivertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapz-index

\n\n

CSS color Property

\n\n

Definition and Usage

\n\n

The color property specifies the color of text.

\n\n

Tip: Use the background-color property to set the background color of an element.

\n\n

Default Value:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Property	Default Value
color	Depends on the browser

\n\n

Inheritance:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Property	Inheritance
color	Yes

\n\n

Browser Support

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Property	Chrome	IE	Firefox	Safari	Opera
color	Yes	Yes	Yes	Yes	Yes

\n\n

All major browsers support the color property.

\n\n

Note: IE7 and earlier versions do not support the inherit value. IE8 requires a !DOCTYPE. IE9 and above fully support inherit.

\n\n

Syntax

\n\n

color: color|initial|inherit;\n

\n\n

Property Values

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Value	Description
color	Specifies the color of text. See CSS Legal Color Values for possible color values.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

\n\n

Example

\n\n

Example 1

\n\n

Set different text colors:

\n\n

body {color:red;}\nh1 {color:#00ff00;}\np.ex {color:rgb(0,0,255);}\n

\n\n

Try it yourself »

\n\n

Example 2

\n\n

Use "inherit" to set text color:

\n\n

body {color:red;}\nspan {color:inherit;}\n

\n\n

Try it yourself »

\n\n

Related Pages

\n\n

CSS Tutorial: CSS Text

\n\n

HTML Tutorial: HTML Styles

\n\n

HTML DOM Reference: color property

\n\n

Previous: CSS text-align Property

\n\n

Next: CSS text-indent Property

\n\n