CODEWITHSUNDEEP
htmlcss
RKh
RKh

Reputation: 14159

Define style of Div tag

I want to define the style of Div based on a CSS file. The CSS code I have written is:

.body
{
    text-align: center;
    padding: 1px;
    margin: 1px;
    color: black;
    background-color:lightgrey;
}

I want the background of each Div section to be light-grey. What's wrong with the above code?

Edited:

This is my HTML code. I changed the Div class as suggested below, but it is not working. Please also check whether the Link tag contains path correctly or not. The CSS file is located in a Lib folder, up-one-level.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Add/Update Political Party</title>
        <link rel="stylesheet" href=".\Lib\entryformstyle.css" type="text/css"/>
    </head>
    <body>
        <div id="sectionEntryForm" class="div">
            <table id="tblEntryForm" cols="2">
                <tr>
                    <td colspan="2" align="center">Add/Update Political Party</td>
                </tr>
                <tr>
                    <td>Party full name:</td>
                    <td><input id="inPartyFullName" name="inPartyFullName" accept="text/plain" maxlength="80" class="inputBoxStyle"></td>
                </tr>
                <tr>
                    <td>Party short name (initials):</td>
                    <td><input id="inPartyShortName" name="inPartyShortName" accept="text/plain" maxlength="80" class="inputBoxStyle"></td>
                </tr>
            </table>
        </div>
    </body>
</html>

Upvotes: 1

Views: 34006

Answers (8)

SpaghettiMonster
SpaghettiMonster

Reputation: 620

try deleting the period (.) before 'body'

edit: it is also probably worth having a quick read of this post

it explains the difference between "." and '#' when defining styles.

Upvotes: 1

Himadri
Himadri

Reputation: 8876

Either use

div
{
    text-align: center;
    padding: 1px;
    margin: 1px;
    color: black;
    background-color:lightgrey;/*#CCC*/
}

to set background color of all div

Or use

div.body
{
    text-align: center;
    padding: 1px;
    margin: 1px;
    color: black;
    background-color:lightgrey;
}

and set <div class="body"></div> for each div.

You can use inline stylesheet as :

<div style="background-color:lightgrey;"></div>

Upvotes: 0

Franz
Franz

Reputation: 11553

If your CSS file is up one level, you have to include it like this:

<link rel="stylesheet" href="../lib/entryformstyle.css" type="text/css"/>

Upvotes: 2

Johannes Hoff
Johannes Hoff

Reputation: 3901

This only works on the class "body", that is

 <div class="body">

If you want it to work on any divs, the selector (".body" in your sample code) should be div.

Upvotes: 1

eozzy
eozzy

Reputation: 68760

ALL DIVs:

div
{
    text-align: center;
    padding: 1px;
    margin: 1px;
    color: black;
    background-color:lightgrey;
}

DIVs with class "body":

div.body
{
    text-align: center;
    padding: 1px;
    margin: 1px;
    color: black;
    background-color:lightgrey;
}

Upvotes: 2

Luke Bennett
Luke Bennett

Reputation: 32906

Try changing:

background-color:lightgrey;

to

background-color:silver;

or

background-color:#CCC;

This is assuming that your div has the body class applied:

<div class="body"></div>

Upvotes: 0

Tola Odejayi
Tola Odejayi

Reputation: 3059

For this style to work, your div needs to be written like this:

<div class="body">Your text here</div>

In other words, the . in front of the body in your css tells the browser to apply the style in the braces to an element whose class is named body.

Upvotes: 0

Aaron Digulla
Aaron Digulla

Reputation: 328800

Nothing, you just have to use <div class="body"> to make the DIV pick it up.

Upvotes: 4

Related Questions