Movatterモバイル変換


[0]ホーム

URL:


Menu
×
See More 
Sign In
+1 Get Certified Upgrade Teachers Spaces Bootcamps Get Certified Upgrade Teachers Spaces Bootcamps
   ❮   
     ❯   

CSS References

CSS ReferenceCSS Browser SupportCSS SelectorsCSS CombinatorsCSS Pseudo-classesCSS Pseudo-elementsCSS At-rulesCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Fallback FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

accent-coloralign-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionaspect-ratiobackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-sizeblock-sizeborderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-reflectbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolor-schemecolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumns@containercontentcounter-incrementcounter-resetcounter-set@counter-stylecursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerning@font-palette-valuesfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphenshyphenate-characterimage-rendering@importinitial-letterinline-sizeinsetinset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-startisolationjustify-contentjustify-itemsjustify-self@keyframes@layerleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmarkermarker-endmarker-midmarker-startmaskmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typemax-block-sizemax-heightmax-inline-sizemax-width@mediamin-block-sizemin-inline-sizemin-heightmin-widthmix-blend-mode@namespaceobject-fitobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-positionoffset-rotateopacityorderorphansoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-anchoroverflow-wrapoverflow-xoverflow-yoverscroll-behavioroverscroll-behavior-blockoverscroll-behavior-inlineoverscroll-behavior-xoverscroll-behavior-ypaddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage-break-afterpage-break-beforepage-break-insidepaint-orderperspectiveperspective-originplace-contentplace-itemsplace-selfpointer-eventsposition@propertyquotesresizerightrotaterow-gapscale@scopescroll-behaviorscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-alignscroll-snap-stopscroll-snap-typescrollbar-colorshape-outside@starting-style@supportstab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-shadowtext-transformtext-underline-offsettext-underline-positiontoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslateunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidowswidthword-breakword-spacingword-wrapwriting-modez-indexzoom



CSScolor Property


Example

Set the text-color for different elements:

body {
  color: red;
}

h1 {
  color: #00ff00;
}

p.ex {
  color: rgb(0,0,255);
}
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

Thecolor property specifies the color of text.

Tip: Use a background color combined with a text color that makes the text easy to read.

Show demo ❯

Default value:not specified
Inherited:yes
Animatable:yes.Read aboutanimatableTry it
Version:CSS1
JavaScript syntax:object.style.color="#0000FF"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
color1.03.01.01.03.5


CSS Syntax

color:color|initial|inherit;

Property Values

ValueDescriptionDemo
colorSpecifies the text color. Look atCSS Color Values for a complete list of possible color values.Demo ❯
initialSets this property to its default value.Read aboutinitial
inheritInherits this property from its parent element.Read aboutinherit

More Examples

Example

Set the text color with a HEX value:

body {color: #92a8d1;}
Try it Yourself »

Example

Set the text color with an RGB value:

body {color: rgb(201, 76, 76);}
Try it Yourself »

Example

Set the text color with an RGBA value:

body {color: rgba(201, 76, 76, 0.6);}
Try it Yourself »

Example

Set the text color with a HSL value:

body {color: hsl(89, 43%, 51%);}
Try it Yourself »

Example

Set the text color with a HSLA value:

body {color: hsla(89, 43%, 51%, 0.6);}
Try it Yourself »

Related Pages

CSS tutorial:CSS Text

HTML DOM reference:color property



×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted ourterms of use,cookies andprivacy policy.

Copyright 1999-2026 by Refsnes Data. All Rights Reserved.W3Schools is Powered by W3.CSS.


[8]ページ先頭

©2009-2026 Movatter.jp