Thursday 3 March 2016

INTERNAL CSS

The internal style sheet is used to add a unique style for a single document. It is defined in <head> section of the HTML page inside the <style> tag.
Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. body {  
  6.     background-color: linen;  
  7. }  
  8. h1 {  
  9.     color: red;  
  10.     margin-left: 80px;  
  11. }   
  12. </style>  
  13. </head>  
  14. <body>  
  15. <h1>The internal style sheet is applied on this heading.</h1>  
  16. <p>This paragraph will not be affected.</p>  
  17. </body>  
  18. </html>  

CSS Comments

CSS comments are generally written to explain your code. It is very helpful for the users who reads your code so that they can easily understand the code.
Comments are ignored by browsers.
Comments are single or multiple lines statement and written within /*............*/ .

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. p {  
  6.     color: blue;  
  7.     /* This is a single-line comment */  
  8.     text-align: center;  
  9. }   
  10. /* This is  
  11. a multi-line  
  12. comment */  
  13. </style>  
  14. </head>  
  15. <body>  
  16. <p>Hello Javatpoint.com</p>  
  17. <p>This statement is styled with CSS.</p>  
  18. <p>CSS comments are ignored by the browsers and not shown in the output.</p>  
  19. </body>  
  20. </html>   

External CSS

The external style sheet is generally used when you want to make changes on multiple pages. It is ideal for this condition because it facilitates you to change the look of the entire web site by changing just one file.
It uses the <link> tag on every pages and the <link> tag should be put inside the head section.
Example:

  1. <head>  
  2. <link rel="stylesheet" type="text/css" href="mystyle.css">  
  3. </head>  
The external style sheet may be written in any text editor but must be saved with a .css extension. This file should not contain HTML elements.
Let's take an example of a style sheet file named "mystyle.css".
File: mystyle.css

  1. body {  
  2.     background-color: lightblue;  
  3. }  
  4. h1 {  
  5.     color: navy;  
  6.     margin-left: 20px;  
  7. }   
Note: You should not use a space between the property value and the unit. For example: It should be margin-left:20px not margin-left:20 px.

No comments:

Post a Comment