CSS Borders, CSS Margins and CSS Paddings

CSS Borders

The CSS border property is used to set borders of an element

You can specify the border for all sides using this syntax:

border: width style color;

border: 1px solid red;

other border properties:
border-top
border-top-width
border-top-style
border-top-color

border-bottom
border-bottom-width
border-bottom-style
border-bottom-color

border-right
border-right-width
border-right-style
border-right-color

border-left
border-left-width
border-left-style
border-left-color

border-width values:
thin
medium
thick
length

border-style values:
dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid

border-color values:
color name
hexadecimal
RGB

Below is an example of a css border style for all sides.

<p style="border: 3px dotted #990000; width: 300px;">
This paragraph is wrapped with a 3px border-width, in dotted border-style and with a hex color of #990000.
</p>

Output:

You may set borders individually by using the border-left, border-right, border-top and border-bottom properties with the same values as the border property.

<p style="border-bottom: 2px solid #990000; width: 300px;">
This paragraph has a 2px bottom border, in a solid border-style and with a hex color of #990000.
</p>

Output:

CSS Margins

The CSS margin property sets the gap or space around an element.

You can specify the margin for all sides of an element using the syntax below:

margin: top, right, bottom, left;
margin: 5px, 5px, 5px, 5px;

You may also set the margins individually using the following margin properties:
margin-left
margin-right
margin-top
margin-bottom

Below, we have two paragraphs floated to the right and setting a 30px margin to the right of the first paragraph.

<p style="border: 1px solid #990000; width: 150px; margin-right: 30px; float:left;">
This is a paragraph with a 1px solid border in color #990000, has a 30px margin to the right and is floated to the left.
</p>

<p style="border: 1px solid #990000; width: 150px; float:left;">
This is a paragraph with a 1px solid border in color #990000 and is floated to the left.
</p>

Output:

CSS Paddings

The CSS padding property define the space between the element border and the content within it.

You can specify the padding for all sides of an element using the syntax below:

padding: top, right, bottom, left;

padding: 10px 10px 10px 10px;

You may also set the margins individually using the following margin properties:
padding-left
padding-right
padding-top
padding-bottom

Below is an example of paragraph having a 20px padding on all sides.

<p style="width: 250px; border: 1px solid #990000; padding: 20px 20px 20px 20px;">
This is a paragraph with a width of 250px, a 1px solid border in #990000 color and a 20px padding on each sides.
</p>

Output:








Below is an example of a paragraph with a left padding of 30px.

<p style="border: 1px solid #990000; width: 250px; padding-left: 30px;">
This is a paragraph with a width of 250px, a 1px solid border in #990000 color and a 30px padding on the left..
</p>

Output:

CSS Fonts and Texts

font
You can define the font-style, font-weight, font-variant, font-size and font-family all at once.

Value: font-style, font-weight, font-variant, font-size and font-family

<p style="font: italic bold 20px Verdana;">Sample Text</p>

Output:

font-family
You can choose which font family to use. You can put other font-family alternatives just in case the first font-family is not available in the user’s system. In our example below, if Arial is not available in the user’s system fonts, then it will use Helvetica . You can use many other generic fonts. They will be prioritized according to their order.

Value: font name

<p style="font-family: Arial, Helvetica">Sample Text</p>

Output:

font-size
used for setting the size of the font

Possible Values:
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
percentage

<p style="font-size: large;">Sample Text</p>

Output:

font-style
Used for setting the style of the font

Value: normal, italic, oblique

<p style="font-style: italic;">Sample Text</p>

Output:

font-variant
Used for setting fonts to small caps or in normal format

Possible Values: normal, small-caps

<p style="font-variant: small-caps;">Sample Text</p>

Output:

font-weight
Used for setting the weight of the font

Possible Values:
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

<p style="font-weight: bold;">Sample Text</p>

Output:

color
Used for setting the color of a text. The color value may be a color name: (blue, red, etc.), a hexadecimal number:(#ff00ff, #333443) or an RGB color: (rgb(255,255,000), rgb 122,234,123).

Value: color

<p style="color: red;">Sample Text</p>

Output:

direction
Used for setting the text direction

Possible Values: ltr, rtl

ltr (left to right) default
rtl (right to left)

<p style="direction: rtl;">Sample Text Sample Text2 Sample Text3</p>

Output:






line-height

Used for setting the spacing between lines.

Possible Values:
normal
number
length
percentage

<p style="line-height: 30px;">
Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph
</p>

Output:


letter-spacing

Used for adjusting the space between letters

Possible Values: normal, length

<p style="letter-spacing: 5px;">Sample Text</p>

Output:



text-align

Used for setting the text alignment

Possible Values:
left
right
center
justify

<p style="text-align: center;">
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph Sample Paragraph
</p>
<p style="text-align: justify;">
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
</p>
<p style="text-align: left;">
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
</p>
<p style="text-align: right;">
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
</p>

Output:



















text-decoration

Used for adding decoration to texts

Possible Values:
none
underline
overline
line-through
blink

<p style="text-decoration: line-through;">Sample Text</p>

Output:

text-indent
Used for indenting the first line of a text

Possible Values: length, percentage

<p style="text-indent: 20px;">
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
</p>
Output:





text-transform

Used for controlling text display

Possible Values:
none
capitalize
uppercase
lowercase

<p style="text-transform: uppercase;">Sample Text</p>

Output:



white-space

Used for controlling white spaces

Possible Values:
normal
pre
nowrap

<p style="white-space: pre;">
Sample Text
Sample Text Sample
Text Sample Text Sample Text</p>

Output:





word-spacing

Used to control the spacing between words

Possible Values: normal length

<p style="word-spacing: 10px;">Sample Text Sample Text</p>

Output: