HTML being a markup language provides an attribute to hold style information. The CSS style attribute module provides the syntax of how CSS fragments should be used in style attributes.
The style attribute allows the web developer to apply style information to specific elements.
Here is an example of a style attribute:
<input style=”color: #099”> …
To support CSS to be used to define style for an element, the value of the style attribute must match the content of a CSS declaration block.
CSS declaration block
A CSS declaration block’s syntax is as under:
declaration-list
: S* declaration? [ ‘;’ S* declaration? ]*
;
This means that any style definition that adheres to this can be used to define a style of an element using CSS3.
Examples of CSS style attribute:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<style type=”text/css”>
div { color: white ! important; background: green ! important; }
</style>
</head>
<body>
<div style=”color: yellow; background: red;”> This should be white on green. </div>
</body>
</html>
Here is another example:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<style type=”text/css”>
div { color: green ! important; }
</style>
</head>
<body>
<div style=”color: red”> This should be green. It has a style
attribute with “color: red” but an important rule with “color:
green”. </div>
</body>
</html>
In the above examples, we can see how style information defined in CSS can be used to apply to elements.
Summary
In this article, we learned how style information defined in CSS can be used to apply to elements.
About the author
Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com . You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508
References
http://www.w3.org/TR/css-style-attr/
