Background Color: body gbcolor

How to Set background color in HTML?

A typical webpage consists of different elements. These can be submitted buttons, checkboxes, sign up or login buttons, a facility for smooth scrolling, a banner and carousel, and much more.

We use HTML properties and CSS to style all these elements. But even if all the elements look pretty, there needs to be a proper background for the page. This can be an image or just a color.

For this, you need to specify the color you want to the HTML style tag. Or, you might add your desired background color to the CSS stylesheet.

In this article, we will discuss the different aspects of setting the background color to the web page and its various elements.

Adding a background color to page body using the style attribute

You can set the background color to an HTML page body in two ways. You can use the bgcolor property within the body tag. The other method is by using the style attribute. In this process, the style attribute of the body tag is used. This style attribute has a background-color property, which you will use to set the background color of the web page.

The bgcolor property was used earlier, which is now removed from HTML 5.

Setting Background color of the body using bgcolor property (without using CSS):

      
Background colour in HTML
  

Note: bgcolor property removed in HTML 5

Setting Background color of the body using style property (Inline CSS):

     
HTML Backgorund Color
 
Using CSS style.
  

But you have to remember that the style attribute takes precedence over any other style specified for the web page. So, the properties mentioned suing the style attribute will override any style set in the tag or a CSS style sheet.

Setting Background color of the body using CSS

    body 

Adding background color for HTML elements

We will now look at the different ways to add a background color to HTML elements:

Setting background color to Text

To set the required background color to the text on the page, you have to use the color property. You can specify the desired color in the or mention it in the CSS sheet.

For example,

I am red in color.

will work if you are not using a CSS stylesheet.

Otherwise, you can use the following code in CSS:

    p 
STechies.com 

Setting background colour to a , , Tags

Earlier, the bgcolor attribute was used for setting a color to a table. As it is depreciated in HTML 5, you will have to use CSS. For this, use the following CSS code:

    table < background-color: yellow; >th < background-color: blue; >tr  
 
 
Head
 
Head
 
 
Stechies
 
Stechies
 
 
 
  

The same property of background-color can be used for setting the color of table headers, rows, or cells in a table.

Setting background color to tags

You can set the colors of your choice to the div and paragraph elements using HTML or CSS. In HTML, you can use the tag. Use the following code:

    div 
Background color to div Tag
  

Setting background color to form elements like button and textbox

Background color can be set to form elements such as button and textbox using the style tag in HTML. For example,

    input[type=button] < background-color: #4CAF50; >input[type=text] 

Setting background color to form elements like button and textbox using the ID attribute

If you are using CSS, you might set the color easily with the help of an id attribute. You can set the id value of a button or a textbox to anything you like. This id can then be referred to when writing CSS code. For example, if the button has and the textbox has the following CSS code will be applicable,

    #mytextfield < background-color: gray; >#mybutton 

Setting background color to form elements like button and textbox using the class attribute

You can use class attribute the same as ID attribute, but the main difference between ID and the Class attribute is that we can use multiple class in any HTML element, but we have only one ID HTML element.

    .mytextfield < background-color: gray; >.mybutton 

Different ways to define color in the background property

Using Hex color codes

You can specify the background color through hexadecimal color codes. You can mention this within the style tag or using the CSS background-color property.

This will set the background color to Indigo.

Using HTML color names

You can specify the color names in the HTML or CSS document for the web page or element background.

Using RGB color values

RGB values are used to define the amount of red, green, and blue using a number. This number lies between 0 and 255.

The RGB(255,0,0) value will make the background color red. This is because red is set to the highest amount, and the others are set to 0.

Using HSL color values

Another way to add background color is by using HSL values in HTML and CSS. It stands for hue, saturation, and lightness. Hue is the degree of intensity on the color wheel. Here, 0 means red, 240 is blue, and 120 is green. The saturation level is a percentage where 0 % is a shade of grey 100 % is the full color.

A percentage value is used for the lightness that defines the intensity of the color. Here, 0 % is black, and 100 % is white. 50 % is neither light nor dark. Use the code below for HSL values:

Create a Gradient Background

You can create a gradient background for a web page using CSS. There are two ways to go about it:

Background color linear gradient

In this method, the direction of the gradient is mentioned along with the colors. Directions such as to bottom, to top, to the right, to the left, or to the bottom right can be used.

For example,

    body Stechies.com 

You can also use multiple colors together. Instead of directions, you can use angles such as -90deg.

Background color radial gradient

Here, the gradient is defined by its center. You will have to mention at least two colors.

The basic syntax is as follows:

background-image: radial-gradient(shape size at position, start-color, . last-color);

For example,

    body Stechies.com 

Conclusion

The different ways to set background colors are discussed. You can either mention the styles within the HTML document using the tag. You can also use external style sheets for setting the style properties. But make sure the values are correct when you are using hex codes and HSL values.

• MBR vs GPT
• Difference between NFA and DFA
• Difference between AC and DC
• What is GPU Scaling
• Diploma vs. Degree
• Kubernetes vs Docker
• Types of Servers
• WebP to JPG
• How to Take a Screenshot on Windows 10
• Tableau vs Power BI
• Python vs Ruby
• Differences between Malloc and Calloc Functions in C Language
• Visa vs Mastercard
• Mutex vs Semaphore
• Variance vs Standard Deviation
• Difference between SQL and PLSQL
• Difference between SRAM and DRAM
• Difference between Microprocessor and Microcontroller
• DDL vs DML
• OLTP vs OLAP

