Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Multiple Pages, 1 CSS File

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 75 total)
  • Author
    Posts
  • #43532
    hannon33
    Member

    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!

    #129046
    TheDoc
    Member

    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 */ }

    }

    #129048
    hannon33
    Member

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

    #129049
    TheDoc
    Member

    or

    #129051
    hannon33
    Member

    ok and what is .other-selector?

    #129052
    TheDoc
    Member

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

    #129054
    hannon33
    Member

    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?

    #129056
    TheDoc
    Member

    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.

    #129057
    hannon33
    Member

    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;
    }

    #129059
    TheDoc
    Member

    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.

    #129060
    hannon33
    Member

    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.

    #129061
    hannon33
    Member

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

    #129062
    TheDoc
    Member

    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.

    #129064
    hannon33
    Member

    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..

    #129065
    TheDoc
    Member

    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 75 total)
  • The forum ‘CSS’ is closed to new topics and replies.