Grouping CSS elements

Get Started
1

I’m trying to learn more CSS by doing, so I’m attempting to copy bits of CSS found elsewhere on the web which I like into my own stylesheet. The problem of course is that it also affects the rest of my styling as many of the classes and IDs are the same.

For instance, in my own stylesheet I have a DIV section I’ve called “faq_contents” and have found some CSS styling which I want to use, but only affecting that section of course. So how do I rewrite the classes/IDs used in the following example?:


#container {width: 820px; margin: 0 auto;}

#container h2 {padding: 5px; }

h3 {padding: 4px 10px; font-size: 10px; font-weight: normal;}

h3 a:hover, h3 a:active {color: blue; background: orange;}

h3 a:link, h3 a:visited {font-weight: normal; letter-spacing: 2px; display: block; color: #222;}

a:link, a:visited {color: #5275b4; font-weight: bold; outline: none;}

a:hover, a:active {color: blue;}
2

We’d really need to see the HTML and CSS you’re working with, in order to advise you. If you have a link to the page we can look at, that would be great. If not, post the code for the page in question here and we’ll be happy to help.

3

Thanks :slight_smile:
I thought it was something along the line of renaming say h3 {blahblah} (from the copied CSS tags) to h3#faq_content {blahblah} or to .faq_content h3 {blahblah} but I’m not really getting it to work and the whole page is now a complete mess.

So I decided to clean things up by stripping away all the additional code, and starting fresh again. The page has been uploaded here.
Next I’ve taken the navigation accordion and cleaned out the bits not relevant to the actual accordion and uploaded it here. My goal is to paste it into the orange DIV container on the right hand side without messing up the existing CSS styling of my page.
Finally there’s the FAQ accordion which I’ve also cleaned up and uploaded here. This accordion should be pasted into the main content DIV section (white area). I’ve also added comments with references to the original sources in the HTML and CSS in case you want to see the original, unedited code.

4

First, good luck on your CSS journey. It’ll be a ride. winks

First things first.

If you only type the element (called, in CSS, the selector) will select all elements (unless there is a more specific selector). An example of this would be ‘h3’.

A # sign selects an id. This can be set like <h3 id=“ID1”> in your HTML. An example of this would be h3#faq_content. IDs can only be used once, so developers usually drop the element and just put #blahblahblahname.

A dot (.) selects a class. An example of this would be .faq_content. You can define a class in HTML like <h3 class=“faq_content”>. To select it, you would type .faq_content in your css. Because classes can be used more than once, devs usually type elements in front of class selectors (if they only want it for that element). The code you put in (.faq_content h3) would say to the browser “Select all h3 elements that are childs of an element with class .faq_content”. But that’s for later.

I wouldn’t mess with a JavaScript or JQuery accordion yet, when you don’t even know much CSS. That’s for later.

I’d write more, but I have to go…now. If you need more help, post here (and I’m sure some nice people will answer you) or just pm me.

Good luck again!
~TehYoyo

5

If you want to use the accordion styles you already have, but prevent them from messing up any other page styles, you could prefix them all with #faq_content, so that they would only apply to elements inside that box.

E.g.

[COLOR="#FF0000"]#faq_content[/COLOR] ul {... styles here ...}
6

If I might elaborate, what that code is saying is “Give me all of the ul elements inside of the element that has an id of faq_content”.

In this way, you can make elaborate ‘trees’ of selectors. This is used for specificity.

~TehYoyo

7

Thanks all! That solved my problem.
I’ve also extracted the embedded Javascript and made it into a separate file -neater that way (in my opinion).
Here’s my updated layout). I have some additional CSS/HTML questions:

1. The accordion is too wide, but changing the “width” attribute also takes away the rounded corners. There’s loads of different solutions for rounded corners on the web, which has left me utterly confused. Obviously I want a flexible solution where I can experiment with various widths, so what do you suggest I do?

2. I’m concerned about usability and compatibility, so I’m wondering if there are common guidelines or suggestions for which widths and font sizes I should go for? At this stage I’m particularly concerned about the width of the accordion and text column in general.

3. When clicking on the orange “Item xx” or “Open all/close all” text a dotted outline appears around those areas (Firefox 3.6 on a Mac. It doesn’t happen when viewing with Safari). I read that I can simply add the following (line 73 of the CSS code):

#slideaccordion a, a:visited { color: #ff8c00; [B]outline: 0[/B]; text-decoration: none;}

… which works.
However, the original stylesheet for the accordion had the following:

#slideaccordion a, a:visited { color: #ff8c00; [B]outline: invert[/B]; text-decoration: none;}

Apart from the missing dotted outline I haven’t noticed any difference in the two. What exactly does the above line do?

4. My site must work even with Javascript disabled. Fortunately the accordion opens up when Javascript is turned off, but this site’s FAQ accordion also takes away the “Expand/collapse all” button.
The simplicity of a single dual-purpose “Expand/collapse all” button is also something to consider as opposed to my existing two-button solution. How can I implement these two features? (I tried looking up the source code but found it too complicated).

8

These days, the best option is to use border-radius: 10px (or whatever px/em etc you like) and let older browsers that don’t support this just get square corners. (There are also some vendor prefixes that help it to work on some older and even current browsers).

I’m concerned about usability and compatibility, so I’m wondering if there are common guidelines or suggestions for which widths and font sizes I should go for? At this stage I’m particularly concerned about the width of the accordion and text column in general.

It’s better to size elements in ems or % so that they are more flexible.

When clicking on the orange “Item xx” or “Open all/close all” text a dotted outline appears around those areas (Firefox 3.6 on a Mac. It doesn’t happen when viewing with Safari). I read that I can simply add the following … Apart from the missing dotted outline I haven’t noticed any difference in the two. What exactly does the above line do?

The outline property is for accessibility, as it helps users identify which element is in focus. So getting rid of it altogether is bad for accessibility. Another option is to make it the same color as the background (although I’m not sure if that’s any better than hiding it) or make it a nicer color that suits your design.

My site must work even with Javascript disabled. Fortunately the accordion opens up when Javascript is turned off, but this site’s FAQ accordion also takes away the “Expand/collapse all” button.

It’s important that your content is accessible with JS off–which is the case with this accordion, so that’s good. It is better that the button be removed too, as it’s useless with JS off.