Jump to content

Trying to understand CSS

Vihart

By Vihart
in CSS

Recommended Posts

Vihart Newbie

Vihart

Posted
Posted

Ive created a CSS style sheet and then i ..........I want to add the same style font to all of my other web pages but im really confusedi type a link on my other webpages to link to the CSS style sheet , is this right ? and then all the style coding can be done on the css style sheet only ? i find this all confusing because i look at the tutorial on w3schools and it shows how to create a css external style sheet but then theyve typed <body> and created a few paragraphs on the css style sheet :) making the impression that the css style sheet will be shown on the websiteso could someone please explain to me where what code goes and if i need to type any other css code (other than the link) onto a html webpage.i apologise for my ignorance.this is my html document and i want to use the style cursive for all my font(i tried it with the heading in the css style sheet below it)<html><head><link rel="stylesheet" type="text/css" href="mystyle.css" /><meta name="description" content="website for Japanese students who want to learn English" /><meta name="keywords" content="Japan, English, language, humming bird, learning" /><head><body><h1>Humming Bird</h>this is the css style sheet h1{font-family: cursive;}so what am i doing wrong

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

In the CSS file, you place only the CSS content, without <style> surrounding it.The <style> element is only for "internal" (a.k.a. "embedded") stylesheets.

Link to comment
Share on other sites
Vihart Newbie

Vihart

Posted
  • Author
Posted
In the CSS file, you place only the CSS content, without <style> surrounding it.The <style> element is only for "internal" (a.k.a. "embedded") stylesheets.
ok so i changed it without the style tags - still doesnt work :)
Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

Your HTML is invalid.1. You've closed an "</h>" element when you have "<h1>".2. you haven't closed the body and html.3. You don't have the required "title" element in the head.4. You're missing a DTD.Try it like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Humming Bird</title><link rel="stylesheet" type="text/css" href="mystyle.css" /><meta name="description" content="website for Japanese students who want to learn English" /><meta name="keywords" content="Japan, English, language, humming bird, learning" /><head><body><h1>Humming Bird</h1></body></html>

