css help

robertbiferi · Feb 7, 2012

I know that exturnale css works like this.

I make one page and put this code
<link rel="stylesheet" type="text/css" href="roberts.css" />
in the Head Tags.

Now in the Body Tag I do something like this
]
body-color=black
text-color=white
[

and then I would save this as roberts.css I get this and I know I may be off but this is not were I get lost.

Now on say on first html page if I want the body color to be Black I put this code in the Body Tag
<BODY A HREF="roberts.css"</a>

So the page will look at the roberts.css pages to see what color to make it.
Now do I have this part right????

Now when you have say two html pages and you want the first page to be Black and you want your secound page to be Blue you have to name the code in the roberts.css page and put this name in the page you want it to go to I think.

Now I read and read Documents on this and get lost if you tell me in your words I think I will get it?
Thanks

Caliban · Feb 7, 2012

Greetings, robertbiferi...

Now on say on first html page if I want the body color to be Black I put this code in the Body Tag
<BODY A HREF="roberts.css"</a>
Click to expand...

Negative: you don't use an anchor tag to reference a style sheet. You've already done that in your Head section with the <link rel="stylesheet" type="text/css" href="roberts.css" /> line. You merely use a <body> tag - the background and text colors have already been specified in your style sheet:
Code:
]
body-color=black
text-color=white
[
If you want one page to have a black background and white text (such as your "roberts.css" example) and another page to have a white background and black text (or some other combination), then you must either reference another style sheet with the new parameters ("roberts2.css"), or specify the parameters on the new page itself, either in the Head section or within the Body tag...

robertbiferi · Feb 7, 2012

Well if say you have 2. html pages one page will have the code in the Head Tag to look at the roberts.css page for the Body color I get this.

Now I could make a second roberts.css page so the second html page will look at to see what color to make this page.

But they use Extunale css because both pages code can be in one roberts.css page.

So after you enter
]
body-color=black
text-color=white
]

This is good when the first page looks here for it's code.

then I put
]
body-color=white
text-color=black
]

And this is for page 2. to use.
So when page 2. looks here how do I tell it to look at the secount Block of code?

PC-XT · Feb 8, 2012

You might already know this, but to be clear, css shouldn't have HTML in it, at least not for what you are doing.
roberts.css should look like
Code:
body /*select body tag, use these as default rules of document*/
{ /*apply following rules to the body*/
background-color:black; /*This is the background color, like BACKGROUND attribute*/
color:white; /*This is for text color, like TEXT attribute*/
} /*end rules to apply to the body*/
(comments between /**/)

If you have css that you want to change for one page, you should make another css file for it and add another link tag, for instance:
Say that you want to make one page have blue text instead of black. You would make roberts2.css:
Code:
body {
color:blue;
}
The code for that page with blue text would be
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head><title>Robert's Document</title>
<link rel="stylesheet" type="text/css" href="roberts.css" />
<link rel="stylesheet" type="text/css" href="roberts2.css" />
</head><body>
The rules in the first stylesheet would apply to this text,
making it black on a white background by default,
but roberts2.css overrides this, making the text blue.
</body></html>
For the other pages, don't include the second link tag (for roberts2.css,) so the text will be black, like roberts.css says.

If needed, you can repeat the link tag with other stylesheets, which will be applied in the order listed.

robertbiferi · Feb 8, 2012

OK I think I told you everything incorectly.

I make a file called roberts.css and in the file it says
<HTML>
<HEAD>
<TITLE>Roberts Art Gallery</TITLE>
</HEAD>
]
body-color=black
text-color=white
]
</BODY>
</html>

Then in my Webpage inbetween the Head Tags I put
<link rel="stylesheet" type="text/css" href="roberts.css"/>

and what this does is when this Webpage gets loaded into a Browser this code will tell it to look at the roberts.css file to see what color to make things?

Am I right

Caliban · Feb 8, 2012

To reiterate:

Try this:

The following is the style sheet for my website (CalibanComputer.com):

Code:

