PROWAREtech

articles » current » css » tutorial » page-06

Cascading Style Sheets: Tutorial - Page 06

HTML Elements and CSS Values that Overlap, Specifying Colors and Transparency, More on Transparency.

HTML Elements and CSS Values that Overlap

<b>, <i>, <small>, <s> and <u> match the CSS properties and values font-weight: bold;, font-style: italic;, font-size: small;, text-decoration: line-through; and text-decoration: underline;, respectively.

Specifying Colors

Colors can be specified by their name (a keyword), rgb() function value or with a # followed by a hexadecimal RGB value. For example: <span style="color: green;">this is green text</span>, <span style="color: #f00;">this is red text</span> , <span style="color: #336699;">this is blue text</span>, and <span style="color: rgb(0,0,255);">this is another shade of blue text</span>.

this is green text, this is red text, this is blue text, and this is another shade of blue text.

When specifying hexadecimal RGB values, if each Red-Green-Blue value is a repeating digit then save time by just specifying the three digit version. #FF0000 is the same as #f00 and #336699 is the same as #369.

Color the background of the entire page by using the body selector.

body {
	background-color: #369;
}

A special color specifier is the rgba() function which adds an alpha channel to define opacity (or transparency). This example will create an element with a translucent blue background:
<div style="background: rgba(51,102,153,0.5);"></div>

For backwards compatibility with browsers, like IE8, that do not support the rgba() function, first assign the rgb() value then follow it up with the rgba() value. For example:

#header {
	background: rgb(255,255,255);
	background: rgba(255,255,255,0.5);
	color: rgb(0,0,0);
	color: rgba(0,0,0,0.5);
}

More on Transparency

There is an opacity property which differs from assigning a rgba() value to the background property. When using the opacity property, be aware that all the elements contained in the one that has its opacity property set will inherit the opacity value. So this means if having a <div> with the opacity set to 0.5 then all the HTML elements contained in it will also have an opacity of 0.5. The value range of opacity is zero (transparent) to one (opaque).

THIS IS TEXT BENEATH THE DIV

Heading w/background=rgba()

 

THIS IS TEXT BENEATH THE DIV

Heading w/opacity set

 

 

The code for this is as follows (it requires a little JavaScript):

<!DOCTYPE html>
<html>
<head><title>opacity</title>
<script type="text/javascript">
	function setOpacity(val) {
		var divOp = document.getElementById("divOpacity");
		var divBa = document.getElementById("divBackground");
		var opacity = Number(val);
		divOp.style.opacity = opacity;
		divBa.style.backgroundColor = "rgba(51,102,153," + opacity + ")";
	}
</script>
</head>
<body>
<div style="position:relative;">THIS IS TEXT BENEATH THE DIV<div id="divBackground"
	style="position:absolute; left:0px; top:0px; background-color: rgba(51,102,153,0.5);">
	<h1>Heading with background = rgba() value</h1></div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div style="position:relative;">THIS IS TEXT BENEATH THE DIV<div id="divOpacity"
	style="position:absolute; left:0px; top:0px; background-color: rgb(51,102,153); opacity: 0.5;">
	<h1>Heading with opacity set</h1></div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<label for="opacitySlider">Opacity Slider:</label><input id="opacitySlider"
	onchange="setOpacity(this.value);" type="range" step="0.01" min="0" max="1" value="0.5" />
</body>
</html>
<<<[Page 6 of 15]>>>

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE