Table of contents

1. Internal

   Type the following in your HTML file:

   <style>
   selector{ 
     property:value
   }
   </style>

2. In-line

   Type the following in your tag (in your HTML file):

   <!-- this will allow the div to have a red background, and a black margin of 10px thick  -->
   <div
    style = "background:red; margin:10px black">
   </div>

3. External CSS file

   Type the following in your html file:

   <link
     rel="stylesheet"  type = "text/css" href = "index.css" >
   </link>

4. CSS Syntax

   Here is an example of the syntax:

   
   /*for the tag*/
   button{
     color:red;
     /* all the elements with button tags have their text colour red */
   }
   
   /*for id*/
   #titles{
     background:purple;
     //all elements with " id = 'titles' " have purple background
   }
   
   /* for classes */
   .card{
     width:100%;
     /* all elements with " class = 'card' " have a width of 100% of its parent's element */
   }
   
   /* when users hover a specific element: */
   .card:hover{
     background:purple
     /* the elements with the class 'card' will have their backgrounds changed to purple */
   }
   
   /* this is a CSS comment */
   

1. Height and width

   Here is an example:

   
   #random{
   //the width is 50px  
   //this is how you change your width
     width:50px;
   //the height is 50px  
   //this is how you change your height
     height:50px;
   //the background colour is red
   //this is how you change your background colour  
     background:red;
   }
   

   This is the expected output:
2. Text properties

   Here is an example:

   
   #textDemo{
   //font size is 30px
   //this is how you change your text size
   font-size:30px;
   //the text is aligned to the left
   //this is how you align your text
   text-align:left;
   
   //the text colour is revealed
   //this is how you change your text colour
   color:red
   }
   

   This is the expected output:

   This is a sample text, sup man.
3. Colours

   Here is an example:

   
   #div1{
     color:purple
   }
   #div2{
     //by name of colour
     background : blue 
   }
   #div3{
     //the colour's hexadecimal value
     background: #8C811E
   }
   #div4{
     //the colour's rgb value
     //rgba(red,green, blue)
     background: rgb(0, 0, 0)
   }
   #div5{
     //the colours' rgba value
     //rgba(red,green, blue, alpha/opacity)
     background: rgba(255,0,0,0.3)
   }
   

   This is the expected output:

   This is #div1

   this is #div2

   this is #div3

   this is #div4

   this is #div5

1. Padding
   Padding is the space within the content of an element.
   Below are some examples:

   #woPadding{
     width:200px;
     height:200px;
     background:purple;
     color:white;
   }
   #wPadding{
     width:200px;
     height:200px;
     background:red;
     color:white;
     //spacing of 10px from content on each side
     padding:10px;
   }

   Below is the expected output:

   Without padding

   With padding
2. Border
   Borders goes around padding and content.
   Below are some examples:

   #woBorder{
     width:200px;
     height:200px;
     background:purple;
     color:white;
   }
   #wBorder{
     width:200px;
     height:200px;
     background:red;
     color:white;
     border:5px blue solid;
   }
   #wBorderRadius{
     width:200px;
     height:200px;
     background:black;
     color:white;
     border:5px purple solid;
     //allows rounded corners for elements
     border-radius:15px
   // read more about border-radius here.
   }
   
   
   
   

   Below is the expected output:

   Without border

   Blue border is 5px thick; solid

   Purple border is 5px thick, with a border-radius of 15px;solid
3. Margin
   Margin is the space outside the border (to separate elements)

• static:default
• absolute:relative to ancestor element
• fixed:relative to browser window
• relative:relative to normal position
• sticky:positioned based on user's scroll position

<!-- in your 'head' tag  -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" 
rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" 
crossorigin="anonymous">

<!-- right before your closing 'body' tag  -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" 
crossorigin="anonymous">
< script >
                

1. z-index
   z-index affects the order which the elements appear.

   Element with z-index of 2

   Element with z-index of 5
2. Tips:
   • Try to remove certain bootstrap classes and use your own CSS for the given element
   • Write neat code :)
   • Put most of your CSS inside .css files for greater efficiency
   • Make your designs mobile responsive (especiall using @media) :)