Источник

Как изменить цвет фона в HTML

Современные сайты часто используют в качестве фона страницы изображения (фотографии) или даже видео. И, тем не менее, знать простые способы изменения цвета фона страницы необходимо. Во всяком случае, обучение начинающих без этого не обходится.

Итак, если вы читали статью об обязательных тегах, то вы знаете, что текст страницы располагается между тегами . Однако тег не только определяет, где должен быть текст страницы, но и может задавать многие параметры, общие для всех элементов страницы.

Тег

Слово body переводится с английского как “тело”. Всё, что находится между тегами — это тело HTML-документа, это основа основ HTML-страницы.

В HTML4 (а также в XHTML) тег может принимать множество атрибутов, управляющих цветом и фоном документа. Некоторые браузеры предоставляют дополнительные атрибуты для этого тега, однако мы не будем выходить за рамки стандарта HTML 4.

Всё, что находится между открывающим тегом и закрывающим тегом называется содержимым тела.

Закрывающий тег в HTML можно не указывать, однако для совместимости с XHTML лучше все теги делать парными.

Атрибуты тега условно можно разделить на три части:

• Атрибуты, которые управляют внешним видом документа.
• Атрибуты, которые связывают функции в сценариях с самим документом.
• Атрибуты, которые отмечают, то есть именуют, дают имя телу, чтобы на него можно было ссылаться из других элементов сайта.

На этом краткое знакомство с тегом пока закончим, и перейдём к теме данной статьи.

Как задать цвет фона в HTML

Для задания цвета фона документа (страницы) используется атрибут bgcolor:

В этом примере мы установили красный цвет фона страницы. Как задавать цвета с помощью имён и чисел, я уже рассказывал здесь.

В теге можно задать цвет не только для фона, но и для текста страницы:

Здесь мы установили зелёный фон и жёлтый текст для страницы. При необходимости затем вы можете изменить цвет текста отдельного участка текста на странице, как это мы делали здесь.

Можно также задавать цвета и некоторых других элементов страницы (например, ссылок), но об этом в другой раз. Ну а если вам не терпится изучить все премудрости вёрстки сайтов прямо сейчас, то решение здесь.

Источник

HTML — The bgcolor Attribute

The bgcolor attribute is used to set the background color of an HTML element. Bgcolor is one of those attributes that has become deprecated with the implementation of Cascading Style Sheets (see CSS Backgrounds). The reason we’ve included it in this tutorial is because it will give us an opportunity to introduce web colors and also add some life to our HTML web page as we continue to progress through this tutorial. It will serve as a visual aid for you as you are learning the mechanics of building a table.

Without much effort, we can bring that boring white web page to life by adding some color with the bgcolor attribute.

HTML Bgcolor Code:

 
This page now has a SILVER background!
  

HTML Bgcolor:

This page now has a SILVER background!

HTML — Web Colors

Our example uses the text value, which is one of three different types of color values that can be used with the bgcolor attribute. Below is a table of the 16 basic HTML color values that are available to HTML web designers.

HTML Basic Colors:

While the table above illustrates only 16 colors, 16 is surely not the limit to our color wheel. As we mentioned, HTML supports three different types of color values including text values (which we’ve pretty much covered above), numeric, (RGB) and hexadecimal values. We’ll go into more detail regarding these values so just sit tight. This next example offers a sneak peak at what these values may look like.

HTML Code:

 
A red colored table background using hexadecimal values "#FF0000".
 
 
 
A blue colored table background using numeric, RGB values "rgb(0, 0, 255)".
 
 
 
A lime colored table background using color names.
 
 

Table Bgcolor Values:

A lime colored table background using color names.

A red colored table background using hexadecimal values «#FF0000».

A blue colored table background using numeric, RGB values «rgb(0, 0, 255)».

Hexadecimal and numeric color values (RGB) allow HTML developers to expand the color wheel beyond 16 colors. Way beyond 16, in fact. Nonetheless, there’s no need to memorize 256+ unique color combinations; instead, we can use numeric and hexadecimal values and calculate color shades. We’ll show you how to use them in our HTML Color Codes page.

HTML — Coloring Fonts, Table Rows, & Table Columns

Here’s a few common examples of bgcolor in action.

HTML Bgcolor Code:

 
This Row is Yellow!
 
This Row is Gray!
 
This Row is Yellow!
 
This Row is Gray!
 
This Row is Yellow!
 
This Row is Gray!
 
 

Alternating Table Row Colors:

This Row is Yellow!

This Row is Gray!

This Row is Yellow!

This Row is Gray!

This Row is Yellow!

This Row is Gray!

Check out this «Scoreboard» we made with the use of font color and bgcolor!

HTML Code:

 
 
Green Bay
 
13
 
 
New England
 
27
 
 
 

Scoreboard:

Tips

• If you are new to HTML, consider sticking with color names for setting your background color.
• There are 256 «true colors» with hexadecimal values. The colors are made out of hex-pairs for red, green, and blue. Examples: #99FFCC, #33AA44.
• Shades of gray occur when the 3 paired amounts of each color are equal. Example. «rgb(100,100,100)», «#333333,» «#0A0A0A»
• Avoid bright, headache-causing color schemes! Keep your coloring distinct and purposeful.
• For more information about colors, check out our HTML Color Codes lesson.

Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson — Your input is what keeps Tizag improving with time!

Источник