Multiple Pages, 1 CSS File

[hannon33]

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!

[TheDoc]

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

}

[hannon33]

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

[TheDoc]

or

[hannon33]

ok and what is .other-selector?

[TheDoc]

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

[hannon33]

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?

[TheDoc]

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.

[hannon33]

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

[TheDoc]

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.

[hannon33]

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.

[hannon33]

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

[TheDoc]

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

• Morocco
• North Korea
• United Kingdom
• Guatemala

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.

[hannon33]

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

[TheDoc]

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

[Author]

Posts