CSS Revision Mind Map

CSS Revision Mind Map

1. INLINE

   • STYLE ONLY INDIVIDUAL HTML ELEMENT INSIDE HTML FILE
   • SYNTAX: <h1 style="colour:blue; text-align: center;">
   • HARD TO FIND IT WITHIN COMPLEX WEBSITE

2. EXTERNAL

   • FILE WITH .CSS EXTENSION
   • OUTSIDE OF HTML FILE
   • <link rel="stylesheet" href="mystyle.css">
   • CSS SYNTAX h1 { background-color:grey; text-align: center; }
     • EACH CSS RULE IS ENDED WITH SEMI-COLON

3. INTERNAL

   • <STYLE> </STYLE> TAGS INSIDE HTML FILE
   • CSS SYNTAX h1 { background-color:grey; text-align: center; }
     • EACH CSS RULE IS ENDED WITH SEMI-COLON
     • NEED TO USE CURLY BRACKETS
     • USE COLON WHEN DEFINING VALUE
     • CONSISTS OF HTML TAG; PROPERTY AND VALUE
   • INTERNAL
     • ALWAYS INCLUDED WITHIN HEAD TAG OF HTML FILE

4. CSS CASCADING STYLE SHEETS

5. WHY DO WE USE IT?

   • TO SAVE TIME
   • EASY TO ADAPT CHANGES
   • CUSTOMIZATION
   • CAN BE REUSED FOR DIFFERENT WEBSITES
   • DIVERSE CHOICE FOR DIFFERENT STYLES AND AESTHETICS

6. PROPERTIES

   • MARGIN
   • PADDING
     • PADDING-LEFT
   • BACKGROUND-COLOR
   • TEXT
     • FONT-TYPE
     • FONT-FAMILY
     • TEXT-SIZE
     • TEXT-ALIGN