HTML Styles

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

Example

The HTML Style Attribute

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

The HTML style attribute has the following syntax:

The property is a CSS property. The value is a CSS value.

You will learn more about CSS later in this tutorial.

Background Color

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

Example

Set the background color for a page to powderblue:

This is a heading

This is a paragraph.

Example

Set background color for two different elements:

This is a heading

This is a paragraph.

Text Color

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

Example

This is a heading

This is a paragraph.

Fonts

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

Example

This is a heading

This is a paragraph.

Text Size

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

Example

This is a heading

This is a paragraph.

Text Alignment

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

Example

Centered Heading

Centered paragraph.

Chapter Summary

• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment

HTML Exercises

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

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 our terms of use, cookie and privacy policy.

Источник

How to Set Background Color with HTML and CSS

First thing you should know is that there are different types of HTML colors, such as Hex color codes, HTML color names, RGB and RGBa values, HSL colors, etc. To choose your preferred color use our Color Tools.

In this snippet, you can find many different ways of adding a background color. Let’s start from the easiest one.

Add the style attribute to the element

You can set a background color for an HTML document by adding style=»background-color:» to the element.

Example of setting a background color with the style attribute:

html> html> head> title>Title of the document title> head> body style="background-color:#1c87c9;"> h1>Some heading h1> p>Some paragraph for example. p> body> html>

Result

Some paragraph for example.

Add the CSS background-color property to the element

The background-color property is used to change the background color. Inserting it to the element you will have a full colored cover of the page.

Example of setting a background color with the CSS background-color property:

html> html> head> title>Title of the document title> style> body < background-color: #1c87c9; > style> head> body> body> html>

You can also add a background color to specific elements in your document. For example, let’s see how to change the color of the heading and paragraphs.

Example of adding a background color to specific elements:

html> html> head> title>Title of the document title> style> body < background-color: #e6ebef; > h2 < background-color: #8ebf42; > p < background-color: #1c87c9; > style> head> body> h2>Some heading with green background. h2> p>Some paragraph with blue background. p> body> html>

Let’s see another example, where we add a background color with a color name value to the element. We specify a RGB value for the , HSL for the , and RGBa value for the element.

Example of setting background colors with different color types:

html> html> head> title>Title of the document title> style> h1 < background-color: lightblue; > h2 < background-color: rgb(142, 191, 66); > p < background-color: hsl(300, 100%, 25%); > span < background-color: rgba(255, 127, 80, 0.58); > style> head> body> h1>Example h1> h2>Some heading with green background. h2> p>Some paragraph with blue background. p> span>Some paragraph for span> body> html>

Create a background with gradients

Gradient backgrounds let you create smooth transitions between two or more specified colors.

There are two types of gradient backgrounds: linear-gradient and radial-gradient.

In linear-gradient backgrounds, you can set a starting point for the colors. If you don’t mention a starting point, it will automatically set «top to bottom» by default.

Example of setting a linear-gradient background:

html> html> head> title>Title of the document title> style> #grad < height: 500px; background-color: blue;/* For browsers that do not support gradients */ background-image: linear-gradient(to right, #1c87c9, #8ebf42); > style> head> body> h1>Right to Left Linear Gradient background h1> div id="grad"> div> body> html>

The given example shows a linear gradient that starts from the left. It starts from blue, transitioning to green. Change it according to your requirements.

In radial gradient backgrounds, the starting point is defined by its center.

Example of setting a radial-gradient background:

html> html> head> title>Title of the document title> style> #grad < height: 500px; background-color: grey;/* For browsers that do not support gradients */ background-image: radial-gradient(#e6ebef, #1c87c9, #8ebf42); > style> head> body> h1>Radial Gradient Background h1> div id="grad"> div> body> html>

Create a changing background

You can create a background which will change its colors in the mentioned time. For that, add the animation property to the element. Use the @keyframes rule to set the background colors through which you’ll flow, as well as the length of time each color will appear on the page.

Example of creating a changing background:

html> html> head> title>Title of the document title> style> body < -webkit-animation: colorchange 20s infinite; animation: colorchange 20s infinite; > @-webkit-keyframes colorchange < 0% < background: #8ebf42; > 25% < background: #e6ebef; > 50% < background: #1c87c9; > 75% < background: #095484; > 100% < background: #d0e2bc; > > @keyframes colorchange < 0% < background: #8ebf42; > 25% < background: #e6ebef; > 50% < background: #1c87c9; > 75% < background: #095484; > 100% < background: #d0e2bc; > > style> head> body> h1>Changing Background h1> body> html>

The percentages specify the animation length mentioned in «colorchange» (e.g. 20s).

Источник

3 Methods to Set a Background Color with HTML & CSS

