Menu
How to Set CSS Colors ?
CSS color properties allows us to color the Background and Foreground Color on a Web Page. We can set CSS color on text, backgrounds, borders, and other parts of elements in a document.
Transparency using RGBA. You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha ). The background-color property sets the background color of an element. The background of an element is the total size of the element, including padding and border (but not the margin). Tip: Use a background color and a text color that makes the text easy to read. At least on Windows the native window background color is white. The Chromium content layer's background color is determined differently. When resizing the window the Chromium content layer is slower to resize so the native window background color shows up as the Chromium content layer's resize code runs and catches up.
CSS Background Color
How to set CSS body background color ?
You can define the background color of a webpage by specify its body background color property.
Output:
Windows: how to change background color and text color. Here are the steps that should help you change the background in Windows. By following these steps you can also automatically change the background color in Word and other MS Office applications.PDF reader, Internet Explorer, and Firefox may also be set to use system’s text and background color settings. Changing CSS of multiple HTMLElement. Imagine you would like to apply CSS styles to more than one element, for example, make the background color of all elements with the class name box lightgreen.Then you can.
How to set CSS Paragraph background color ?
Output:
How to set CSS div back color ?
![Background Background](/uploads/1/2/4/8/124802402/238365096.png)
Output:
CSS Foreground Color
How to change CSS text color ?
When we want to change the color of a text (foreground color) in an HTML document the term color is used to specify the CSS property.
The above CSS code states that all the text elements under body shall be of Maroon color
How to Change the Font Color with CSS ?
When you set foreground color , actually the font color will change.
The above code change the font color inside the H1 tag.
Border Color
how to set CSS border-color
The border-color property specifies the border color for each side of the box.
Output:
You can specify border color to each side specifically.
Border color define to each side
The
opacity
property specifies the opacity/transparency of an element.Transparent Image
The
opacity
property can take a value from 0.0 - 1.0. The lower value, the more transparent:opacity 0.5
Note: IE8 and earlier use
filter:alpha(opacity=x)
. The x can take a value from 0 - 100. A lower value makes the element more transparent.Example
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
Try it Yourself »opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
![Color Color](/uploads/1/2/4/8/124802402/868056577.jpg)
Transparent Hover Effect
The
opacity
property is often used together with the :hover
selector to change the opacity on mouse-over:Example
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Try it Yourself »opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Example explained
The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a user hovers over one of the images. In this case we want the image to NOT be transparent when the user hovers over it. The CSS for this is
opacity:1;
.When the mouse pointer moves away from the image, the image will be transparent again.
An example of reversed hover effect:
Example
img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
Try it Yourself »opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
Transparent Box
When using the
opacity
property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read:Example
div {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
Try it Yourself »opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
Transparency using RGBA
If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:
You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color.
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.
Example
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
Change Window Background Color In Windows 10
Try it Yourself »Text in Transparent Box
This is some text that is placed in the transparent box.
Example
Css Colors
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div>
<div>
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Try it Yourself »<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div>
<div>
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
First, we create a <div> element (class='background') with a background image, and a border. Then we create another <div> (class='transbox') inside the first <div>. The <div> have a background color, and a border - the div is transparent. Inside the transparent <div>, we add some text inside a <p> element.