PrateekSaxena Posted March 17, 2007 Share Posted March 17, 2007 Hi,I have a heading like "Counter Strike : First Person Shooter". Now I want the "Counter Strike" word to be in black in the "First Person Shooter" part to be in blue. How do I do this? Is there some Pseudo class or something do this?? Link to comment Share on other sites More sharing options...
Nim199 Posted March 17, 2007 Share Posted March 17, 2007 Hi,I have a heading like "Counter Strike : First Person Shooter". Now I want the "Counter Strike" word to be in black in the "First Person Shooter" part to be in blue. How do I do this? Is there some Pseudo class or something do this??Try this:<head><style type="text/css>h1.cs {color: black}h1.fps {color: blue}</style></head><body><h1 class="cs">Counter Strike:</h1><h1 class="fps">First Person Shooter</h1></body> Overwise try the "span style" method. Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 17, 2007 Author Share Posted March 17, 2007 but wouldn't that make the other h1 come in the other line?? Link to comment Share on other sites More sharing options...
Nim199 Posted March 17, 2007 Share Posted March 17, 2007 No, becasue it only formats the H1 with the class set to "cs" or "fts", and I have closed the tag. Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 17, 2007 Author Share Posted March 17, 2007 it stills comes in two lines... Link to comment Share on other sites More sharing options...
Nim199 Posted March 17, 2007 Share Posted March 17, 2007 try this then: <head><style type="text/css>h1.cs {color: black}h1.fps {color: blue}</style></head><body><h1 class="cs">Text<h1 class="fps">Text2</h1></body> Link to comment Share on other sites More sharing options...
Nim199 Posted March 17, 2007 Share Posted March 17, 2007 The only other way I can think of is by using the font tag in HTML. Link to comment Share on other sites More sharing options...
Anders Moen Posted March 17, 2007 Share Posted March 17, 2007 Nope, it's not Fermat. You can use <head><style type="text/css>h1.cs { color: black; float: left; }h1.fps { color: blue; float: left; }</style></head><body><h1 class="cs">Text</h1><h1 class="fps">Text2</h1></body> Link to comment Share on other sites More sharing options...
Nim199 Posted March 17, 2007 Share Posted March 17, 2007 Another way might be to use the Table Row tag. Link to comment Share on other sites More sharing options...
Kevin M Posted March 17, 2007 Share Posted March 17, 2007 Couldn't you use a span tag? Font tags are deprecated in XHTML. Try this maybe: <html><head><style type="text/css">h1 {color: #000; }.color2 {color: #HEXCODE; }</style></head><body><h1>Counter Srtike : <span class="color2">First Person Shooter</span></h1></body></html> I think you can put span elements inside of heading elements. Link to comment Share on other sites More sharing options...
Anders Moen Posted March 17, 2007 Share Posted March 17, 2007 Like I said, you can use float: left; on the h1 classes: <head><style type="text/css>h1.cs { color: black; float: left; }h1.fps { color: blue; float: left; }</style></head><body><h1 class="cs">Text</h1><h1 class="fps">Text2</h1></body> Link to comment Share on other sites More sharing options...
Nim199 Posted March 17, 2007 Share Posted March 17, 2007 Couldn't you use a span tag? Font tags are deprecated in XHTML. Try this maybe:<html><head><style type="text/css">h1 {color: #000; }.color2 {color: #HEXCODE; }</style></head><body><h1>Counter Srtike : <span class="color2">First Person Shooter</span></h1></body></html> I think you can put span elements inside of heading elements. I said that above. Link to comment Share on other sites More sharing options...
Nim199 Posted March 17, 2007 Share Posted March 17, 2007 Couldn't you use a span tag? Font tags are deprecated in XHTML. Try this maybe:<html><head><style type="text/css">h1 {color: #000; }.color2 {color: #HEXCODE; }</style></head><body><h1>Counter Srtike : <span class="color2">First Person Shooter</span></h1></body></html> I think you can put span elements inside of heading elements. I said that above. Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 17, 2007 Author Share Posted March 17, 2007 Like I said, you can use float: left; on the h1 classes:<head><style type="text/css>h1.cs { color: black; float: left; }h1.fps { color: blue; float: left; }</style></head><body><h1 class="cs">Text</h1><h1 class="fps">Text2</h1></body> Thanks andersmoen! Quite obviously I wasn't going to use FONT as I need to write XHTML 1.0 Strict. Your code worked perfectly except one thing that in the style tag you forgot to close the quotes and so did everyone else who replied to this post :)Thanks again Link to comment Share on other sites More sharing options...
ste Posted March 20, 2007 Share Posted March 20, 2007 it would be better to use the span tag the way Kevin M suggests. simply because using 2 seperate h1 tags one after another will be seen as an attempt to inflate a page's ranking by Google and you would be penalised for the document not being well structured. Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 20, 2007 Author Share Posted March 20, 2007 I dont like SPAN :)And i dont know what it is either Link to comment Share on other sites More sharing options...
roondog Posted March 20, 2007 Share Posted March 20, 2007 Prateek:spans are used for applying styles to sections of text only. A div contains other divs, imgs, ps etc. but is you are changing just a small portion of text within some other text use a span. THis is my understanding anyway. i.e if you have a paragraph and you want to style a sentence in the middle you would use a span. Link to comment Share on other sites More sharing options...
ste Posted March 20, 2007 Share Posted March 20, 2007 Roondogs pretty much right. spans are inline elements whereas divs are block. block-level elements generally start a new line unless you float them. that is that block-level elements are renderedwith an implicit line break before and after, while inline-level elements are rendered where they occur in the text flow. Link to comment Share on other sites More sharing options...
vchris Posted March 20, 2007 Share Posted March 20, 2007 I've done this effect before and I used a span. Link to comment Share on other sites More sharing options...
croatiankid Posted March 20, 2007 Share Posted March 20, 2007 You should use a SPAN inside one H1 because SPANs are semantically empty, while H1 is not, as said by the w3c. Additional info. Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 21, 2007 Author Share Posted March 21, 2007 Ok...<SPAN> it is.Thanks a lot everyone and thanks croatiankid for the links! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now