Andy B. wrote:
> I have some questions about creating styles for 3 lines of text that are in
> a div that is 298px wide and 75px tall.
>
> 1. For each line of text, what container would you use? For an example, p,
> div or span?
> 2. I need to create the styles, but don't quite know where to start.
> Line 1: The text "Eternity Records presents" should:
> - Be horozontally centered in the div containing it.
> - Be black in color.
> - Be on a line all by itself.
> - be significantlly larger than the rest of the text on the page.
> - have it's font-family be sans serif.
> Line 2: The text "In Him" should:
> - Be the color #600000.
> - be the same font as line 1.
> - be horozontally centered in the div below line 1
> - Be on a line all by itself.
> - be 25% smaller than line 1.
> Line3: The text "For in Him we move and live and have our being... (Acts
> 17:28)" should:
> - Be #600000 in color.
> - Be the same font as line 1 and 2.
> - Be horozontally centered in the div below line 2
> - Be on a line all by itself.
> - Be the same font size as the text on the rest of the page.
>
> How would I make these styles?
>
For a very rudimentary explanations of different approaches to styling
see http://www.w3schools.com/css/css_howto.asp.
My response is germane to using an external style sheet. I would create
one "p" selector for properties that are common to all three (if in
fact there are common properties). I would create three classes, one for
each line described above.
p {
add properties here common to all lines;
}
.plineone {
add properties unique to line one here;
}
.plinetwo {
add properties unique to line two here;
}
.plinethree {
add properties unique to line three here;
}
Use <p class="[insert class name her]"></p> for the content for each
line. All in all:
<div>
<p class=".plineone">Blah blah blah line one.</p>
<p class=".plinetwo">Blah blah blah line two.</p>
<p class=".plinethree">Blah blah blah line three.</p>
</div>
The div itself can had an ID or a class, as befits your overall design.
Bill B
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
