HTML and Style Sheets

Fri Sep 17, 2004 5:27 pm

I just hate the way my Description looks. I want the text to appear white, the paragraphs narrowed by about an inch on both sides and centered. How can I do this? Thanks.

http://www.pbase.com/toddk

Fri Sep 17, 2004 5:38 pm

Since the description is placed inside the "galleryheader" class, you just have to tweak the CSS to set the attributes of this class.

try something like

Code: Select all: .galleryheader { text-align: center; color: #fff; width: 200px; }

Change 200 to some value you like..

Fri Sep 17, 2004 6:11 pm

Obviously I don't know much about CSS but I wish to learn. I am starting at the very bottom. Hey, everyones got to start somewhere.

Anyway, I am using style sheet Webdev as my default. I have been reading about how to make changes to this. From what I have figured out is that I have to make my own style sheet and then perform the steps you mentioned before. Is this correct?

I view the source code and try to make sense of it. I thought I could just copy and past it as my newly created style sheet and make the changes you suggested. Is that how you go about it or am I way off??

Fri Sep 17, 2004 7:00 pm

toddk wrote:Obviously I don't know much about CSS but I wish to learn. I am starting at the very bottom. Hey, everyones got to start somewhere.
...
I view the source code and try to make sense of it. I thought I could just copy and past it as my newly created style sheet and make the changes you suggested. Is that how you go about it or am I way off??

Hi Dude! Cool pictures you have there.

LetÂ´s see. I donÂ´t know that much about CSS either but IÂ´ve tried to learbn the last couple of weeks. It is kind of complicated, so a tool to see what a code change can do is very useful. ThatÂ´s why, following some comments in this forums I did install Firefox (with WevDeveloper)... It is a small feature that allow you to make changes instantly on your CSS code. Like a "what you see is what you get" software. IÂ´ve created a small screencapture to show what I mean:

All you have to do is to copy & paste your new code into a stylesheet here in PBase. I think it is the best way to understand all this stuff; looking other peoples pages and learning how things are done.

If you want to check more about all this this is the forum that convince me:
http://forum.pbase.com/viewtopic.php?t=5501

Hope this helps you and other that are a bit afraid of installing a new browser. My experience is that Firefox does not have problems with IE over Windows, but it is way cooler!

Fri Sep 17, 2004 7:18 pm

Thanks for the suggestion. I will check it out. I want to understand this stuff but it gets frustrating. I am sure once the basics are understood it becomes easier.

Thanks for the comments on my photos. Are your from Chile? I fly down there all the time. I plan on living there for a little while. Anyway, thanks again.

Sat Sep 18, 2004 5:20 am

toddk wrote:Obviously I don't know much about CSS but I wish to learn. I am starting at the very bottom. Hey, everyones got to start somewhere.

Anyway, I am using style sheet Webdev as my default. I have been reading about how to make changes to this. From what I have figured out is that I have to make my own style sheet and then perform the steps you mentioned before. Is this correct?

I view the source code and try to make sense of it. I thought I could just copy and past it as my newly created style sheet and make the changes you suggested. Is that how you go about it or am I way off??

It will be hard for a beginner to make sense of the source code, and the source code isn't the 'stylesheet' anyway. What you should do is look at the existing style sheet for the Webdev style and then get some practice making minor changes to it. To get the existing stylesheet, look at the source code, and at the top you should see these lines:

Code: Select all: <html lang="en-US"><head> <title>webdev Photo Gallery by Stylesheet Defaults at pbase.com</title> <link rel="stylesheet" type="text/css" href="http://image.pbase.com/styles/gallery2.css"> <link rel="stylesheet" type="text/css" href="http://css2.pbase.com/styles/28011.css"> <base href="http://www.pbase.com"> </head><body>

The stylesheet you want is located here:

Code: Select all: http://css2.pbase.com/styles/28011.css

Paste that url in the address bar of your browser. If you are prompted to pick a program to open the file, you can choose Word or something along those lines. When it opens, you will see the stylesheet for Webdev. You can copy and paste that into pbase and name it something like my_Webdev to create your own style sheet. Then, you can make changes to that style sheet as you explore how css works.

The one thing the source code is good for is to determine what html tags surround the content whose style you are interested in changing. Most of the html tags at pbase are assigned class names, which allow you to target the content with the stylesheet. Even if a class name isnâ€™t assigned to an html tag, you can still target the content inside the tag for style changes--you just have to learn the proper 'selector' to get at itâ€”see this tutorial:

http://css.maxdesign.com.au/selectutorial/index.htm

Sat Sep 18, 2004 9:52 pm

Hey thanks for the great info. You guys have been a tremendous help. Now if I can only get my brain to work for me I will see what it can do.

HTML and Style Sheets

Narrowing and Centering the Description in Root Gallery?

Narrowing and Centering the Description in Root Gallery?

How do I make this edit in CSS?

Re: How do I make this edit in CSS?

Thanks for the suggestion

Re: How do I make this edit in CSS?

Who is online