(I'm of course assuming that the CSS file is called "mystyle.css", and is in the same folder as the XHTML file?)Oh and... that's probably the critical bit... what's that "cursive" font? It's not in the web safe fonts, and quite frankly, I don't even have it among my system's fonts.

Link to comment
Share on other sites
Vihart Newbie

Vihart

Posted
  • Author
Posted
Your HTML is invalid.1. You've closed an "</h>" element when you have "<h1>".2. you haven't closed the body and html.3. You don't have the required "title" element in the head.4. You're missing a DTD.Try it like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Humming Bird</title><link rel="stylesheet" type="text/css" href="mystyle.css" /><meta name="description" content="website for Japanese students who want to learn English" /><meta name="keywords" content="Japan, English, language, humming bird, learning" /><head><body><h1>Humming Bird</h1></body></html>

(I'm of course assuming that the CSS file is called "mystyle.css", and is in the same folder as the XHTML file?)Oh and... that's probably the critical bit... what's that "cursive" font? It's not in the web safe fonts, and quite frankly, I don't even have it among my system's fonts.

i didnt know having a title was a requirement - i closed the head and body (i just sent you part of the code that may have been the problem) - i dont know what a DTD is - i thought(silly me) i could use the cursive font from html in CSS - so il have to settle for comic sans ms
Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

By "cursive", do you by any chance mean italic or bold? You can achieve those with "font-style" and "font-weight", respectively. Those are "effects", if you will, that are applied on a font. They (generally...) aren't the font itself.

Link to comment
Share on other sites
Vihart Newbie

Vihart

Posted
  • Author
Posted

okay so im completely confused on what my code should look like for both the html document and the CSS style sheet so html document should look like :<html><head><title>Humming Bird</title><link rel="stylesheet" type="text/css" href="mystyle.css" /><meta name="description" content="website for Japanese students who want to learn English" /><meta name="keywords" content="Japan, English, language, humming bird, learning" /><head><body><h1>hummingbird</h1></body></html>and the CSS external style sheet should look like :h1{font-family:"Comic Sans MS",sans serif;}but it still doesnt work :/no i found cursive on another website (cant remember which) it matched the one on the website im trying to copy (the wesite im trying to copy was done by iweb and i cant use that website on a search engine cos its suposed to be for private use only)http://www.hummingbird1.co.uksorry about all this

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

Try adding "color" to it, like:

h1{color: red;font-family:"Comic Sans MS",sans serif;}

Does the heading at least become red? If it doesn't, then perhaps your CSS file isn't exactly called "mystyle.css" and/or is not in the same folder.If it does, I think the problem may be in your generic declaration. It should be "sans-serif", with a dash, and not space. To copy&paste the W3Schools examples on the web safe fonts page:

h1{color: red;font-family: "Comic Sans MS", cursive, sans-serif;}

Link to comment
Share on other sites
Vihart Newbie

Vihart

Posted
  • Author
Posted
Try adding "color" to it, like:
h1{color: red;font-family:"Comic Sans MS",sans serif;}

Does the heading at least become red? If it doesn't, then perhaps your CSS file isn't exactly called "mystyle.css" and/or is not in the same folder.If it does, I think the problem may be in your generic declaration. It should be "sans-serif", with a dash, and not space. To copy&paste the W3Schools examples on the web safe fonts page:

h1{color: red;font-family: "Comic Sans MS", cursive, sans-serif;}

it isnt red - it is called mystyle.css - i looked at the properties - and the style sheet is in the exact same folder as the html document and i updated it to sans-serif with the dash but doesnt change anythingshall i post the full code for html document - and the css document just so you can see what is fully happening ? i do you want me to explain in more detail about the folders ?
Link to comment
Share on other sites
Vihart Newbie

Vihart

Posted
  • Author
Posted

Okay so folders first : documents are all found in one folder (CSS external style sheet is in the same folder as the html document (mainpage)Full CSS code :

h1{color: red;font-family:"Comic Sans MS",sans-serif;}

Full html (4.0) code :

<html><head><title>Humming Bird</title><link rel="stylesheet" type="text/css" href="mystyle.css" /><meta name="description" content="website for Japanese students who want to learn English" /><meta name="keywords" content="Japan, English, language, humming bird, learning" /><head><body><h1>hummingbird</h1><p style="text-align:center"><a href="About us.htm" target="_blank">About us</a>		<a href="Fee.htm" target="_blank">Fee</a>	   <a href="Kids.htm" target="_blank">Kids</a>	   <a href="Adult.htm" target="_blank">Adult</a>		<a href="Access.htm" target="_blank">Access</a><a href="Topics.htm" target="_blank">Topic's</a></p><img border="0" src="images/miopaint.jpg" alt="miopaint" width="304" height="228" /><p style="text-align:center">Hello Welcome to our English class! :D<br />Do you want to learn English with us ??<br />Join us and lets have some fun :D</p> <p style="text-align:center">英語が話せると世界が広がるって本当かな？<br />でも外国人の人と話す機会なんて、あまりないし。。。<br />英語の勉強って難しいし。。。　大体、どう勉強すればいいのかわからない。。。<br />ランナーにコーチが必要な様に、効率よく学ぼうと思えば良い先生が必要です。<br />何かを学ぶのに年齢制限はありません。<br />　やりたいと思ったときが、始めるときです！　　いつでも誰でも大歓迎 ☆　<br />イギリスからやって来た Carl 先生と一緒に、アルファベットから始めよう♪<p><p style="text-align:center"><i>English club<br />Humming Bird<i><p/><hr /><a href="http://www.hummingbird1.co.uk/humming_bird/top.html" target="_blank">Visit the Humming Bird website</a></body></html>

i used unicode so i could use the japanese language

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

On Windows, go to "Control Panel", and from there "Folder options" (switch to "Classic View" in XP, or "Large Icons" in Vista/7 to see "Folder options"). In the newly opened window, go to the "View" tab, look for the checkbox that says something like "Hide extensions of known file types", and uncheck it if it's checked.Look again in the folder with the HTML and CSS. Do you now see a ".txt" added to the file name? If you do, remove it.

Link to comment
Share on other sites
Vihart Newbie

Vihart

Posted
  • Author
Posted
On Windows, go to "Control Panel", and from there "Folder options" (switch to "Classic View" in XP, or "Large Icons" in Vista/7 to see "Folder options"). In the newly opened window, go to the "View" tab, look for the checkbox that says something like "Hide extensions of known file types", and uncheck it if it's checked.Look again in the folder with the HTML and CSS. Do you now see a ".txt" added to the file name? If you do, remove it.
okay did what you said - unchecked the checkbox i dont see .txt but i see .htm - so delete?like the file is now called mainpage.htm so delete the .htm?
Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

Errr... mainpage.htm is OK... but the CSS should be called EXACTLY "mystyle.css" (since that's what you're looking for in the HTML). If it's "mystyle.css.htm" or something, then remove whatever follows ".css".

Link to comment
Share on other sites
Vihart Newbie

Vihart

Posted
  • Author
Posted
Errr... mainpage.htm is OK... but the CSS should be called EXACTLY "mystyle.css". If it's "mystyle.css.htm" or something, then remove whatever follows ".css".
well the only thing that changed was the html files are now called eg mainpage.htm instead of mainpage CSS is the same as last timeshould i restart my computer or something just in case?i also have vista basic if that changes anything?
Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

I noticed one more thing in your HTML... you're not closing the head. You're instead reopening it (you're missing a "/"). And you again removed the DTD (the first line of the HTML I added - the DOCTYPE thing).For the sake of validation (it's not relevant to this issue), I've also altered the html element properly.Try it like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Humming Bird</title><link rel="stylesheet" type="text/css" href="mystyle.css" /><meta name="description" content="website for Japanese students who want to learn English" /><meta name="keywords" content="Japan, English, language, humming bird, learning" /></head><body><h1>Humming Bird</h1></body></html>

Link to comment
Share on other sites
Vihart Newbie

Vihart

Posted
  • Author
Posted
I noticed one more thing in your HTML... you're not closing the head. You're instead reopening it (you're missing a "/"). And you again removed the DTD (the first line of the HTML I added - the DOCTYPE thing).For the sake of validation (it's not relevant to this issue), I've also altered the html element properly.Try it like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Humming Bird</title><link rel="stylesheet" type="text/css" href="mystyle.css" /><meta name="description" content="website for Japanese students who want to learn English" /><meta name="keywords" content="Japan, English, language, humming bird, learning" /></head><body><h1>Humming Bird</h1></body></html>

ok wow il add all this - also i changed the css style comic sans to what it should be - i missed the cursive out :) h1{color: red;font-family:"Comic Sans MS", cursive, sans-serif;}but it still doesnt work - il try the new code you straightened out - huge thanks btw im learning so much im also sorry about this huge ######-up
Link to comment
Share on other sites
Vihart Newbie

Vihart

Posted
  • Author
Posted

this is the new html document now

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Humming Bird</title><link rel="stylesheet" type="text/css" href="mystyle.css" /><meta name="description" content="website for Japanese students who want to learn English" /><meta name="keywords" content="Japan, English, language, humming bird, learning" /></head><body><h1>hummingbird</h1><p style="text-align:center"><a href="About us.htm" target="_blank">About us</a>		<a href="Fee.htm" target="_blank">Fee</a>	   <a href="Kids.htm" target="_blank">Kids</a>	   <a href="Adult.htm" target="_blank">Adult</a>		<a href="Access.htm" target="_blank">Access</a><a href="Topics.htm" target="_blank">Topic's</a></p><img border="0" src="images/miopaint.jpg" alt="miopaint" width="304" height="228" /><p style="text-align:center">Hello Welcome to our English class! :D<br />Do you want to learn English with us ??<br />Join us and lets have some fun :D</p> <p style="text-align:center">英語が話せると世界が広がるって本当かな？<br />でも外国人の人と話す機会なんて、あまりないし。。。<br />英語の勉強って難しいし。。。　大体、どう勉強すればいいのかわからない。。。<br />ランナーにコーチが必要な様に、効率よく学ぼうと思えば良い先生が必要です。<br />何かを学ぶのに年齢制限はありません。<br />　やりたいと思ったときが、始めるときです！　　いつでも誰でも大歓迎 ☆　<br />イギリスからやって来た Carl 先生と一緒に、アルファベットから始めよう♪<p><p style="text-align:center"><i>English club<br />Humming Bird<i><p/><hr /><a href="http://www.hummingbird1.co.uk/humming_bird/top.html" target="_blank">Visit the Humming Bird website</a></body></html>

and the new CSS code 

h1{color: red;font-family:"Comic Sans MS", cursive, sans-serif;}

and it still doesnt work :/thanks again

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

It sounds like you aren't linking to the file correctly. Given the information, it seems to be the only possible explanation.Be sure that the file is named correctly, and that the path is correct as well.

Link to comment
Share on other sites
Vihart Newbie

Vihart

Posted
  • Author
Posted
It sounds like you aren't linking to the file correctly. Given the information, it seems to be the only possible explanation.Be sure that the file is named correctly, and that the path is correct as well.
The CSS external style sheet is called mystyle.css the code from the html document i want to "be styled" by the CSS external style sheet is : (html document code)
<link rel="stylesheet" type="text/css" href="mystyle.css" />

and the style (Comic Sans MS) doesnt work on the html document called mainpage.htm (CSS external style sheet) 

h1{color: red;font-family:"Comic Sans MS", cursive, sans-serif;}

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

why don't you try the simple example that boen_robot suggested. i.e.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Humming Bird</title><link rel="stylesheet" type="text/css" href="mystyle.css" /><meta name="description" content="website for Japanese students who want to learn English" /><meta name="keywords" content="Japan, English, language, humming bird, learning" /></head><body><h1>Humming Bird</h1></body></html>

and external CSS (in the same folder as the HTML document, titled mystyle.css)

h1{  color: red;}

short of that, you should post a live link like Ingolme suggested.

Link to comment
Share on other sites
Vihart Newbie

Vihart

Posted
  • Author
Posted

My CSS external style sheet doesnt work, ive had lots of help from "boen robot" which i give great thanks.My full CSS external syle sheet code is : 

h1{color: red;font-family:"Comic Sans MS", cursive, sans-serif;}

and my full html document code is :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Humming Bird</title><link rel="stylesheet" type="text/css" href="mystyle.css" /><meta name="description" content="website for Japanese students who want to learn English" /><meta name="keywords" content="Japan, English, language, humming bird, learning" /></head><body><h1>hummingbird</h1><p style="text-align:center"><a href="About us.htm" target="_blank">About us</a>		<a href="Fee.htm" target="_blank">Fee</a>	   <a href="Kids.htm" target="_blank">Kids</a>	   <a href="Adult.htm" target="_blank">Adult</a>		<a href="Access.htm" target="_blank">Access</a><a href="Topics.htm" target="_blank">Topic's</a></p><img border="0" src="images/miopaint.jpg" alt="miopaint" width="304" height="228" /><p style="text-align:center">Hello Welcome to our English class! :D<br />Do you want to learn English with us ??<br />Join us and lets have some fun :D</p> <p style="text-align:center">英語が話せると世界が広がるって本当かな？<br />でも外国人の人と話す機会なんて、あまりないし。。。<br />英語の勉強って難しいし。。。　大体、どう勉強すればいいのかわからない。。。<br />ランナーにコーチが必要な様に、効率よく学ぼうと思えば良い先生が必要です。<br />何かを学ぶのに年齢制限はありません。<br />　やりたいと思ったときが、始めるときです！　　いつでも誰でも大歓迎 ☆　<br />イギリスからやって来た Carl 先生と一緒に、アルファベットから始めよう♪<p><p style="text-align:center"><i>English club<br />Humming Bird<i><p/><hr /><a href="http://www.hummingbird1.co.uk/humming_bird/top.html" target="_blank">Visit the Humming Bird website</a></body></html>

The CSS external style sheet is called mystyle.css The CSS external style sheet does not change the style of my heading (h1) in my document sheet - the style of the font doesnt change and the colour of the text doesnt change. Im using vista basic if that makes any difference, the CSS external style sheet and the html document is in the same folder with the other html files (links- about,fee) Ive also done this thing that boen robot suggested : On Windows, go to "Control Panel", and from there "Folder options" (switch to "Classic View" in XP, or "Large Icons" in Vista/7 to see "Folder options"). In the newly opened window, go to the "View" tab, look for the checkbox that says something like "Hide extensions of known file types", and uncheck it if it's checked.Look again in the folder with the HTML and CSS. Do you now see a ".txt" added to the file name? If you do, remove it.the only thing that changed was the html file name (no longer just mainpage but mainpage.htm)the CSS file name didnt change

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...