CSS

CSS

1. What is it?

   • Cascading Style Sheets = format the content/ html dom tree

2. What Purpose ?

   • Separate content from presentation. It can be applied to xml files, not just html,xhtml. It can specify the style for different media. - REUSE OF THE CODE. - Avoid duplication - Make maintenance easier

3. Why Cascading?

   • Child elements in html DOM tree inherit style from their parent.

4. SYNTAX ?

   • rules
     • declarations
     • properties
     • selectors
       • by ID
       • by TAG
       • by CLASS
       • combined
         • h1, #someId , .anotherclass { color: #ff3402;}
       • nested selectors
         • *
         • +
         • >
       • by ATTRIBUTES
     • values
   • comments
     • /* comment */

5. HOW TO IMPORT ?

   • inline
     • Using style attribute. Example:
     • bad practice
   • embedded
     • in head tag , in style tag .
   • external
     • It is made by link tag ,  rel = "stylesheet", href= "link", type="text/css"
     • good practice
   • @import

6. HOW IT WORKS?

   • - The browser converts the markup language and css into a structure called DOM.  - The browser display the content of the DOM.

Images and files in the map