Understanding the CSS Style Attributes

By Vipul Patel

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/

 



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date