Question

I get a little lost on css stylesheet syntax. My dilemma is that I have four <div> tags with ROUGHLY the same style, except the colors are different or one may float: left but another tag might not have that.

So I was thinking I could add id to all of these so that I can move these style statements into the stylesheet.

How would I address each individual id in the stylesheet? I’m thinking something like div#id or something. Lets assume basic div is already unavailable, but I want some abstract stylesheet tag that at least contains display:block and font-size:11px and then a more specific stylesheet tag to address each <div> tag by its id or class or name.

<div style="display:block; color:steelblue; float:left; font-size:11px;">Open Requests&nbsp;</div>
<div id="openNumber" style="display:block; color:steelblue; font-size:11px; clear:right;">13</div>

<div style="display:block; color:green; float:left; font-size:11px;">Completed Requests&nbsp;</div>
<div id="completeNumber" style="display:block; color:green; float:left; font-size:11px;">13</div>

I get a little turned around on the syntax for different selector types

Thanks for any insight

Answer 1

You could try the following:

css:

.floatLeft { float: left; }
.clearRight { clear: right; }
.open { color: steelblue; font-size: 11px; }
.complete { color: green; font-size: 11px; }

html:

<div id="openRequests" class="open floatLeft">Open Requests&nbsp;</div>
<div id="openNumber" class="open clearRight">13</div>

<div id="completeRequests" class="complete floatLeft">Completed Requests&nbsp;</div>
<div id="completeNumber" class="complete floatLeft">13</div>

A <div> is already a block-level element, so you don’t need to specify display: block on it.