CSS Question

[fizzbird]

Tweet

I am in the process of doing a redesign and everything is completely f****d up which makes this vey difficult.

So, I was wondering, for future reference, is it possible to have a template of your basic page in the CSS file?

I use a basic table layout and I know I can set all the fundamentals of formatting in the style sheet but can I say, for example, that a certain cell contains the logo image and another certain cell contains a link bar, etc?

I kind of understand the concept of Identifying specific tags but not sure how that would be written in css for a template page?

[tbp]

Well if you give your logo cell an id, then you can get the stylesheet to put an image in that element.

However, the whole point of CSS is that the content and styling is kept separate.

You would make the template in HTML, and the styling in the CSS stylesheet. By changing the CSS you can make very different looking pages.

Its difficult to explain, but have a look at the link below to get the idea:

css Zen Garden: The Beauty in CSS Design

Its the same content, just the stylesheet changes each time

[zinc]

...can I say, for example, that a certain cell contains the logo image and another certain cell contains a link bar, etc?

No. CSS is only used to define element styles. It can't be used dynamically like you are asking. However, if you were to define 2 link bar styles in your CSS (i.e. linkBarA & linkBarB), set the background images, fonts etc etc and couple your template up with a scripting language (ASP, PHP, C# etc etc) then you could dynamically select the appropriate style.

Hope this helps.

[moredial]

You can use css with pseudo elements to add text.

When you start doing too many 'non-standard' things in css you are relying on all browsers displaying the css the same. With some browsers being (almost) css1 compliant and others a mix of css2 and css3 compliant, you really take your chances with anything that is central to the overall layout.
Even something as simple as a background image can be placed differently by different browsers.

The method is to create your page using simple html and text. Then look at it and create css elements which give the visual appearance the bells and whistles.

[fizzbird]

Thanks guys