CSS Margin

Margin In CSS :

The margin clears an area about an factor (outside the border). The margin does not have a history shade, and is totally transparent.
The utmost effective, proper, base, and left margin can be transformed independently applying split up properties. A shorthand margin property can be applied, to alter all edges at once.

Margin – Individual sides :

it is possible to specify different margins for different sides:

Example :


Margin – Shorthand property :

To shorten the code, it is possible to specify all the margin properties in one property. This is called a shorthand property.
The shorthand property for all the margin properties is “margin”:

Example :

margin:100px 50px;

CSS Padding

CSS Padding :

The padding  clears a place around this content (inside the border) of an element. The padding  is afflicted with the back ground color of the element.
The most truly effective, proper, base, and left padding  may be changed individually using split properties. A shorthand padding  property can also be used, to improve all paddings at once.

Padding – Individual sides :

it is possible to specify different padding for different sides:

Example :


Padding – Shorthand property :

To shorten the code, it is possible to specify all the padding properties in one property. This is called a shorthand property.
The shorthand property for all the padding properties is “padding”:

Example :

padding:25px 50px;

CSS Outlines

CSS Outline :

An outline is a line that is drawn around elements (outside the borders) to really make the element “stand out“.
Nevertheless, the outline home is distinctive from the border property.
The outline is not part of an element’s sizes; the element’s total width and height is not afflicted with the width of the outline.

CSS Border

Border Color :

The border-color property can be used setting along with of the border. The colour could be set by:

  • title – specify a color title, like “blue”
  • RGB – specify a RGB value, like “rgb(255,0,0)”
  • Hex – specify a hex value, like “#ff0000”

You can also set the border shade to “transparent “.

Example :


Border Width :

The border-width property is employed to set the width of the border.
The width is defined in pixels, or by using among the three pre-defined values: thin, medium, or thick.

Example :


Border – Individual sides :

In CSS it is probable to establish various borders for various factors:

Example :


The border-style home can have from someone to four values.

  • border-style:dotted solid double dashed;
    • top line is dotted
    • right line is solid
    • bottom line is dual
    • remaining line is dashed
  • border-style:dotted solid double ;
    • top line is dotted
    • right and remaining edges are solid
    • bottom line is dual
  • border-style:dotted solid;
    • top and bottom edges are dotted
    • right and remaining edges are solid
  • border-style:dotted;
    • all four edges are dotted

The border-style home is used in the case above. But, in addition, it works with border-width and border-color.

CSS Box Model

Box Model In CSS :

All HTML components can be viewed as boxes. In CSS, the term “box model”  is employed when speaking about design and layout.
The CSS box model is essentially a package that systems about HTML components, and it includes: edges, borders, support, and the actual content.
The box model allows us to place a edge about components and room components in terms of other elements.
The picture under shows the box model:

  • Margin – Clears a place around the border. The margin does not need a history color, it is totally transparent.
  • Border – A Border that goes around the support and content. The Border is suffering from the backdrop color of the field.
  • Padding – Clears a place around the content. The Padding is suffering from the backdrop color of the field.
  • Content – This content of the field, where text and images appear.

Width and Height of an Element :

When you collection the size and level attributes of an element with CSS, you simply collection the size and level of the material area.To assess the total measurement of an element, you have to also include the support, edges and margins.

The total width of the element in the example below is 275px :

border:2.5px solid gray;

Let’s do the math:
250px (width)
+ 10px (left + right padding)
+ 5px (left + right border)
+ 10px (left + right margin)
= 275px

The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

CSS Tables

Table Borders :

To specify table borders in CSS, utilize the border property.
The example below specifies a black border for table, th, and td components:

Example :

table, th, td
border: 1px solid black;

Notice that the table in the example above has double borders. The reason being both table and the th/td aspects have split borders.

Collapse Borders :

The border-collapse property units whether the dining table edges are collapsed in to a simple border or divided:

Example :

table,th, td
border: 1px solid black;

Table Width and Height :

Width and height of a table is defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the th elements to 50px:

Example :


Table Text Alignment :

The text in a table is aligned with the text-align and vertical-align properties.
The text-align property sets the horizontal alignment, like left, right, or center:

Example :


The vertical-align property sets the vertical alignment, like top, bottom, or middle:

Example :


Table Padding :

To control the space between the border and content in a table, use the padding property on td and th elements.

Example :


Table Color :

The example below specifies the color of the borders, and the text and background color of th elements:

Example :

table, td, th
border:1px solid green;

CSS Lists

List In CSS :

In HTML, you can find two types of lists:

  • unordered lists – the list objects are noted with bullets
  • ordered lists – the list objects are noted with numbers or words

