CSS for an absolute beginner?

Home » Forums » Stylesheet Maker » CSS for an absolute beginner?


Registered User
438 posts

I've been doing my own VERY BASIC web pages and simple sites for years now. Examples are:

http://www.PlanetaryBillOfRights.org/
and
http://www.coloradoprocessservers.net

I also authored all the content on them. Some people like them. The first was eventually done with VSD. The second has been done all along with HTML Editor. I'm now a devout CoffeeCup fan.

So when I bought these programs awhile back, they offered packages that you could get. So I figured what the heck? So I also have access to StyleSheet Maker as part of that, but to use an old blunt expression, I dont know a stylesheet from...er, a hole in the ground. :lol:

But from what little I've been able to grok, it could be used to make the styles the same on my business site, for all the pages?

One thing I'm seeing, now that I just got a 24" LCD monitor, is that my pages appear all the way on the left side of this huge screen. Can CSS fix that so it centers? ( I use Seamonkey 2.x browser )

So I appear to have twofold challenges here. Finding out what all StyleSheet Maker can actually DO for me, AND how it can incorporate into a site like http://www.coloradoprocessservers.net that I did using HTML Editor.

I happen to know the guy that owns this other site: http://www.actionprocessservers.com/
He's got a MUCH bigger business than me, I'm just a little part time home biz. He's mentioned in the past that he paid like $14k for one of his sites to be designed.

That being said, I've realized all along that I'm poor and must use what they call "guerrilla marketing" strategies so I can get any business for myself at all, AND I must do that with my site design too.

So CAN software like StyleSheet Maker help me get my site up to par with one like his and look like the big leagues? ( I dont care that much about the flashy stuff, in fact it may even turn some clients off, so I'm just talking about the general look )

Or am I trying to be something I'm not, with this? I mean some clients compliment me on my site. One said it was "delightfully light" and they really liked it. That it doesnt have that heavy "professional" big company look, which I'm really not interested in projecting anyway. I'm just NOT a big company and at my age, am not interested in building into one either. I LIKE it light and simple, like the "guerrilla" philosophy.

But what can StyleSheet Maker do for me, to maybe improve my site some?

I feel so dumb asking this, compared to you advanced gurus, but what the heck? :P

Melissa Brookstone
Author of the new book, "The Planetary Bill of Rights Project"
at Amazon.com http://tinyurl.com/45wbn6v
Using VSD at:
http://www.PlanetaryBillOfRights.org/


Ambassador
1,473 posts

Well welcome, we are a friendly lot here (when we have enough caffeine in us).

The fundamental reason for stylesheets are two fold:

it moves all style elements into a separate file so if you change how you display your tags, say <p> tag from <p align="left" style="color:blue;height:auto;" > to just <p> in your html. that way wholesale changes to your website to how it displays only need to be made to one file, the css file and all your pages auto update. Thus eliminating the need to search out and change hundreds of tags in your pages and change them individually.

Secondly, browsers will load css sheets and hold them in memory, so your site will load quicker because all those style instructions are not loaded and reloaded with each page of your site.

a good resource for css (other than these forums) is

http://www.yourhtmlsource.com/stylesheets/introduction.html

eventually your html code will look something like:

<div class="align-right">
<img src="../image/trade_axe.png" width="146" height="79" alt="Trade Axe" title="Trade Axe" border="0" />
<br />
<i><b><p class="align-center">A Trade Axe</p></b></i>
</div>
<p>In August 2009, four RDA's, the DevCo Staff and OPG staff accompanied the Environmental Assessment Project Team to Zig Zag Lake near the proposed upper site to help them with tasks for the 2009 phase of the Environmental Assessment. The Team consisted of the Project Manager - Phil, the archaeologist - Luke, two archaeological assistants - Ted and Charlie, the biologist - Cam and his assistant - Patrick. The RDA's were Mike Esquega Sr., Mike Lesperance, Sam Sobush and Jordan Hatton. The DevCo Staff were John Fullerton and Elizabeth Taylor. The OPG staff were Heather Brown, Shawn Bremner, Dave Stanley and Cathy Nevis.</p>
<div class="align-left">
<img src="../image/scraper.png" width="231" height="384" alt="A Scraper" title="A Scraper" border="0" />
<br />
<i><b><p class="align-center">A Scraper</p></b></i>
</div>
<p>The team flew into Zig Zag on August 21 and immediately set up camp. One team (Luke, Phil, Charlie and Jordan) was dropped off in Summit Lake with canoes and paddled down to join the main party the next day. The main party got settled, half in the cabin and half in a tent city
in front. The next four three days were busy ones as the various teams spread out to complete their assigned tasks.
The biologist, Cam Portt, assisted by Patrick Donio, Sam Sobush and Mike Lesperance, caught and tagged walleye, took fish samples from pickerel, whitefish and walleye to send back to the lab for testing and did water testing.
The archaeologist, Luke Dalla Bona, along with his assistants Charlie and Ted Bingus and Mike Esquega Sr. explored sites that Luke had identified the previous year. They spent three days boating to different sites, walking the areas and finding various artefacts. Every day when they came back to the cabin a meeting was held where they put all their notes together, logged everything they had found and marked all the sites on a map of the area.</p>


and display like:

lnfnresources.com

Good luck, in the next few weeks as you start to work more with css, it is going to become very exciting. Volunteering to help :)
http://www.tbaygeek.org


Senior Advisor
2,037 posts

