Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS - Separation of Color and Position

Tags:

I'm just wondering what others do in this respect:

Do you try to keep positional CSS (layout) separate from color/flavor CSS (color, background-color, background-images, font-size and family) ?

Use two stylesheets? Combine two stylesheets server-side? Abstraction layer for the CSS? or you don't even try?

I know sometimes after working on the same web project for six months I can usually live with the positional CSS but end up wanting to change the colors/images.

like image 643
BuddyJoe Avatar asked Jan 30 '09 15:01

BuddyJoe


People also ask

What are the methods when inserting a color in a CSS rule?

The most common way to specify colors in CSS is to use their hexadecimal (or hex) values. Hex values are actually just a different way to represent RGB values. Instead of using three numbers between 0 and 255, you use six hexadecimal numbers. Hex numbers can be 0-9 and A-F.

How do I make text a different color in CSS?

Simply add the appropriate CSS selector and define the color property with the value you want. For example, say you want to change the color of all paragraphs on your site to navy. Then you'd add p {color: #000080; } to the head section of your HTML file.

How do you add a block of color in CSS?

To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.

What is foreground color in CSS?

The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color .


1 Answers

I tend to keep all the CSS together, without separating "color styles" from "positional styles" or "layout styles". I find that when I often try to debug a specific "module" it's easier to have all the CSS rules applied to one selector, and not spread out over the style sheet.

However, I do suggest you read Creating Sexy Stylesheets over at thinkvitamin.com. One thing I do is list the rules in a certain order everytime, so I know within the declaration block where to find what I want.

More info at Jina Bolton's http://creatingsexystylesheets.com/

like image 92
Mark W Avatar answered Feb 08 '23 02:02

Mark W