Define style of Div tag

Question

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>

The link tag is wrong. See my answer. – Franz Nov 10 '09 at 08:34 — Franz, Nov 10 '09 at 08:34
tip: for the links inside html use / not \ :) – Ibrahim AbuRajab Nov 10 '09 at 08:35 — Ibrahim AbuRajab, Nov 10 '09 at 08:35

score 4 · Answer 1 · answered Nov 10 '09 at 08:08

4

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

answered Nov 10 '09 at 08:08

Aaron Digulla

321,842
108
597
820

score 2 · Accepted Answer · answered Nov 10 '09 at 08:14

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;
}

score 2 · Answer 3 · answered Nov 10 '09 at 08:28

2

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"/>

answered Nov 10 '09 at 08:28

Franz

11,353
8
48
70

@Franz: It worked, but it is aligning in center in IE, but not in FireFox? – RKh Nov 10 '09 at 08:35
Try to use `.div, .div * {` as the selector. – Franz Nov 10 '09 at 09:15

score 1 · Answer 4 · edited May 23 '17 at 12:16

1

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.

edited May 23 '17 at 12:16

Community

1
1

answered Nov 10 '09 at 08:07

SpaghettiMonster

620
1
8
17

In this case, it would be better to replace `.body` with `div`. – Aaron Digulla Nov 10 '09 at 08:08
@JT: The CSS worked when I deleted the period, but it is not recognizing the class name. Also, can I define my own class name? – RKh Nov 10 '09 at 08:10
1

yep! you can, however you will need to add reference it with the period (.) and the new class name; ie .myClass{background-color:lightgrey;} – SpaghettiMonster Nov 10 '09 at 08:13
-> this is assuming you have defined the class with:
– SpaghettiMonster Nov 10 '09 at 08:17

score 1 · Answer 5 · edited Nov 10 '09 at 08:16

1

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.

edited Nov 10 '09 at 08:16

Filip Ekberg

36,033
20
126
183

answered Nov 10 '09 at 08:08

Johannes Hoff

3,731
5
31
37

score 0 · Answer 6 · answered Nov 10 '09 at 08:08

0

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.

answered Nov 10 '09 at 08:08

Tola Odejayi

3,019
9
31
46

score 0 · Answer 7 · answered Nov 10 '09 at 08:10

0

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>

answered Nov 10 '09 at 08:10

Luke Bennett

32,786
3
30
57

Ah thanks - I did a quick check but obviously not thorough enough! – Luke Bennett Nov 10 '09 at 10:53

score 0 · Answer 8 · answered Nov 10 '09 at 09:13

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>

Define style of Div tag

8 Answers8