Don't worry about asking questions that is what we are hear for. Regarding your question about making site look professional. I have a little article on my website that talks about that called "the difference between an amateur and professional website. You can access some of my support from this site:

http://www.innovatewebdevelopment.com/support.html

I still have a couple articles to complete, but it is a great resource for beginners.

My advice to you is actually not to use the stylesheet maker, but to learn the css and do your own stylesheets. You will have so many more options for your design and layout.

Here is what helped me understand the concept of CSS. All of your HTML markup need to be housed in some container. Use a menu as an example. A menu is one part of the markup: so in order for you to be able to position it, you need to place it in a container (also called a div). Then what CSS allows you to do is move the containers around. Lets use the menu as an example, here is what the code would look like:
------------------------------------------
CSS
------------------------------------------
#menu{float:left; width:100px; height:auto; margin-left:20px;}
------------------------------------------
HTML
------------------------------------------
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2 </li>
</ul>
------------------------------------------

This is just one example of the concept of CSS and HTML. As you can see having control over the containers allows you to move them anywhere on the page. So then, if you wanted to center your page, then you may want to consider wrapping all of your containers in one large container and then move that one large container so that all of the other elements move with it.

Tadaa.

I hope this was helpful and not more confusing.





The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com


Registered User
244 posts

I can't imagine building a site without CSS, not if you are going to code it by hand anyway.
You'll get a lot of info on stylesheets just browsing this forum, Melissa.
And there's the articles on Eric's site.

Eric English wrote:
... I still have a couple articles to complete, but it is a great resource for beginners ...
It is.

I found your "Differentiating Professional from Amateur Websites article interesting, especially the section on typography.
I used to teach presentation techniques using overhead projectors and PowerPoint, and one of my greatest peeves is the tendency of some sites to have a plethora of different font families and colours - a sort of "they're available, so I'll use as many as I can to make it look pretty" approach. http://www.drivingnt.com/


Senior Advisor
2,037 posts

Zipper wrote:
I can't imagine building a site without CSS, not if you are going to code it by hand anyway.
You'll get a lot of info on stylesheets just browsing this forum, Melissa.
And there's the articles on Eric's site.

Eric English wrote:
... I still have a couple articles to complete, but it is a great resource for beginners ...
It is.

I found your "Differentiating Professional from Amateur Websites article interesting, especially the section on typography.
I used to teach presentation techniques using overhead projectors and PowerPoint, and one of my greatest peeves is the tendency of some sites to have a plethora of different font families and colours - a sort of "they're available, so I'll use as many as I can to make it look pretty" approach.


Thanks for the compliment.

I am a huge advocate of typography. Believe it or not, I became interested in the subject after I had to design a site that needed to be accessible for individuals who had trouble learning and seeing. After playing around with a bunch of designs and color, I started to explore type. I ended up finding a great readable type, which placed with the right colors, the right line-height, etc made the site very elegant. Here I was just trying to find the right type for the user to read, and it turned out that it was the missing link for the design. The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com


Registered User
438 posts

Ok, I'm beginning to grasp the concept, but is this the kind of thing that I can do as an add-on to my existing site, then play with settings to get the feel for what it can do, and the outcome of each change?

Melissa Brookstone
Author of the new book, "The Planetary Bill of Rights Project"
at Amazon.com http://tinyurl.com/45wbn6v
Using VSD at:
http://www.PlanetaryBillOfRights.org/


Senior Advisor
7,572 posts
Online Now

yep you can for the most part Melissa, you just need to make changes then save the css file (this part is important in order to see the changes you created on it. Basically make changes to the css file, save it, then switch over to the html file that you're using the css file for and do a preview of it and you should see your changes then. Jo Ann

http://lbwebsites.com - Web Design & Web Hosting
http://cattownrescue.org ... Current project in the works, love cats! :)
http://northbaldwinliteracycouncil.org .... Our local Literacy Council

Due to spammers the below sites are not viewable outside the US, sorry guys :(
http://proudayou.com - My sons website for his music business
http://rockinwithmainstreet.com - My brother's band website


Ambassador
1,473 posts

One consideration you will need to.... well consider...(sorry for the bad grammar) is style elements are cumulative, so the last item for a tag modifies a previous item, so even if you had in your css the following for the paragraph tag:

p { margin: 0 0 1.5em; padding: 0 1em 0 1.5em;}


the following in your HTML will modify it, because it is loaded after.

<p align="center"><font face="Arial"><font color="#ffffff" size="2">


so the trick is to think of style elements as completely separate from your content elements, and only put style elements in your HTML as an exception, or one off situation. Volunteering to help :)
http://www.tbaygeek.org


Registered User
438 posts

Jo Ann wrote:
yep you can for the most part Melissa, you just need to make changes then save the css file (this part is important in order to see the changes you created on it. Basically make changes to the css file, save it, then switch over to the html file that you're using the css file for and do a preview of it and you should see your changes then.


To be safe, it looks like I should copy the site into a separate CSS play area folder, then do my playing.

:)

Melissa Brookstone
Author of the new book, "The Planetary Bill of Rights Project"
at Amazon.com http://tinyurl.com/45wbn6v
Using VSD at:
http://www.PlanetaryBillOfRights.org/


Registered User
438 posts

Hey I see that HTML Editor has some kind of "CSS menu designer" in it. Is that the same as adding CSS to my site, or is that just for CSS menus?

Melissa Brookstone
Author of the new book, "The Planetary Bill of Rights Project"
at Amazon.com http://tinyurl.com/45wbn6v
Using VSD at:
http://www.PlanetaryBillOfRights.org/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.