Movatterモバイル変換


[0]ホーム

URL:


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

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML ColorsHTML CSSHTML LinksHTML ImagesHTML FaviconHTML Page TitleHTML TablesHTML ListsHTML Block & InlineHTML DivHTML ClassesHTML IdHTML ButtonsHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetsHTML URL EncodeHTML vs. XHTML

HTML Forms

HTML FormsHTML Form AttributesHTML Form ElementsHTML Input TypesHTML Input AttributesInput Form Attributes

HTML Graphics

HTML CanvasHTML SVG

HTML Media

HTML MediaHTML VideoHTML AudioHTML Plug-insHTML YouTube

HTML APIs

HTML Web APIsHTML GeolocationHTML Drag and DropHTML Web StorageHTML Web WorkersHTML SSE

HTML Examples

HTML ExamplesHTML EditorHTML QuizHTML ExercisesHTML ChallengesHTML WebsiteHTML SyllabusHTML Study PlanHTML Interview PrepHTML BootcampHTML CertificateHTML SummaryHTML Accessibility

HTML References

HTML Tag ListHTML AttributesHTML Global AttributesHTML Browser SupportHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML DoctypesHTML Character SetsHTML URL EncodeHTML Lang CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

HTMLStyles


The HTMLstyle attribute is used to add styles to an element, such as color, font, size, and more.


Example

I am Red

I am Blue

I am Big

Try it Yourself »

The HTML Style Attribute

Setting the style of an HTML element, can be done with thestyle attribute.

The HTMLstyle attribute has the following syntax:

<tagnamestyle="property:value;">

Theproperty is a CSS property. Thevalue is a CSS value.

You will learn more about CSS later in this tutorial.


Background Color

The CSSbackground-color property defines the background color for an HTML element.

Example

Set the background color for a page to powderblue:

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
Try it Yourself »

Example

Set background color for two different elements:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>
Try it Yourself »


Text Color

The CSScolor property defines the text color for an HTML element:

Example

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Try it Yourself »

Fonts

The CSSfont-family property defines the font to be used for an HTML element:

Example

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Try it Yourself »

Text Size

The CSSfont-size property defines the text size for an HTML element:

Example

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Try it Yourself »

Text Alignment

The CSStext-align property defines the horizontal text alignment for an HTML element:

Example

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Try it Yourself »

Chapter Summary

  • Use thestyle attribute for styling HTML elements
  • Usebackground-color for background color
  • Usecolor for text colors
  • Usefont-family for text fonts
  • Usefont-size for text sizes
  • Usetext-align for text alignment


Video: HTML Styles

Tutorial on YouTube
Tutorial on YouTube


×

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