css wp question

**billbenson** · 06-24-2009 07:43 AM

I have plaid around with wp a bit, but not much. I installed it last night on a domain I'm not using so a friend who wants to learn to write web sites can play with it. I also want to use it on some other sites. Two questions relating to css.

For my friend who doesn't know anything about web design, is there a way to change font sizes in the non code editor or is he going to need to add classes or id's in the html mode?

VG, how do you work with the css when writing a page? By that; do you keep a cheat sheet around with the classes and and what they do (h1 12px white text class is X) or do you keep the style sheet open all the time (kind of clumbsy to always be scanning through a css sheet). Do you tile the page? Since you primarily write in code which is what I do, I was curious how you work when you need to at least know what the classes are as you are writing a page. If you are dealing with a bunch of sites its unlikely that all the classes are the same on every site.

**vangogh** · 06-24-2009 03:37 PM

If the sites are ones I've developed then it's likely that the html structure, the classes, the ids, etc are the same or similar since I try to be consistent across sites. If it's a site I didn't develop then yes I do keep looking through the files. My editor allows for tabbed pages so I probably have the css file and any other relevant files open at the same time. If the previous developer knew their stuff it's usually pretty easy to find what needs to be changed. If not then it's going back and forth in files to find what needs to be changed.

I also use the developer tools built in or added to the browsers I use to find things quickly. For FF there's an extension called CSS Viewer (css view?) which lets you mouse over parts of the page as you view it in your browser and it reveals which html element and class/id you're viewing.

Also since I've been doing this now for a few years it's not too hard for me to find what I need in the files. It becomes second nature after awhile.

For your friend he has to change things in the code. There's WYSIWYG unless someone built a plugin. He can download an editor and ftp program or use the file editor built into the WP admin.

**billbenson** · 06-24-2009 08:33 PM

I'll take a look at the FF plugin. That sounds helpful.

Thanks.

**vangogh** · 06-24-2009 08:47 PM

If you have an hour or two look through all the developer plugins. The web developer toolbar is my favorite and another great one is Firebug, which also has many other extensions for debugging that work on top of it.

And while I'm at it here's the link to CSS Viewer.

There are many, many more useful extensions depending on what works best for you. Do a search for excel while you're there. You'll find some extensions like Table2Clipboard, which lets you copy table data from a web page and more easily paste it into Excel.

**billbenson** · 06-24-2009 09:43 PM

Funny, I had a couple of those already installed but I forgot about them. Particularly Firebug. I also have colorzilla installed which is an eyedropper to see the color on a site. Thats nice for when you see a site with a color scheme you like, you can grab it. It's not real accurate, but helpful at times.

**vangogh** · 06-24-2009 10:15 PM

I have colorzilla installed and another extension called measure it, which lets you measure how many px things are on the page.

**billbenson** · 07-21-2009 03:37 AM

fonts, inheritance and stuff like that

In selecting font sizes, it was my impression that a good way to control page fonts in css is to state a size in the body tag (say 12px). After that use em or percentages. em's seem to be more popular.

My page source starts out like:

<body>
<div id="wrapper">

Neither the body or wrapper have any kind of font size setting. The rest of the page uses em's with the exception of padding for individual items.

In the css sheet I tried font-size: 5px; for the body. It did not affect anything. In the wrapper it affected the page fonts as would be expected.

I'm assuming this is an inheritance issue. So why wouldn't the body tag have any effect. Also, since I couldn't find any default base size px, em's... Does the browser assume some default. I was using FF. It is my understanding that em's are strictly a ratio of the parent size?

__________________________________________-
I take that back, both the body and wrapper work. Had a typo. The body appears to be the parent of "wrapper" which makes sense.

That still leaves one question though. If you don't declare a size in any parents in px and use em throughout the rest of the css, what is it going to use for the default size? Is it browser dependent?

**vangogh** · 07-21-2009 05:28 AM

I had a whole answer about why the font-size didn't work on the body, but now I see you had a typo, which was one of the possibilities I was going to suggest.

In the past ems were recommended over px because with px you couldn't resize the text in IE. I think IE8 fixed that, but IE7 may still need the relative measurements.

It's up to the browser and maybe the individual changing the browser settings for the default size. 16px is the common default, though it's possible browsers can deviate from that. Don't hold me to it, but I think all browsers may default to 16px. If not all then most.

You were right that there's an inheritance thing and it can get a little confusing. Say you have

HTML Code:

<div id="wrap1">
 <div id="wrap2">
  <div id="wrap3">
  </div>
 </div>
</div>

and say you set the body to be 16px.

Now if you give the wrap1 div a font-size of 0.75em it should be 12px. wrap2 and wrap3 would also be at 12px due to inheritance. If you then wanted to change wrap2 to be 8px you might think to set it to 0.5em since 8 is half of 16, but you'd really need to set it to 0.67em since you'd need 8/12.

One trick I've seen is to set your body to 0.625em which would be 10px (assuming a 16px default) That makes your ems easier to set later since you're dividing by 10.

If you also set the widths in your layout to use em measurements you can get a nice fluid design that expands and contracts as the text is resized.

**billbenson** · 07-21-2009 05:32 AM

Thanks, one of these days I may actually figure this stuff out.

**vangogh** · 07-21-2009 07:12 AM

It really does get easier. You do a few things and one doesn't work so you spend a few frustrating hours trying to figure out why. Once you figure it out you never make the mistake again and it's one less thing to worry about.

If there's anything you're having trouble with let me know. I'm always looking for ideas for blog posts. If there's anything you'd like me to write a tutorial about just say the word.

Thread: css wp question

LinkBack

Thread Tools

css wp question

Bookmarks

Bookmarks

Posting Permissions