Changing Multiple Page Elements Using CSS

I was talking to one of my friends a few days ago and she mentioned that she needed help with one of her sites. While I was helping her she was in the process of trying out different color combinations on her WordPress theme to see what she liked best. She mentioned how it was taking a long time to change all the colors for certain areas.

Hearing this I knew right away that she wasn’t using this little trick that I am about to reveal to you. Simply put, it allows you to modify a bunch of different areas on your page all at the same time with one line of code.

As an example, you may have a stylesheet file that looks something along the lines of…

#navbar {

color: red;

background: blue;

}

.posttitle {

color: red;

font-size: 1.5em;

}

.link1 {

color: red;

text-decoration: underline;

}

Looking at the above code we can see that all 3 of those elements have the text displaying in the color red. Color: sets the color of the text in a page element such as a <DIV>, <P>, <TABLE> tags as well as others. So if you wanted to change the text color for all of those you would have to go to each one and change the color to a different one. My friend was having to do this for about 15 different things so you can imagine how tedious it was becoming.

Instead of doing it the long way, I told her how to do it the short way and lets just say she was very happy and relieved. Changing up our code to implement this in the CSS is quite easy and the following example will show you just exactly what I am talking about.

#navbar, .posttitle, .link1 {

color: red;

}

#navbar {

background: blue;

}

.posttitle {

font-size: 1.5em;

}

.link1 {

text-decoration: underline;

}

Ok, so did you see what was changed? At the very top I added all of the elements onto one line and gave them all a value of color: red;. This way, whenever I want to change the color of all of those elements all that I have to do is change the color in the first line and all of them will change.

All that you have to do is separate each element in the CSS with a comma and you are good to go!