Support Forum » Style Master

Glossary of CSS selectors?

(5 posts)

  1. psy
    Member

    Hi:

    I am trying to design a WordPress blog, using a basic WordPress theme (Sandbox) as a starting point. I also purchased StyleMaster 4.6 and worked through the introductory StyleMaster tutorial.

    I’ve imported the Sandbox CSS stylesheet into StyleMaster. Now I’m having trouble figuring out what all of the selectors [if that’s the right term] actually do—I didn’t see any of these in the introductory StyleMaster tutorial. For example:

    div#menu,
    form#commentform span.required
    input#author,input#email,input#url,textarea#comment

    Not sure where to start to edit the attributes of these since I don’t know what each of these actually does.

    Is there a glossary somewhere that explains them?

    Or do I need to take the advanced CSS course to even begin to work with these?

    Suggestions?

    Thanks.

    Posted: 1 year #

  2. b15fliptop
    Member

    It's fairly simple to figure out, if you have a basic understanding of CSS.

    The pound sign (#) signifies an id, so div#menu selects a div with the id "menu".

    A period (.) signifies a class, so span.required selects a span with the class "required".

    Your second example shows a more specific selector, which will apply whatever rules you write for it to a span with the class "required" ONLY if it's within a form with the id "commentform".

    By comma-separating a list of selectors, like your last example, you will apply whatever CSS rules you write to each of the selectors in the list.

    Take a look at the source code for your pages to see where these classes and id's are assigned. Or better yet, since you have StyleMaster, drag a page of your blog to the preview window in StyleMaster and then right-click an element and select "Suggest Selectors" or "New Matching Statement" to help you pick the right selector.

    Hope this helps!

    Posted: 1 year #

  3. guyleech

    Hey Psy,

    The included tutorial in 4.6 isn't really comprehensive (as you've discovered) - you'd be much better off getting an in-depth tutorial on CSS to get you started. You can get a copy of our CSS Guide, which has sections on how to use Style Master, as well as on CSS, or there are lots of good online resources for learning CSS.

    Posted: 1 year #

  4. psy
    Member

    Ok, thanks for your replies. Sounds like I may need more tutorials since I've dragged in the source code from my blog and right clicked some of the elements, but still don't know what they mean.

    Posted: 1 year #

  5. Storyman
    Member

    PSY,

    If you don't have a local server set up on your system, then open Sandbox's stylesheet with SM. On the menu bar click Preview-->Manage Preview Documents-->Online (tab). Insert the site's URL, then click the Add URL button. Finally, select the newly added URL and click OK.

    Your web page should appear in the preview window. On occasion you'll need to click the refresh button, which is to the bottom right of the preview window and looks like green spinning arrows.

    Rule #1. After you think you're CSS looks like you want preview it in FireFox. ALWAYS test against FF. FF is actually more CSS compliant than IE, but all the CSS editors use IE to show the preview.

    Posted: 1 year #

RSS feed for this topic

Reply

You must log in to post.

0.054 - 9 queries