View Full Version : CSS Text

10-22-2009, 12:07 AM
Ok, this isn't a design question but more of a "whats proper" question. I can get my page to display the text as I want but I'm wondering how it should properly be done.

I get that H1, H2 etc is reserved for headers. address is the debatable address. Etc. But how should you properly handle a page with multiple sizes and styles.

Say you have just a plain ol page with your main content area smack in the middle of it. Then you may have a couple titles you can use H's on but after that you have multiple styles and sizes of text.

Do you create a separate content DIV box for each?

A DIV for each of your fonts?

Is there something other then Header CSS codes that I don't know about?

Sorry, I'm sure that this is CSS 101 here but all the tutorials or templates I see don't seem to have something like this. What do you do if you had 2 different fonts and 3 different sizes that needs to be in the main content area?

Does that make sense?


10-22-2009, 01:02 AM
Not sure I understand the question but you can always create a CSS style class and apply it to the paragraphs or spans that need custom sizing.

10-22-2009, 01:45 AM
Ok, don't worry as I don't have a page this ugly and crazy... just trying to understand CSS to apply to my future pages.

Attached is an example of what I'm talking about. What would be a proper way to translate that into my CSS page? I know the H's but can anyone type out a very brief example of what this should look like on a proper external CSS page?

Not all the page CSS but just what you would name the text or something so I know how to reference to it from my html page.

Thanks and sorry again for being difficult.

10-22-2009, 10:56 AM
Use the correct tags for your page to make sense semantically. If you need say one para as red text then create a style...

.red {color: red;}

and apply it to your paragraph like so...

<p class="red">Text</p>

If you then want a green text para then use this...

.green {color: green;}

and apply it to your paragraph like so...

<p class="green">Text</p>

This way your page is correctly marked up and you have your varying styles. This is a very simple explanation and there are other things to consider but it should get you on the right path.

10-22-2009, 04:50 PM
Sometimes/often we can add semantic meaning to the class names as well
.red {} does not really contain any information about what the paragraph is, only style information.
What when the color changes?
.red {color: green}

A semantic approach would try to add meaning into the class name, for example:
p.intro { color: red}
p.summary {color: green}

10-22-2009, 11:13 PM
Ah, ok... gotcha! Thanks guys!

Now, don't kill me here but is there a different class to use other the P Class?

Example. I have a picture on a page with text directly below it. If I just used a "br" after the image and typed text there is no space between the picture and text. But if I use a P Class it gives me that paragraph spacing between the image and text.

I need no spacing as if I just used a "br" after the image.

How then?

10-23-2009, 01:21 AM
Yes you can keep adding any style declarations to the paragraph tag
p.intro {
font-weight: bold;
margin: 0;
text-align: justify;
text-transform: uppercase;

the 'margin' property sets the margin (shorthand), and by default I think every browser adds a 1em margin to the paragraph, so settting the margin to 0 removes it.

10-23-2009, 01:23 AM
Ok, my thought. (pretending there is more text displayed below)

.red {color: red;}

and apply it to your paragraph like so...

<p class="red">Text</p>

If I don't want the Paragraph spacing between the image and text then I just change it too:

.red {color: red;}

and apply it to your paragraph like so...

<div class="red">Text</div>

Or I guess I could use a span but with a BR after the image.

Is this correct and proper?

10-23-2009, 01:25 AM
wow, posted at the same time...LOL.

So should I use the P class then with the 0 margin over what my example was?

10-23-2009, 02:52 PM
Is this correct and proper?
Not really, and I will try to explain why :)
The markup should be the same no matter what you want it to look like, as long as the markup describes the content the best.
P is used for paragraphs, blocks of text, so if you have a block of text you should use this, no matter what it looks like, and then use CSS to style it.

There's two tags with no semantical meaning, DIV and SPAN. These two an be used for CSS hook anywhere, as they convey no meanin about the content. DDIV's are typically used for large blocks on your page, the header for example.

10-23-2009, 04:31 PM
ok, cool. Makes sense. Sounds in a way that it might even hurt the SEO a little if P tags aren't used for the text then. Maybe I'm wrong on that, I don't know... but what you said makes sense regardless. Thanks for the help!

I would like to show my appreciation for this forum. People always help without demanding to look at my exact code or tell me to go get a book. Its really frustrating on the Adobe forums because most the regulars help at some point but on "their terms" and if feels like they are making an idiot of you at the same time. So thanks for being more willing to teach a little and help out here. Believe it or not I do search through all the tuts online that I can find before I post here its just they aren't clicking to me for some reason.

Anyways, thanks again and I'm sure you'll here back from me shortly unfortunately...LOL. But I am understanding more and more as I go here 8-)

10-23-2009, 06:49 PM
Its really frustrating on the Adobe forums because most the regulars help at some point but on "their terms" and if feels like they are making an idiot of you at the same time.
We're actually a but like that here as well.. I guess you just got lucky ;)