With CSS, lists could be styled further, and images can be used while the list object marker.

An Image as The List Item Marker :

To specify an image as the list item marker, use the list-style-image property.


list-style-image: url(‘sqpurple.gif’);

The example above doesn’t present equally in all browsers. IE and Opera can present the image-marker a little bit greater than Firefox, Chrome, and Safari.

Crossbrowser Solution :


list-style-type: none;
padding: 0px;
margin: 0px;
ul li
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 

  • For ul:
    • Set the list-style-type to nothing to eliminate the list object sign.
    • Set both padding and profit to 0px .
  • For several li in ul:
    • Set the URL of the picture, and display it just once.
    • Place the picture wherever you are interested.
    • Place the writing in the list with padding-left.

List – Shorthand property :

It is also probable to specify all of the list properties in a single, simple property. This really is named a shorthand property.
The shorthand property useful for provides, could be the list-style property:


list-style: square url(“sqpurple.gif”);

CSS Links

Styling Links In CSS :

Links could be formed with any CSS property (e.g. color, font-family, background, etc.).
Special for hyperlinks are they can be formed differently relying on what state they are in.
The four hyperlinks states are:

  • a:link – a normal, unvisited url.
  • a:visited – a url the consumer has visited.
  • a:hover – a url when the consumer mouses around it.
  • a:active – a url the moment it’s clicked.

Example :

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

Common Link Styles In CSS :

In the case over the hyperlink changes color relying about what state it is in.
Lets go through a number of the different popular approaches to style hyperlinks:

Text Decoration :

The text-decoration property is mainly applied to get rid of underlines from links:

Example :

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Background Color :

The background-color property specifies the background color for links:

Example :

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

CSS Font

Font Family In CSS :

The font group of a text is placed with the font-family property.
The font-family house should hold many font names as a “fallback” system. If the browser doesn’t help the first font, it tries another font.
Focus on the font you would like, and end with a simple household, to let the browser select a similar font in the general household, if number other fonts are available.

Example :

p{font-family:”Times New Roman”, Times, serif;}

Font Style In CSS :

The font-style property is certainly caused by applied to establish italic text.
This property has three prices:

  • standard – The text is revealed normally
  • italic – The text is revealed in italics
  • oblique – The text is “leaning

Example :

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Font Size In CSS :

The font-size price is definitely  relative size.
Absolute size:

  • Units the writing to a specified size
  • Does not allow a person to improve the writing size in most browsers.
  • Absolute size is useful once the bodily size of the result is known

General size:

  • Units the size in accordance with surrounding things
  • Enables a person to improve the writing size in browsers

Use a Combination of Percent and Em :

Example :

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

Our code now works great! It shows the same text size in all browsers, and allows all browsers to zoom or resize the text.

Set Font Size With Em :

The size can be calculated from pixels to em applying this system: pixels/16=em.

Example :

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

In the example over, the writing size in them is exactly like the last example in pixels. However, with the them size, it’s possible to adjust the writing size in every browsers.

Set Font Size With Pixels :

Setting the text size with pixels gives you full control over the text size:

Example :

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

The example above allows Internet Explorer 9, Firefox, Chrome, Opera, and Safari to resize the text.

CSS Text

Text Color :

The color house is used to create the colour of the text.
With CSS, a color is usually specified by:

  • a HEX value – like “#ff0000”
  • an RGB value – like “rgb(255,0,0)”
  • a color name – like “red”

  • The default color for a page is defined in the body selector.

    Example :

    body {color:blue;}
    h1 {color:#00ff00;}
    h2 {color:rgb(255,0,0);}

    Text Alignment :

    The text-align property is employed to set the horizontal position of a text.
    Text can be focused, or arranged to the left or proper, or justified.
    When text-align is set to “justify”, each point is stretched therefore that each point has identical width, and the left and proper prices are right.

    Example :

    h1 {text-align:center;}
    p.date {text-align:right;}
    p.main {text-align:justify;}

    Text Decoration :

    The text-decoration property is employed setting or eliminate accessories from text.
    The text-decoration property is mainly applied to eliminate underlines from links for style purposes:

    Example :

    a {text-decoration:none;}

    Text Transformation :

    The text-transform property is used to establish uppercase and lowercase words in a text.
    It may be used to show everything in to uppercase or lowercase words, or capitalize the very first page of each word.

    Example :

    p.uppercase {text-transform:uppercase;}
    p.lowercase {text-transform:lowercase;}
    p.capitalize {text-transform:capitalize;}

    Text Indentation :

    The text-indentation property is used to specify the indentation of the first line of a text.

    Example :

    p {text-indent:50px;}