This article was co-authored by wikiHow staff writer, Darlene Antonelli, MA. Darlene Antonelli is a Technology Writer and Editor for wikiHow. Darlene has experience teaching college courses, writing technology-related articles, and working hands-on in the technology field. She earned an MA in Writing from Rowan University in 2012 and wrote her thesis on online communities and the personalities curated in such communities.

This article has been viewed 1,504,336 times.

Did you want to change the background color of that page using HTML? Unfortunately, with HTML 5, this is no longer possible in just HTML coding. Instead, you’ll need to use both HTML and CSS coding, which works even better. This wikiHow teaches you how to change the background color of a web page by editing its HTML and CSS.

• Although the attribute for HTML to manage background color is gone, you can still use HTML with CSS to change your background color easily.
• You’ll need a numeric code for the color you want if you want a specific color. If you don’t need a specific color, you can use words like «orange» or «light blue.»
• When editing a web page with HTML and CSS, you can create a solid background, gradient, or changing background.

Setting a Solid Background Color

body  background-color: #d24dff; > 

DOCTYPE html> html> head> style> body  background-color: #d24dff > style> head> html> 

DOCTYPE html> html> head> style> body  background-color: #93B874; > h1  background-color: #00b33c; > p  background-color: #FFFFFF); > style> head> body> h1>Header with Green Backgroundh1> p>Paragraph with white backgroundp> body> html> 

Creating a Gradient Background

Understand the basic syntax of this process. When making a gradient, there are two pieces of information you’ll need: the starting point/angle, and the colors that the gradient will transition between. You can select multiple colors to have the gradient move between all of them, and you can set a direction or angle for the gradient. [2] X Research source

background: linear-gradient(direction/angle, color1, color2, color3, etc); 

html  min-height: 100%; > body  background: -webkit-linear-gradient(#93B874, #C9DCB9); background: -o-linear-gradient(#93B874, #C9DCB9); background: -moz-linear-gradient(#93B874, #C9DCB9); background: linear-gradient(#93B874, #C9DCB9); background-color: #93B874; > 

html  min-height: 100%;> body  background: -webkit-linear-gradient(left, #93B874, #C9DCB9); background: -o-linear-gradient(right, #93B874, #C9DCB9); background: -moz-linear-gradient(right, #93B874, #C9DCB9); background: linear-gradient(to right, #93B874, #C9DCB9); background-color: #93B874; > 

For example, not only can you add more than two colors, you can also put a percentage after each one. This will allow you to set how much spacing you want each color segment to have. Here’s a sample gradient that uses this principle:

background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%); 

background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1)); 

DOCTYPE html> html> head> style> html  min-height: 100%; > body  background: -webkit-linear-gradient(left, #93B874, #C9DCB9); background: -o-linear-gradient(right, #93B874, #C9DCB9); background: -moz-linear-gradient(right, #93B874, #C9DCB9); background: linear-gradient(to right, #93B874, #C9DCB9); background-color: #93B874; > style> head> body> body> html> 

Creating a Changing Background

-webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite; 

@-webkit-keyframes colorchange  0% background: #33FFF3;> 25% background: #78281F;> 50% background: #117A65;> 75% background: #DC7633;> 100% background: #9B59B6;> > @keyframes colorchange  0% background: #33FFF3;> 25% background: #78281F;> 50% background: #117A65;> 75% background: #DC7633;> 100% background: #9B59B6;> > 

DOCTYPE html> html> head> style> body  -webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite; > @-webkit-keyframes colorchange  0% background: #33FFF3;> 25% background: #78281F;> 50% background: #117A65;> 75% background: #DC7633;> 100% background: #9B59B6;> > @keyframes colorchange  0% background: #33FFF3;> 25% background: #78281F;> 50% background: #117A65;> 75% background: #DC7633;> 100% background: #9B59B6;> > style> head> body> body> html> 

Community Q&A

Use the background-size property inside of the «body» element. For example, «background-size: 300px 150px» makes the background 300 pixels wide and 150 pixels high.

Thanks! We’re glad this was helpful.
Thank you for your feedback.
As a small thank you, we’d like to offer you a $30 gift card (valid at GoNift.com). Use it to try out great new products and services nationwide without paying full price—wine, food delivery, clothing and more. Enjoy! Claim Your Gift If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow

Thanks! We’re glad this was helpful.
Thank you for your feedback.
As a small thank you, we’d like to offer you a $30 gift card (valid at GoNift.com). Use it to try out great new products and services nationwide without paying full price—wine, food delivery, clothing and more. Enjoy! Claim Your Gift If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow

Thanks! We’re glad this was helpful.
Thank you for your feedback.
As a small thank you, we’d like to offer you a $30 gift card (valid at GoNift.com). Use it to try out great new products and services nationwide without paying full price—wine, food delivery, clothing and more. Enjoy! Claim Your Gift If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow

Источник