CSS online training course

CSS lesson 6, Layout and color

Margin

With this shematic we will try to give you a example of this css lesson.

The order how in which it should be used:
  • top
  • right
  • bottom
  • left

The margin is the distance of the edge of a element to the border of the adjacent element. I use margin to create space between elements. We can give the same values for all 4 sides of a element but of course this could also be 4 different values. Its enough to give just one value when these are equal for each side. This rule also be applied to padding and border.

p { margin:0;} (each element p doesnt have value in other words zero px ) i other words we disable the margin.
p { margin:4px 4px 6px 6px;} The margin fron top is 4px, right 4px, bottom 6 px and left 6px)

We can also mix the value px, em and % like for example :
p { margin: 1,6em 18% 1,4em 12%} or P { margin: 2px 8% 16px 8%}

H1 is centered horizontally can u see it ? The left side as well as the right side is being controlled in the total amount of space.

Border

The border is the edge of a element and gives a visible border. The edges can be gives colors with different sizes and different shapes in which the order is allready given at the margin.
The border styles are as followed : solid, inset, dotted, dashed, double, groove, ridge and outset.
The thickness of the border can be arranged with the following codes : medium,thin,thick and the width like px, %, em

A example of a border :

Padding

Padding says how much space needs to be open between the content and the border. Of course this means that there will be less room for text. The padding copies the background of the element. The value is descibed in width and percentage. Like for example : 3px, 1.2em,12%. But usually px or em is used. The secuence in padding is also. Top right bottom and left.

The size of the box is controlled by the sum of the messurements from the element and width of the margin, border and padding.

Colors

Without color a website would be pretty boring so we will teach you how to use them in your website. CSS offers many options to give text or backgrounds some color.

The CSS property color defines the front color of a text and <background> defines the color of the background.

There are different ways to write color:
As RGB (0,29,172)
Hexadecimal #009000
But also with just refering to their english name like blue, green and yellow.

I do recommend you to use the hexadecimal colors though for their simplicity.
A hexadecimal colorcode exits of 3 groups with 2 characters each.
These 3 groups represent the RGB values, in other words red, green and blue.
When 2 characters of a color are the same you can shorten it by just writing 1 character.
Some examples :
#111111 wordt #111
#662222 wordt #622

Will look like this :