Grow your CSS skills. Land your dream job.

Multiple Pages, 1 CSS File

  • # March 20, 2013 at 4:08 pm

    Hey guys so I am new and learning HTML and CSS now. I am use to incline css but I am building a website which has 5 webpages incorporated into it and I need to use 1 external CSS file to make each of the 5 html pages look different but I am having a hard time figuring out how to do this.. I was hoping you guys can help..

    ThankS!

    # March 20, 2013 at 4:23 pm

    Make sure to give each different template a unique body class:

    Then in your CSS you can override default styles *or* add styles specific to a page by going:

    .page-name .other-selector { /* styles */ }

    .page-name .parent .child { /* styles */ }

    Or, if you’re using the wonderful world of SASS/SCSS you can do something like this:

    .page-name {

    .other-selector { /* styles */ }

    .parent p { /* styles */ }

    }

    # March 20, 2013 at 4:30 pm

    so if my main page is index.html.. in the source for index.html rather then just doing it would say ?

    # March 20, 2013 at 4:33 pm

    or

    # March 20, 2013 at 4:39 pm

    ok and what is .other-selector?

    # March 20, 2013 at 4:45 pm

    That’s just giving you an example of how you would use it in CSS.

    # March 20, 2013 at 4:56 pm

    ok ill try it out.. now if im using a javascript on the same page can i just add the .css for the javascript into the .css for the page?

    # March 20, 2013 at 5:02 pm

    Yes… although I’m not 100% sure what you’re asking. You should be trying to keep all over your CSS in a single file.

    # March 20, 2013 at 5:18 pm

    when ever i add it seems to cancel out my javascript css..

    #smenu {background-color:#ffffff; text-align:center; border:1px solid #000099; z-Index:999; visibility:hidden; position:absolute; top:100px; left:-225px; width:250px;}
    #sleft {width:220px; float:left;}
    #sright {width:20px; float:right;}
    #sright a:link{text-decoration:none; color:#999999; font-weight:bold; font-family:arial, helvetica, sans-serif;}
    #sright a:visited{text-decoration:none; color:#999999; font-weight:bold; font-family:arial, helvetica, sans-serif;}
    #sright a:active{text-decoration:none; color:#999999; font-weight:bold; font-family:arial, helvetica, sans-serif;}
    #sright a:hover{text-decoration:none; color:#999999; font-weight:bold; font-family:arial, helvetica, sans-serif;}

    #hovmenu {background-color:#ffffff;border: 1px solid #000000; text-align:center;z-Index:999; visibility:hidden; position:absolute; width:200px;}
    #menu {display:none;}

    .index {
    body
    margin-left:auto;
    margin-right:auto;
    width: 400px;
    background: gray;
    }

    # March 20, 2013 at 5:33 pm

    That’s probably because it’s throwing an error. I don’t know what you’re trying to do with the bottom code there.

    It sounds like you really need to take a step back and try learning some CSS basics before jumping into JS.

    # March 20, 2013 at 5:33 pm

    i have this on the site:

    Morocco

    North Korea

    United Kingdom

    Guatemala

    Argentina

    What Are Your Favorite Countries?

    and In the css file i am trying to have them centered on the page in Italic.

    # March 20, 2013 at 5:35 pm

    with the bottom code im trying to edit the background color of that page and have the links centered

    # March 20, 2013 at 5:37 pm

    For starters, if you are listing items like that, you should probably use an unordered list:

    If you want the text centered, you could do this with your CSS:

    .country-list {
    list-style: none;
    text-align: center;
    }

    But like I said, these are *super* basic things that are covered early on in any tutorial on CSS and HTML.

    # March 20, 2013 at 5:49 pm

    im taking an online course.. teacher is a douche bag and never replies to emails so i more or less have to fend for myself to figure this stuff out..

    # March 20, 2013 at 6:05 pm

    Well that’s no good! This forum is all about learning. Just make sure you don’t get too ahead of yourself!

Viewing 15 posts - 1 through 15 (of 78 total)

You must be logged in to reply to this topic.

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