Translate this HTML into CSS please?

Question

I'm trying to learn CSS for web design, but there I haven't found anything to lead me in the right direction in regards to formatting text mid-line.

I'm using the header tag in the html file for my css definitions. I can get all the customization I want for h1,h2, etc... and the

tag.

So, if I wanted every paragraph to have its own color, I'm fine. But if I want to highlight just like this is supposed to, I can't seem to, regardless if I try class or ID selectors.

Like I said, I know my problem isn't in the definition stage, because I can get it to work if I use the

operator. Maybe there is a better way to define it to get the effects I want? I mean, I don't always have to start a new line to get a new font effect, do I?

So, could someone redo the font color red thing above in css? If you feel my problem might be in defining them in { } 's , let me see that too.

Thanks.

Answer 1

Red Text Here

CSS:

.red {
font-color: red;
}

Answer 2

You will have to use a span element.

Answer 3

The issue may have to do with importance.

If you declare .red {color: red}
that will not show up as red if you have a
body #content #mainarea p {color: blue}

using !important will trump everything, but should really not be used lightly: .red {color: red !important}

the good and bad news is that inline classes trump class and div selectors, so text here will make it red, unless somewhere in your css you used !important.

Use inline styles VERY sparingly. They make your code much harder to update.

Also, consider using .error instead of .red - later if you want to change everything that is red to blue, your class selector choice will be confusing.

Answer 4

Just a nitpicking thing...

Depending on the purpose of the styling, it might be better to style an tag rather than .
It is an accessibility issue - is ignored by some browsers (page readers for example). If your purpose is to contextually highlight the word, won't do it.

Answer 5

Never use word to create an html page. It produces ugly code. Use notepad. You can see your changes by simply loading the html file in your browser, a program isn't necessary.

Answer 6

if you want to do it inline for just a phrase, use (and give the spans an ID, it overrides other IDs, classes, or tag styles, class doesn't override an ID setting in all browsers)

Ex.:

Answer 7

your text

★★ BEST HTML/XHTML/CSS REFERENCE ★★

◙ The best HTML/XHTML Reference

☞ http://www.w3schools.com/tags/

◙ The best Cascading Style Sheet Reference

☞ http://www.w3schools.com/css/css_reference.asp html

◙ Links to HTML/HTML related sites

☞ http://www.websitetips.com/html/

◙ Links to Cascading Style Sheet related sites

☞ http://www.websitetips.com/css/

◙ The best Cascading Style Sheet discussion email list

◙ http://www.css-discuss.org/

◙ Links to thousands of Cascding Style Sheet examples sites

☞ http://css-discuss.incutio.com/

◙ Css Filters

☞ http://www.centricle.com/ref/css/filters/


★★ BEST WEB DESIGN BOOKS ★★

◙ Read these books about html/xhtml/css.
http://www.google.com/search?num=100&hl=en&lr=&newwindow=1&safe=off&q=site%3Awww.oreilly.com+books+html+xhtml+css&btnG=Search

◙◙ More great books ◙◙

◙ css hacks and filters
☞ http://www.idest.com/csshacks

◙ CSS Anthology 101
☞ http://www.oreilly.com/catalog/0957921888/

◙ Read this CSS filters site
☞ http://www.centricle.com/ref/css/filters/

◙ Here is a really good css email list run by eric meyer
☞ http://www.css-discuss.com/

◙ Here are their CSS examples pages
☞ http://css-discuss.incutio.com/

◙ The best free HTML/XHTML/CSS editor with many plugins you can add to it for extra features.
☞ http://www.chami.com/html-kit/

◙ Don't use Microsoft Frontpage. It is just plain junk and very difficult for newcomers.

Answer 8

Hey man.

Here is a complete CSS tutorial web site
http://www.echoecho.com/css.htm

good luck

Answer 9

I'm still new to CSS, but this site: http://www.w3schools.com/css/default.asp is pretty useful. I think it could help you too... good luck finding your solution!

Answer 10

Text

or