Style Definitions in CSS.....


Hey friends Today I am here to tell you about the style definition in CSS
This is the part 2 of CSS Absolute Tutorial Series




The Style Definition Formats

                         The format of written code in css is
                          selector{
                           property: value(s);
                          property: value(s);
                         .........
                         }
like 
h1{
color: red;
}

the actual formatting of the style declarations can vary but must follow these rules

  • The selector or selector expression must be first
  • Braces({ and } ) must follow the selector and enclose the style property value pairs
  • Each style property value pair must end with a semicolon(;)
Example:- both the format are correct
h1{color:red; border:thin dotted black; font-family:helvetica,sans-serif; text-align:right;}
and 
h1{
h1{color:red; 
border:thin dotted black;
 font-family:helvetica,sans-serif; 
text-align:right;}

Now what is selectors:selectors are patterns that enables a user agent to identify what elements should get what styles 
ex: the following style says in effect,"If it is a paragraph element(p) then give it this style".
 p{ text-indent:2em;}

  •           Matching Element by type
                            the easiest selector to understand is the plain element selector .as in the following example
h1{
color:red;}
 We can also define many heading having same effect as
h1, h2, h3 , h4 { color:red}
this means that h1 h2 h3 h4 all these heading color will come red due to above css code;


  • Matching using the universal selector
         The universal selector designated by an asterisk (*) can be used to match any element in the document 
ex:
*{color:red;} 
this means that all elements color in the web page become red 


  • Matching elements by class 
You can use selectors to match element classes .Suppose you had two areas in your document with different backgrounds one light and one dark You would want to use dark colored text within the light background aresa and light-colored text within the dark background area.You could use light_bg and dark-bg classes in your style selector and applicable elements to ensure that the appropriate text colors were applied within the areas.

To specify a class to match with a  selector we define class as 

                                     (dot)<name of class>
ex: .first          , the class here is first always start with dot


  • Matching elements by identifiers 
                    you can also use selectors to match elements identifiers - the id attributes of elements.
ex: #comment   { background-color : green;  }



So all these are the formats of selectors how be select the elements on which we can easily code our css style

To know more about CSS you can googled it 
check out this also CLICK HERE

Hope you all like this post and If any query please leave a comment I will surely solve your problem

The Third part of this series will be post soon in which we discuss about the CSS VALUES and UNITS











Style Definitions in CSS..... Style Definitions in CSS..... Reviewed by vishal parashar on 19:37 Rating: 5

Follow and +1 Us

Powered by Blogger.