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..
@hannon33 - please use the Code button when entering code into your post. Simply select the code that you've typed (or pasted) and then click the 'Code' button (it's right beside 'Quote').
hannon33, you dear poor soul... You're taking an online course to learn HTML and CSS? Why in the world would you do that? There are plenty of websites that you can learn this stuff from for free! I am sure we can all give you some links to such resources.
Also, just to point this out as a helpful gesture... Don't use auto margins like this and please use the hexidecimal code for the color you want to use. If you are going to set the margins and use color, set them like this:
In before ranting! I learned html and css here since it has a really easy, almost linear learning curve (not even sure what that means). However many consider it a bad resource, I think mainly because of this. I still don't regret using w3schools, though they should look at w3fools and fix where they are wrong... can't be any easier than that.
im putting that aside for now.. tryna fix errors the validation shows me.. it says no space between attributes so i remove the space and put it ; and it just messes up everything
I agree, I shouldn't have suggested w3schools, my bad. However, I would still look into the other two I posted and as Dillon said, I would definitely take a long walk-through ccs-tricks, because there is a lot here that will be helpful in your learning experience. Chris has a very awesome way of explaining things and contributes a lot to the industry.
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!
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:
Or, if you're using the wonderful world of SASS/SCSS you can do something like this:
so if my main page is index.html.. in the source for index.html rather then just doing it would say ?
or
ok and what is .other-selector?
That's just giving you an example of how you would use it in CSS.
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?
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.
when ever i add it seems to cancel out my javascript css..
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.
i have this on the site:
and In the css file i am trying to have them centered on the page in Italic.
with the bottom code im trying to edit the background color of that page and have the links centered
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:
But like I said, these are super basic things that are covered early on in any tutorial on CSS and HTML.
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..
Well that's no good! This forum is all about learning. Just make sure you don't get too ahead of yourself!
http://learn.shayhowe.com/html-css/
Everything you need to know.
i have also embeded a song into the website,
how do i center this in the middle of the page using CSS? i tried what i thought but it did not seem to work
@hannon33 - please use the Code button when entering code into your post. Simply select the code that you've typed (or pasted) and then click the 'Code' button (it's right beside 'Quote').
Please don't.
hannon33, you dear poor soul... You're taking an online course to learn HTML and CSS? Why in the world would you do that? There are plenty of websites that you can learn this stuff from for free! I am sure we can all give you some links to such resources.
Here are a few:
http://www.webmonkey.com/
http://w3schools.com/
http://www.html.net/
Please, don't jump ahead of yourself!
This:
Should be this:
or
Also, just to point this out as a helpful gesture... Don't use auto margins like this and please use the hexidecimal code for the color you want to use. If you are going to set the margins and use color, set them like this:
In before ranting! I learned html and css here since it has a really easy, almost linear learning curve (not even sure what that means). However many consider it a bad resource, I think mainly because of this. I still don't regret using w3schools, though they should look at w3fools and fix where they are wrong... can't be any easier than that.
Please don't recommand W3Schools. Reason given by Dillon.
Please don't overlook the link I provided in my earlier post. It's by far the most comprehensive guide out there.
Enough self-promotion, thank you!
Other than that...nice site.
I have zero affiliation with that site.
I'm only here to help.
whats wrong with code like this?
Technically there's nothing wrong with the code.
But you left out the context. Where in the HTML are you using the class of
.title2?Oops sorry I was thinking of another user.
Apologies.
No worries Paulie.
oh the title2 is one of the titles in the page, code worked though.. outcome is what i was going for..
i am getting this error though:
URI : mystyle.css 87 * Parse Error */ .morocco { background-image:url("moroccobackground.jpg"); background-repeat:no-repeat; background-size:2000px 1000px; }
my code: .morocco { background-image:url("moroccobackground.jpg"); background-repeat:no-repeat; background-size:2000px 1000px;
every other page is working fine and im following the same syntax.
background-image:url("moroccobackground.jpg"); background-repeat:no-repeat; background-size:2000px 1000px;
nvm, it fixed itself...somehow...
one thing which is aggrivating me is I cannot get my mp3 player centered on the page.
CSS:
Try adding
display:blockto your .mp3 class.He's writing up a post now and will be posting it here soon, I bet.
lol
You might think that...I couldn't possibly comment.
naw the block didnt work..
@hannon33, try giving
.mp3a width in the css too.It did when I tested it in Codepen so perhaps there is something else affecting /over-riding it.
im putting that aside for now.. tryna fix errors the validation shows me.. it says no space between attributes so i remove the space and put it ; and it just messes up everything
Can you give us a link to a live site...we're kind of working in the dark here.
Please..we don't ask much but some semblance of proper English would be nice.
i just messed around and got it all cleaned up.. no more errors in validation.
now im back to centering that mp3... is it better to use
<audio>or<embed>?i like the look of
<audio>better but when the page loads the "audio bar" disappears..I could be wrong but align isn't a CSS property (AFAIK) but rather an attribute so
<embed align="middle" class="mp3" height="50" width="400" src="Bob%20Marley%20-%20Buffalo%20Soldier.mp3">might work
You are correct!
Also, I think with the audio element you have to set a MIME type, which will help the browser identify the media correctly.
http://html5doctor.com/html5-audio-the-state-of-play/
I agree, I shouldn't have suggested w3schools, my bad. However, I would still look into the other two I posted and as Dillon said, I would definitely take a long walk-through ccs-tricks, because there is a lot here that will be helpful in your learning experience. Chris has a very awesome way of explaining things and contributes a lot to the industry.
The power of a simple Google search! :)
hmmm weird.. i did this:
still is on the left hand side not the middle
Like I said...without a live site we can inspect...we're working in the dark.
Hannon, please please please change your approach to naming files...
Instead of naming the file 'Bob Marley - Buffalo Soldier.mp3, try naming it something like bob-marley-buffalo-soldier.mp3
Just a suggestion, but it is best to get used to that type of naming convention, using '-' or '_' as a separator, rather than using spaces.