Written by Anna Fitzgerald. Setting the background color of a web page or an element on that page can enable you to create unique layouts. Take the homepage of Delish as an example. The background image of its header section is a colorful soup. To ensure readers can still see the name of the recipe, the background color of the text box is set to white. The effect is striking and easy to read. You used to be able to simply use the background color attribute to change the background color of a page or element.
Say you wanted to change the background color of a web page to maroon. You would have simply added the bgcolor attribute in the opening body tag and set it to the hex color code , as shown below. However, this attribute has been deprecated in the latest version of HTML and replaced by a much better alternative. This alternative is the CSS background-color property. Using this property, you can add and change background colors on your website.
Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.
Adding a background color can help a certain element stand out on the page, making it more readable. You have plenty of HTML color codes to choose from. Next, add the style attribute to the opening tag of your element. For this tutorial, only the background color of this specific table will change. The change will not affect any other element on the page. The good news is the process for changing the background color of an element is nearly identical to the process for adding it.
If this was the only CSS, then everything on the page would have the same light blue background. Next, we'll add inline CSS to change the background color of the table. If we want to change the background color of the table, we can use inline CSS to target that single element.
Usually, a web page will have many divs. First, find the div in your HTML code and add a class to the opening tag. Adding a class to an element will allow you to change that element only. Next, head over to your CSS code and add your new class selector. Within the brackets, include the background-color property.
Next, choose a CSS background color for your background-color property. We chose rgb , , You can change the opacity and transparency to create interesting visual effects. Values for this property range from 0 to 1, with 0 being completely transparent and 1 being completely opaque. When you define HEX, the code contains both numbers from 0 to 9 and letters from A to F to describe the intensity of the color.
The first two symbols determine red intensity, the two in the middle - green intensity, and the last two - blue intensity. HSL stands for hue , saturation and lightness :. Best way to design your HTML table. Learn CSS table design with examples. Easiest way of using CSS outline to make your text stand out. Code has been added to clipboard! Reading time 4 min. Contents 1. Ways to Define Color 3.
Name 3. HEX Value 3. Example Copy. Try it Live Learn on Udacity. Pros Simplistic design no unnecessary information High-quality courses even the free ones Variety of features. Nanodegree programs Suitable for enterprises Paid certificates of completion.
Pros Easy to navigate No technical issues Seems to care about its users. Huge variety of courses day refund policy Free certificates of completion. Pros Great user experience Offers quality content Very transparent with their pricing. Free certificates of completion Focused on data science skills Flexible learning timetable. RGB ,0,
0コメント