PROWAREtech
Cascading Style Sheets: Tutorial - Page 06
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>.
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).
Heading w/background=rgba()
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> </p>
<p> </p>
<p> </p>
<p> </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> </p>
<p> </p>
<p> </p>
<p> </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>
