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…
[I]* 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.
[/I] 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 <p> 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.
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>
<small>
<b>
I would not use <u> though as it is deprecated. However where you are wanting that underline in your example I would just use and style a <b> 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 <p>, it’s just there to show how to style it by itself without conflicting with other <p> tags that may be in there.
<!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>
The only thing I might do different would be to replace that <span> with a <big>. Just adjust the CSS according to the tag name.
Then I would add a <br> tag in the H2, those two changes would keep the highlights pointed out with CSS turned off.
<div>
<h2>
Think that <big>Big Business</big> runs America??[COLOR=Blue]<br>[/COLOR]
<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 [COLOR=Blue]<big>[/COLOR]Small Business[COLOR=Blue]</big>[/COLOR] 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.
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…
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.
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
but will pick up on your code tomorrow.
