Wednesday 2 March 2016

CSS SELECTOR

CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
  1. CSS Element Selector
  2. CSS Id Selector
  3. CSS Class Selector
  4. CSS Universal Selector
  5. CSS Group Selector

1) CSS Element Selector

The element selector selects the HTML element by name.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. p{  
  6.     text-align: center;  
  7.     color: blue;  
  8. }   
  9. </style>  
  10. </head>  
  11. <body>  
  12. <p>This style will be applied on every paragraph.</p>  
  13. <p id="para1">Me too!</p>  
  14. <p>And me!</p>  
  15. </body>  
  16. </html>    

How to add CSS

CSS is added to HTML pages to format the document according to information in the style sheet. There are three ways to insert CSS in HTML documents.
  1. Inline CSS
  2. Internal CSS
  3. External CSS

1) Inline CSS

Inline CSS is used to apply CSS on a single line or element.
For example:

  1. <p style="color:blue">Hello CSS</p>  
For more visit here: Inline CSS

2) Internal CSS

Internal CSS is used to apply CSS on a single document or page. It can affect all the elements of the page. It is written inside the style tag within head section of html.
For example:

  1. <style>  
  2. p{color:blue}  
  3. </style>  
For more visit here: Internal CSS

3) External CSS

External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS code in a css file. Its extension must be .css for example style.css.
For example:

  1. p{color:blue}  
You need to link this style.css file to your html pages like this:

  1. <link rel="stylesheet" type="text/css" href="style.css">  
The link tag must be used inside head section of html.
For more visit here: External CSS

Inline CSS

We can apply CSS in a single element by inline CSS technique.
The inline CSS is also a method to insert style sheets in HTML document. This method mitigates some advantages of style sheets so it is advised to use this method sparingly.
If you want to use inline CSS, you should use the style attribute to the relevant tag.
Syntax:

  1. <htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>    
Example:

  1. <h2 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h2>  
  2. <p>This paragraph is not affected.</p> 


Disadvantages of Inline CSS

  • You cannot use quotations within inline CSS. If you use quotations the browser will interpret this as an end of your style value.
  • These styles cannot be reused anywhere else.
  • These styles are tough to be edited because they are not stored at a single place.
  • It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
  • Inline CSS does not provide browser cache advantages.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)