Grow your CSS skills. Land your dream job.

Stupid basic CSS issues

  • # December 9, 2008 at 10:46 am

    ok guys I just don’t get it

    So I learn CSS in a web design class in dreamweaver. Everything was ok, it seemed I understood the basics of it.
    But I’m pulling my hair out.
    I attached a stylesheet to my site. it worked fine. Then I wanted to see what would happen if I had two style sheets, I wanted two sets of rules for the body text and a sub menu, it didn’t work and the text went to default. my teacher said, you can’t do that… OK I understand. So I went to fix it, I erased both style sheets and started over. well now I cannot get it to work. I go through the same steps, but something isn’t right. I cannot open the css inside dreamweaver to see the code. I try to start with a fresh page, will not work. I can see the .css document in my site
    but when I try to highlight text and apply the css from the property bar, it just isn’t there. WTF??
    Anyone?? I’m a creative, so no big words please

    Rob
    # December 9, 2008 at 12:05 pm

    Hey dude :) Dont worry I think most of us here are "creatives" so we dont know big words :)

    Ok, if you are using dreamweaver the "attach stylesheet" option is quite fool proof for putting the code in the right place, but if not just check that you have your stylesheet link within the <head> tags of your site.

    If you want to include multipul style sheets, you can do this, but if you are coding for example

    Code:
    p { padding:10px 10px; }

    and then

    Code:
    p { padding:0; }

    only one of those will apply… because the other will cancel it out. If you want to split up your CSS into sheets, which is a good idea for organisational issues, you should create one stylesheet that you use to link into your HTML, and then from within that stylesheet, link to the others.

    So if you call the main stylesheet "style.css", you can import all the other stylesheets you want.

    Code:
    @import “location/of/reset.css”;
    @import “location/of/typography.css”;
    @import “location/of/layout.css”;

    You see you now have all 3 style sheets linking into the one main "style.css" you have just made, and you only need to add one link to your head HTML.

    Remeber the "closer" your CSS is to your HTML the higher the priority. So if I style a tag within a document like this

    Code:

    that will overwrite any styling further up the document or in any linked style sheets.

    Sorry if these arnt the answers you want, but if you could show us your code it might be more useful that me trying to imagine whats gone wrong in my head :)

    Do you have the site live anywhere on the web? If not could you paste your code in here :)

    # December 12, 2008 at 3:55 pm
    Quote:
    Then I wanted to see what would happen if I had two style sheets, I wanted two sets of rules for the body text and a sub menu, it didn’t work and the text went to default. my teacher said, you can’t do that…

    Unless I’m misunderstanding, that’s incorrect. You can load as many stylesheets as you want against one page.

    Here’s how it works. By default, the styles from each stylesheet are combined and all applied to the page together. For example, if one stylesheet has "p {color: red;}" and another has "p {font-size: 16px;}", then the paragraph text on your page will be both 16px and red.

    If the same exact property is specified for the same style in multiple stylesheets, then the one that gets loaded last takes precedence. So if you have "p {color: red;}" in home.css and "p {color: blue;}" in default.css, and they’re loaded in this order…

    <link rel="stylesheet" type="text/css" href="css/home.css" />
    <link rel="stylesheet" type="text/css" href="css/default.css" />

    …then the paragraph text will be blue, because it will override the red from the earlier stylesheet.

    # January 12, 2009 at 4:49 pm

    Thanks Guys!
    I was able to fix the basic CSS sheet, and now I have a good idea on doing multiples, :D

    # January 12, 2009 at 9:03 pm

    Isn’t the purpose of multiple style sheets for things like "screen" "media" or "print"? Just curious or is there another scenario that would be a good reason to have multiple style sheets?

    # January 13, 2009 at 10:10 am
    "nicholasgomez" wrote:
    Isn’t the purpose of multiple style sheets for things like "screen" "media" or "print"? Just curious or is there another scenario that would be a good reason to have multiple style sheets?

    Yep, that’s one reason. But it’s also useful if, say, you have a big site where all the pages share the same basic styles (layout, fonts, etc.) but then one page (or group of pages) have their own unique styles on top of it that you don’t want shared with everything else.

    For example, maybe all your pages have the same layout, but then for a subset of them you want to use different colors and move some elements around (but otherwise keep the base structure). The best way to do this is to set up a standard stylesheet for all pages to share…

    Code:

    Then, for pages that need the extra changes, add in another stylesheet…

    Code:
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".