Strategy for styling disparate content

**DoubleDee** · Mar 28, 2011 18:24

I could use some help with coming up with a strategy to more easily style disparate content in my Slide-Show which consists of 3-4 slides.

The purpose of the Slide-Show is to display specific content that causes people to think or act. It is usually short and to the point. And I use lots of different formatting (e.g. LARGE and small fonts, bold, italics, and underlining) to draw attention to key points!!

The problem is that each line usually has it's own style. (In fact, certain words in a line may have their own style too?!)

For example...

Think that BIG BUSINESS runs America??

You might be interested to know that...
* There are an estimated 29.6 million small businesses in the U.S.
* Small Businesses employ roughly 50% of the private sector
* Small Businesses represent 99.7% of all employer firms in the U.S.

The reality is that Small Business is the heart-beat of America!!

Last night I tried to style a slide similar to this using your standard styles, but it soon became clear that this was a problem.

I ended up creating a bunch of classes and used some SPANs, but I just don't feel satisfied and that I have an easy way to manage things.

Hopefully you guys follow what I'm getting at, and can offer a more standardized approach to managing my styles and markup.

Thanks,

Debbie

**Force Flow** · Mar 28, 2011 18:39

Why are you doing a presentation slide show in HTML?

If you want something that's available online, there's a few online services like:

authorSTREAM
Docstoc
Google Docs
Prezi
Scribd
wePapers

But yes, if you're wildly changing styles within a paragraph of text, with a class defined is the best option.

**PicnicTutorials** · Mar 28, 2011 18:40

Say you have 3 slides. Each in a div. Give each div an id (#slide1, #slide2, #slide3). Then you say...

#slide1 p span {}

and

#slide2 h2 span.dif {}

**DoubleDee** · Mar 28, 2011 19:16

Originally Posted by Force Flow

Why are you doing a presentation slide show in HTML?

Because it is free, accessible, and looks damn good thanks to Rayzur adn Paul O'!!

But yes, if you're wildly changing styles within a paragraph of text, with a class defined is the best option.

Do SPANs have to be encapsulated in something like a ??

Debbie

**DoubleDee** · Mar 28, 2011 19:21

Originally Posted by EricWatson

Say you have 3 slides. Each in a div. Give each div an id (#slide1, #slide2, #slide3). Then you say...

#slide1 p span {}

and

#slide2 h2 span.dif {}

I guess I was being dumb this early a.m. and forgot to tap into using #slide1, #slide2, #slide3 and so on...

Also, I was/am confused if it is better to make one-off styles that don't ever get used again, e.g.

#slide1 p{red bold 24pt Georgia}

or if I should create reusable classes, e.g.

.redText, .largePrint, etc

and then chain things together?!

Debbie

**Rayzur** · Mar 28, 2011 19:24

And I use lots of different formatting (e.g. LARGE and small fonts, bold, italics, and underlining) to draw attention to key points!!

Those text formatting styles you mention there can actually be used by the elements that represent them.

<big>



I would not use though as it is deprecated. However where you are wanting that underline in your example I would just use and style a tag since it would slide in that bold sentence just fine and then just style text-decoration to it.

Using those elements I only need to add one span to do everything that your example requests.
(it could actually be a <big> tag also, like shown in the H2)

This example uses a div as the parent but in your case it would be the LI, your slides are list-items with ID's on them.

In this standalone example I really did not need the .bold class on the , it's just there to show how to style it by itself without conflicting with other tags that may be in there.

Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
 
<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.2 arial;
}
div {
    width:600px;
    margin:0 auto;
    padding:15px;
    background:#EEF;
}
div h2 {
    margin:0;
    font:1.1em/1.2 arial;
}
    div h2 big {
        font-size:115%;
        text-transform:uppercase;
    }
    div h2 small {
        display:block;
        margin:10px 0 0;
        font-size:80%;
    }
div li {
    font-style:italic;
}
div p.bold {
    font:bold .9em/1.2 arial;
}
    div p.bold span {
        font-size:130%;
        text-transform:uppercase;
    }
    div p.bold b {
        text-decoration:underline;
    }
</style>
 
</head>
<body>
 
<div>
    <h2>
        Think that <big>Big Business</big> runs America??
        <small>You might be interested to know that...</small>
    </h2>
    <ul>
        <li>There are an estimated 29.6 million small businesses in the U.S.</li>
        <li>Small Businesses employ roughly 50% of the private sector</li>
        <li>Small Businesses represent 99.7% of all employer firms in the U.S.</li>
    </ul>
    <p class="bold">The reality is that <span>Small Business</span> is the <b>heart-beat</b> of America!!</p>
</div>
 
</body>
</html>

**DoubleDee** · Mar 28, 2011 20:01

Rayzur,

You never cease to amaze me!

A very unique - and much more organized - approach than I was hacking out at 2:00a.m. this morning!

I'm really beat tonight

but will pick up on your code tomorrow.

Thanks for once again helping me to grow with my HTML and CSS!

Debbie

**Rayzur** · Mar 28, 2011 20:36

Glad you found it helpful!

The only thing I might do different would be to replace that with a <big>. Just adjust the CSS according to the tag name.

Then I would add a tag in the H2, those two changes would keep the highlights pointed out with CSS turned off.

Code:

<div>
    <h2>
        Think that <big>Big Business</big> runs America??<br>
        <small>You might be interested to know that...</small>
    </h2>
    <ul>
        <li>There are an estimated 29.6 million small businesses in the U.S.</li>
        <li>Small Businesses employ roughly 50% of the private sector</li>
        <li>Small Businesses represent 99.7% of all employer firms in the U.S.</li>
    </ul>
    <p class="bold">The reality is that <big>Small Business</big> is the <b>heart-beat</b> of America!!</p>
</div>

That leaves you with the ability to still slip a generic span in there if needed for additional styling.

**dresden_phoenix** · Mar 29, 2011 00:01

Just remember a basic GRAPHIC DESIGN rule, over emphasizing or over differentiating is the same as not differentiating at all. This actually works semantically as well if everything is is an h3 or an EM or STRONG... then nothing stands out either for for search engines.. but I digress.

If you must insist in making your content look like a tag cloud, us the same strategy: dedicate a segment of your style sheet to "styling spans" and then apply siad spans as you see fit...

**DoubleDee** · Mar 29, 2011 08:14

Originally Posted by dresden_phoenix

Just remember a basic GRAPHIC DESIGN rule, over emphasizing or over differentiating is the same as not differentiating at all. This actually works semantically as well if everything is is an h3 or an EM or STRONG... then nothing stands out either for for search engines.. but I digress.

You are right, and that is a problem of mine for which there is likely no cure?!

(Then again, have you never been to the circus as a child, and seen how they do the same eye-grabbing styling that I am guilty of?!)

If you must insist in making your content look like a tag cloud, us the same strategy: dedicate a segment of your style sheet to "styling spans" and then apply siad spans as you see fit...

It is a work in progress, and your points are as helpful as Rayzur's stying suggestions.

If I do keep to my evil ways, then at least Rayzur's code is cleaner than mine was.

Thanks guys!

Debbie

**Jonahsamuel** · Oct 18, 2012 07:30

I've used Prezi and if done correctly it's very cool, and visually friendly for the people you're presenting to. if used incorrectly it can be very nauseating for teh people who are trying to follow the show. ?
TIP - while at first the transitions look fun and you want to use as many as possible, keep it to a minimum

User Tag List

Thread: Strategy for styling disparate content

Thread Tools

Display

Strategy for styling disparate content

Bookmarks

Bookmarks

Posting Permissions