HTML BODY CSS Style

CSS for HTML body can be very useful if you want to design responsive web pages using beautiful images, html body is a type of container, so if you want to apply style and want to standardize throughout the application, then html body will be right element to apply CSS style. Let's learn how to write CSS style for Html BODY.

How to apply CSS to HTML body element?

Body css style should remain same throughout the web site, so you need not to create any separate class , just mention right padding, margin, width etc in Body itself

CSS for body element

This is how you can write in your css file

body            
{
    margin:auto;
    width:1024px;
    padding:10px;
    background-color:#ebebeb;
    font-size:14px;
    font-family:Verdana;
}

Body css style will be automatically applied in all html pages

you also can write a class and then apply to html body element, in case you want different look for different page in the same web application.

<style>
.bodyDesign {
    margin: auto;
    border: solid 2px #0094ff;
    font-size: 15px;
    font-family: Verdana;
    background-color: #dffe91;
}
</style>
// now you can apply the class to body element
<body class="bodyDesign">

Above approach may be very useful when you have multiple section in your webpage, and you want to give different look to different section, for example section for client and section for vendors

css body background image

You can apply background image on Body tag using CSS

body {
    background-image:url('myimage.png');
    background-position:center center;
    background-repeat:no-repeat;
}

You may be interested to know more about CSS Background

css for body font text

To maintain consistency throughout all pages, you can apply css for body font, css for body text and letter.

body {
    font-family:Arial;
    font-size:15px;
    text-align:left;
    letter-spacing:2px;    
}

You may be interested in following post

CSS Style Examples