Styles per page?

@JannaJul 23.2003

Greetings:
I am trying to make a page that has a style sheet for the side, top and bottom. I seem to be able to get one or the other but not all, or even 2. Am I not going to be able to do this? If there is a way, would you please tell me what it is, how to do it?
I am going to also need to create a template that allows the side style sheet to grow with the page, is that possible?

Thank you for your time, Janna

PS here is the page I’m talking about:
~~[url]~~http://alaska.fws.gov/ea/review/r7new.htm[/url]

Basically it’s only the grid area. j

to post a comment

CSS

8 Comments(s) _↴

@toicontienJul 23.2003 — #It took me a minute or two of looking at your code to figure out what you want to do. Then I saw a pair of <style> tags in the first paragraph after the BODY tag. Here are two basic rules when dealing with style sheets:

1. The <style> tags must go in between the <head> tags of the document. CSS is metadata, meaning that it is data [i]about[/i] the data, for which the HTML <head> tags were created.

2. <style> tags do no go in the body of the document (though on most browsers it doesn't matter right now).

Before going any further with CSS, I'd recommend some online reading:

http://www.w3schools.com/css/

Now for the nitty-gritty stuff.

[b]Embedding a style sheet in an HTML document[/b]

<i>
 </i>&lt;style type="text/css" media="screen | print | all | handheld | aural..."&gt;
 &lt;!--
 /* STYLE STATEMENTS GO HERE */
 --&gt;
 &lt;/style&gt;

You'll notice that the style statements are wrapped inside an HTML comment tag. That's so older non-CSS browsers don't display style definitions as text.

The type="" attribute is required for valid HTML and is a MIME type to let the browser know just what kind of data is coming up.

The media="" attribute lets you create style definitions for different devices that could display your page. You would choose one of the choices that are separated by the vertical bar, i.e. media="screen" for desktop browsers, or media="all" if you want all devices to use the style definitions.

[b]Importing a style sheet[/b]

<i>
 </i>&lt;link rel="stylesheet" type="text/css" href="URL_TO_STYLE_SHEET"&gt;

This works on 4.0 and newer browsers

<i>
 </i>&lt;style type="text/css" media="insert media type"&gt;
 &lt;!--
 @import ("URL_TO_STYLE_SHEET");
 --&gt;
 &lt;/style&gt;

The above method works on IE 4.5 and newer for the Mac OS, IE 5.0 and newer for PC, Netscape 6.0 and newer, Mozilla, Firebird, Opera 5.0 and newer for sure, and maybe even 4.0.

Again, you import style sheets in the HEAD of the HTML document.

I won't elaborate as to how in this post, but you can specify classes of styles that can be used over and over again in a document, and ID's which are style definitions that can only be used once in an HTML document.

Since my post is a mile long, I'll stop here with some more links to good reading:

http://www.w3.org/ - It's good to read the actual web standards themselves

http://validator.w3.org/ - Validate your HTML and CSS against a web standard created by the World Wide Web Consortium.

http://www.w3schools.com/ - Pretty good for beginners, tutorial-based

http://www.alistapart.com/ - Good for intermediate to advanced web designers. Tackles specific problems and gives a solution.

@JannaauthorJul 23.2003 — #Hi Greg:

Thank you for your response. Can I use more than one css per webpage?

I have been unsuccessful so far in adding multiple styles to one page. Do you know how to do that?

I actually have been to W3schools. Unfortunately, I'm a little slow with understanding a lot of text, a disability of mine. Anyway, I never saw or got anything about this from that site. I have a hard time picking out parts of the lesson and understanding what they are saying. I'm sorry.

Thanks, Janna

@Da_WarriahJul 23.2003 — #to apply more than one stylesheet to a page, just put another link tag, like this:

<link rel="stylesheet" type="text/css" href="URL_TO_STYLE_SHEET">

<link rel="stylesheet" type="text/css" href="URL_TO_STYLE_SHEET2">

you can also get into different skins with this and everything, but that will let you apply two different .css files on the same page?

@toicontienJul 23.2003 — #Here's some quick info on how to do what you would like:

Consider the following HTML code...

Figure 1.

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
 
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Playing with paragraphs&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;p&gt;This is the first paragraph.&lt;/p&gt;
 
 &lt;p&gt;This is the second paragraph.&lt;/p&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

You could add some style definitions to make the paragraphs have boldface text. You would add the following lines of code between the <head> and </head> tags:

Figure 2

<i>
 </i>&lt;style type="text/css" media="all"&gt;
 &lt;!--
 p { font-weight: 900; }
 --&gt;
 &lt;/style&gt;

That would make text after EVERY <p> tag in the document have boldface text. Now for example, here's how to create a CSS class to create boldface text.

Figure 3

<i>
 </i>&lt;style type="text/css" media="all"&gt;
 &lt;!--
 p[b].boldText[/b] { font-weight: 900; }
 --&gt;
 &lt;/style&gt;

In this case, text after a <p> tag will be boldface [i]only[/i] if you apply that class to that tag. I'll show how to do that later, but I'll explain a little about how I wrote the style definition first.

Now the boldface text in Figure 3 above shows two things:

1. The CSS class selector ( . )

2. Assigning a name to a class (boldText). CSS class names can only contain alphanumeric characters, and underscores ( _ ).

[b]Applying the class to a tag[/b]

Let's take those two paragraphs in Figure 1 and apply the boldText class to the first <p> tag.

Figure 4

<i>
 </i>&lt;p [b]class="boldText"[/b]&gt;This is the first paragraph.&lt;/p&gt;
 
 &lt;p&gt;This is the second paragraph.&lt;/p&gt;

The first <p> tag has the class="" attribute written in it. The value that's assigned to the class attribute is "boldText," which tells the browser to search for a CSS style with a classname of boldText, and apply the rules [i]to that <p> tag only[/i]. Once the browser reads the second <p> tag, it will stop using the boldText style.

The HTML code in figure 4 would be rendered in browser like the two paragraphs below:

[b]This is the first paragraph.[/b]

This is the second paragraph.

You can create multiple classes for each tag, or create a generic class that can be used for any HTML tag:

Figure 5

<i>
 </i>&lt;style type="text/css" media="all"&gt;
 &lt;!--
 
 /* Any tag that affects text can use this class
 to make text italisized
 */
 [b].italisized { font-style: italic; }[/b]
 
 /* Every &lt;p&gt; tag will display in Arial font */
 [b]p { font-family: Arial; }[/b]
 
 /* Only &lt;p class="boldText"&gt; tags will be boldface */
 [b]p.boldText { font-weight: 900; }[/b]
 
 /* Only &lt;p class="redText"&gt; will be displayed in red */
 [b]p.redText { color: red; }[/b]
 --&gt;
 &lt;/style&gt;

That's the general idea about how to apply different styles on the same page.

@JannaauthorJul 23.2003 — #TO WHOEVER POSTED THIS:

to apply more than one stylesheet to a page, just put another link tag, like this:

<link rel="stylesheet" type="text/css" href="URL_TO_STYLE_SHEET">

<link rel="stylesheet" type="text/css" href="URL_TO_STYLE_SHEET2">

you can also get into different skins with this and everything, but that will let you apply two different .css files on the same page

__________________________

I want more than one style sheet to the page. I want a bottom and a top, will this code work for that? Can two different style sheets be on the same webpage?

@JannaauthorJul 23.2003 — #Greg:

I am wanting two different backgound styles for one webpage. a Bottom and a Top. Can this be done?

@Da_WarriahJul 23.2003 — #im assuming you meant to "reply" instead of create a new topic, but oh well...?

well with the code i showed you in the, er, other post, both stylesheets are applied to the entire page...however, if you put all your classes for the top of your page, etc (like greg showed you) in something like top.css, and all your classes for the bottom of your page in something like bottom.css, it does the same as putting them in ONE document...

however, if it helps you divide up the content a bit and keep everything straight, so a year down the road youll still know whats what, then go ahead and use two documents...itll still work fine...?

@pyroJul 23.2003 — #Threads merged...

Also in #CSS _↴

Horizontal List Problem Navigation Bar Problem formatting my tab menu

Success!

Help @Janna spread the word by sharing this article on Twitter...

Tweet This

Styles per page?

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Styles per page?

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