.css Problems 1

[bryanbayfield]

OK guys - go easy on me please!

I'm trying to learn how to do CSS - it doesn't seem to be that difficult, but I seem to be missing the big picture somehow.

An example would be this css file I created (nothing complex I know):

h1 {font-family:"Arial", sans-serif; font-size:20pt; color:purple; font-variant:normal};
h2 {font-family:"Arial", sans-serif; font-size:18pt; color:purple; font-variant:normal};
h3 {font-family:"Arial", sans-serif; font-size:16pt; color:purple; font-variant:normal};
h4 {font-family:"Arial", sans-serif; font-size:14pt; color:purple; font-variant:normal};
p {font-family:"Arial", sans-serif; text-align:justify; color:black; font-variant:normal}
td.heading {font-family:"Arial", sans-serif; text-align:left; color:red; font-variant:small-caps;}
td.info {font-family:"Arial", sans-serif; text-align:justify; color:red; font-variant:normal;}
p {font-family:"Arial", sans-serif; text-align:justify; color:black; font-variant:normal}
div {font-family:"Arial", sans-serif; text-align:justify; color:black;}
body {background-color:rgb(153,215,224);}

I have a table with two columns, I specify class="heading" for the td tags that constitute the left column and class="info" for the right column. All info in teh table promptly comes up in "heading" style. What on Earth am I doing wrong?!

Another problem I've noticed is that if I just create a stylesheet with a p attribute and say a h1 attribute, IE doesn't like it. But if I have h1,2,3 elementsspecified (and html file only has those headings) as well as the p element then everything's hunky dory. Perplexing.

 

[gollyg]

Can't tell from your style sheet what is going on in your table - your method seems sound. Whenever you have this kind of problem it is best to simplify it - create a page with just the bare minimum (the table and the style defn). See if it works there. The problem is much easier to find and resolve on a small scale.

Another thing about CSS is inheritance - attributes are passed from the parent element to the child element in most cases. This means that you (in theory) only need to define common attributes such as your font in the body tag and it will be passed on, if you need to change the font change it at the element level using an overiding style. (check in multiple browsers because, like everything in web design, there are quirks).

Also, mutltiple defininitions can be defined using a comma delimiter. This may minimise your style definintions. eg

p, td, td.listing {font-family: arial}

will affect all these selectors.

A great place to keep up (and catch up) with CSS is A List Apart (

http://www.alistapart.com).

It gives comprehensive coverage of best practise using CSS.

Sorry I couldn't see what was going on in your style sheet, but watch out for your semi-colons. There are a couple outside your style definition that shouldn't be there (eg color: red}

 

[bryanbayfield]

Thanks for that. I'll try tidying it up after looking at that site.

Why does web design have to be so fiddly?! It all seems so simple looking at the theory ... !