CSS Syntax Property Example

A CSS contains a set of rules that are interpreted by the browser and then applied to the corresponding elements in HTML document. So in different browser any html element with same CSS class may appear differently.

How to write CSS Style

Any CSS style property rule has three parts

• Selector - A selector is an HTML element or tag to which the style will be applied. Element can be anything like <table> or <div>
• Property Name - A property is a type of attribute of any HTML element. For example a table has border, so border is property, div has font, so font is property
• Property Value - Each property has different set of values, for example border-color : red, so red is value, or font-size: 24px, 24 pixel is value

There are different type of selectors

• Type Selectors

  You can define CSS property for any particular type in your common CSS file, then appearance of that type of element will remain same in your application, after setting this type of CSS property you don’t need to set any css class separately, here is an example of H1 type.

  h1                    
  {
      font-size:24px;
      color:#808080;
  }

• Class Selectors Syntax
  you can create a class, then call the class in any html element, you can define a class with . (dot) . Here is how you can write a class

  .spHeader
  {
      font-size: 24px;
      color: #808080;
      background-color:#e4e4e4;
      padding:10px;
  }

  Now to call the class in a div element <div class="spHeader"> </div>
  
  
• CSS ID Selectors Syntax

  Defining Id is conceptually same as class, only difference is that you define id with # hashtag.

  Here is how you can write an Id in CSS.

  #spHeader
  {
      font-size: 24px;
      color: #808080;
      background-color:#e4e4e4;
      padding:10px;
  }

  While using id on any html element, make sure the Id value is unique on that page.

  Now to call the id in a div element <div id="spHeader"> </div>

• CSS Universal Selectors Syntax
  
  Universal selector means this type of property value will be applied on all type of html element

  {
      font-size:12px;
      font-family:Verdana;
  }