The first lesson is a simple introduction to Source button, padding and borders.

First step is to find a photo of your liking.

You can place the picture by clicking that image icon and then click the magical “Source” button.

You'll see that very confusing code seen like this:

You just need to find the end of the code and go in between the    ; inhere " /> < / p > which is at the end of the code.

Padding is the space between the image and the border, written like this: padding: 1px; The larger the number, the wider the space gets.
e.g.
   
xxxxxxxx 5px xxxxxxxxxxxxxxxxxx 10px xxxxxxxxxxxxxxxxxxxx 30px

Border is those lines outside the image and it's written like this: border: 1px style; Similar with the padding: the larger the number is, the thicker the border gets.
e.g.
  
xxxxxxxx 1px xxxxxxxxxxxxxxxxxx 4px xxxxxxxxxxxxxxxxxxxx 8px

px stands for pixels. No matter what you do, do NOT forget to put the px at the end of the sizes. Otherwise, it won't work.
Place a colon : to costumize a particual style ( ex. border: 2px solid; ) and use a semicolon ; to end the style. ( ex. border: 2px solid; )

Now we go to the border styles:

There are nine different types of borders; solid, dashed, dotted, double,