WordPress.com

1. thepoliticalsurveyor
   Member
   Nov 22, 2010, 9:48 PM

   Hi all,

   I have a very basic knowledge of XHTML and CSS and am looking to develop a blog using the sandbox theme. However, I don't understand how to use the CSS editor when it seems the HTML markup is not visible. Lets say that I have a paragraph that looks like this <p>this paragraph is a message</p> and that I want this paragraph to be bold, italic, and have the comic sans MS font. In order to do this I would change the paragraph to read, <p id="message"> This paragraph is a message</p>. Then, I would go into the and create a <style type="text/css"> style sheet. In this style sheet I would add,

   #message {
   font: bold Comic Sans MS;
   }

   So, my question is, how do I view the HTML markup to be able to place id's so that the style sheet knows what to manipulate? How does this work?

2. hallluke
   Member
   Nov 22, 2010, 10:43 PM

   When you are making a post or a page you can switch from the visual editor to the HTML editor, there are tabs at the top-right of the text entry box, then you can give HTML elements whatever classes and IDs you like. I find it really useful using Firefox with the Firebug add-on for viewing and testing CSS. This way you don't have to keep saving and (pre-)viewing your page or post.

3. thepoliticalsurveyor
   Member
   Nov 22, 2010, 11:35 PM

   Thank you. But what if I want to change something like the site title, what would I do for an id in that case? Is there some type of class system?

4. thesacredpath
   Staff
   Nov 23, 2010, 12:47 AM

   While on your blog main page, all you have to do is do a "view source" from within your browser (on the view menu) and it will show all the HTML for the page.

   As hallluke suggests, using Firebug makes finding classes and ID's for page elements a breeze and even allows you to try changes in real-time.

5. thepoliticalsurveyor
   Member
   Nov 23, 2010, 5:47 AM

   Thank you! Firebug is awesome. It even highlights what the HTML code refers to on the website which is impressive. Very helpful.

6. thesacredpath
   Staff
   Nov 23, 2010, 6:16 AM

   I thought you might like that. It makes life so much easier. It can be tripped up in some cases such as text with hover effects. The hover stuff will appear, but then once you click on it from the "inspect" function, it will flip back to the base "no-hover" CSS, so sometimes you still have to do some ferreting, but still a very useful tool.

Topic Closed

This topic has been closed to new replies.