body {position: relative; background: black; background-image: url(images/starfield01.jpg); background-attachment:fixed; margin: 20px 120px 20px 100px; padding: 0;}
div#links {position: absolute; top: 0px; left: 0; width: 166px; height: 700px; font: 13px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: 1em sans-serif; padding: 5px 10px; margin: 0 0 1px; border-width: 0; text-decoration: none; color: #d6d6d6; background: #444; border-right: 5px solid #505050;}
div#links a:hover {color: #000; background: #AAA; border-right: 5px double white;}
div#links a span {display: none;}
div#links a:hover span {display: block; position: absolute; top: 476px; left: 0; width: 125px; padding: 5px; margin: 10px; z-index: 100; color: #fff; background: black; font: 11px Verdana, sans-serif; text-align: left;}
div#content {position: absolute; top: 0px; left: 161px; right: 0px; color: white; background: #000; font: 12px Verdana, sans-serif; padding: 10px; border: solid 5px #444;}
div#content p {margin-left: 4em; margin-right: 1.5em; line-height: 1.44;}
div#content p.index {margin-left: 3em; line-height: 1.44;}
div#content p.links {margin-left: 2.25em; line-height: 1.44;}
div#content h1 {margin: -9px -9px 0.5em; padding: 15px 0 5px; text-align: right; background: #444; color: #d6d6d6; letter-spacing: 0.4em; font: 24px sans-serif; height: 24px; vertical-align: middle; white-space: nowrap;}
div#content h2 {margin-bottom: 0.25em; text-align: left; background: #000; color: #d6d6d6; letter-spacing: 0.1em; font: 14px Verdana, sans-serif; height: 1px; vertical-align: middle; white-space: nowrap;}
div#content h3 {margin-bottom: 0.15em; text-align: left; background: #000; color: #d6d6d6; margin-left: 2em; letter-spacing: 0.1em; font: 12px Verdana, sans-serif; height: 20px; white-space: nowrap;}
div#content h3.links {margin-bottom: 0.15em; text-align: left; text-decoration: underline; background: #000; color: #d6d6d6; margin-left: 2em; letter-spacing: 0.1em; font: 12px Verdana, sans-serif; height: 20px; white-space: nowrap;}
div#content h4 {margin: -9px -9px -9px; padding: 10px 0 10px; text-align: right; background: #444; color: #d6d6d6; letter-spacing: 0.2em; font: 10px sans-serif; height: 14px; vertical-align: middle; white-space: nowrap;}
img {border: none;}
hr {color: gray;}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {color: #e1e1e1; text-decoration: none;}
div#content a:visited {color: white; text-decoration: none;}
div#content a:link:hover {color: gray; text-decoration: underline overline;}
div#content a:visited:hover {color: gray; text-decoration: underline;}
code, pre {color: #EDC; font: 110% monospace;}

The style sheet is named "style.css".

In the Head section of my index page, I link to the style sheet like so:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CalibanComputer.com</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="English">
<meta name="author" content="CalibanComputer@gmail.com">
<meta name="description" content="CalibanComputer.com - a collection of computer essentials.">
<meta name="keywords" content="adware, malware, computers, computer essentials, free software, software reviews, spyware, spyware tutorials, System File Checker, ImgBurn">
<meta name="rating" content="General">
<meta name="robots" content="index,follow">
<meta name="revisit-after" content="7 days">
[COLOR="Red"]<link rel="stylesheet" href="style.css">[/COLOR]
</head>
[COLOR="Purple"]<body>[/COLOR]
<div id="links">
&nbsp;&nbsp;<img src="images/thinker01.png" alt=" Welcome to CalibanComputer.com! " title=" Welcome to CalibanComputer.com! " height="210" width="130">
<br>
<br>

yada yada yada

</html>

Notice that the <body> tag is empty...

Remember: you can always look at a webpage's code by right-clicking on the page and selecting View Source - by doing this, you can see how things like CSS Style Sheets are created and used...

robertbiferi · Feb 9, 2012

I think I have it down but I am getting mixed up still?

In my roberts.css file I would type

<html>
body
{
background-color=black
}
text
{
color-color=white
}
</html>

and this will tell my first page when it looks at this file to make the page black and the text white?

And let me gess because this file is the roberts.css file I don't need the THML Tags?

Caliban · Feb 9, 2012

In my roberts.css file I would type

body {background: black; color: white;}

and this will tell my first page when it looks at this file to make the page black and the text white?
Click to expand...

Note the syntax changes...

...because this file is the roberts.css file I don't need the HTML Tags?
Click to expand...

Correct...

robertbiferi · Feb 9, 2012

Thank you I now get this
The code in my .css file will be like this
body {background: black; color: white;}

And it works my index.html page looked at the .css file and made the page Black and text white.

Now just tell me how to do this?
If I make a second page and I want the background on it to be Blue I have to do another line of code like this
body {background: blue; color: white;}

But when my secound page looks in the .css file it has to know to look at just the secound line of code.

So this is were I have to ad iD Tages to let page One and Page two know what line of code is for it I get this.

So would I do this?
ID#2
body {background: black; color: white;}

But how does my secound page know this is for it?

Caliban · Feb 10, 2012

Question: why are you using external style sheets? Practically the only reason for using externals is if you are servicing a large number of pages, so that you don't have to edit a lot of pages if you are making a lot of changes...

If you are wanting pages on a site to appear differently (different backgrounds, different text color, etc.) and if it's a simple site, then the easiest way is to write the CSS per page - I can guarantee you that in the long run you'll suffer far less headaches that way...

stevepowers · Feb 20, 2012

robertbiferi said: ↑

Thank you I now get this
The code in my .css file will be like this
body {background: black; color: white;}

And it works my index.html page looked at the .css file and made the page Black and text white.

Now just tell me how to do this?
If I make a second page and I want the background on it to be Blue I have to do another line of code like this
body {background: blue; color: white;}

But when my secound page looks in the .css file it has to know to look at just the secound line of code.

So this is were I have to ad iD Tages to let page One and Page two know what line of code is for it I get this.

So would I do this?
ID#2
body {background: black; color: white;}

But how does my secound page know this is for it?
Click to expand...

Ok, to get this straight, you want different background colours for the body for different pages?

Firstly, to clarify; you definitely *do* want to use the one external stylesheet (ie style.css) for all your different pages; having it in a seperate, single file allows your browser to download the styles only once and then reuse the file many times, saving your server having to send the file many times; which makes it faster for both your server and your users.

What you do is have the one style sheet referenced once in each of your html files in the <head> tags, eg
Code:
<link rel="stylesheet" type="text/css" href="mysite.css" />
then in each of your different html files, put a class on your body tag describing what that page is for, example:

in "about-us.html"
Code:
<body class="about-us">
in "contact-us.html"
Code:
<body class="contact-us">
on the homepage:
Code:
<body class="homepage">
etc

then, in your stylesheet, have different body definitions based on what you've got in the class=" section of the body tag. For example:
Code:
body.about-us {
  background: red;
}

body.contact-us {
  background: blue;
}

body.homepage {
  background: brown;
}
and of course don't forget that you can then have a "general" body definition which applies to *all* your bodys in the different html files; for the styles that should be common to all pages - you just leave off the class selector, eg:
Code:
body {
  font-size: 0.8em;
  padding-top: 10px;
}
and so on. Does that help?

cheers

mjnc · Feb 20, 2012

I agree with stevepowers.

You can put all of the rules in a single style sheet.

You begin to use separate (multiple) style sheets when there are Many rules to keep track of and you want to
separate them for easier maintenance, such as one for Layout, and one for Typography and one for Colors.

That's not necessary for what you are doing and you should not begin doing that until you are comfortable with using External style sheets.

Another reason for using multiple style sheets is for using "alternate" style sheets, which is Not what you want here.

Be sure that All of the styles that you define for the different body classes are also defined for the default body with No class defined.

Example:
If you set background-color: blue for any body class, make sure that you define background-color for All of the body rules.
Also, to pass CSS Validation, you should always set a rule for Both color: and background-color:, otherwise the validator will issue a warning message.

Log in or Sign up

css help

robertbiferi I can't follow the rules

Caliban I don't need no steenkin' title!

robertbiferi I can't follow the rules

PC-XT Master Sergeant

robertbiferi I can't follow the rules

Caliban I don't need no steenkin' title!

robertbiferi I can't follow the rules

Caliban I don't need no steenkin' title!

robertbiferi I can't follow the rules

Caliban I don't need no steenkin' title!

stevepowers Private E-2

mjnc MajorGeek