This is rather, confusing.

Priapus

Priapus

Priapus

Soldato
Joined
30 Jul 2004
Posts
10,572
Location
East Sussex, UK
Howzit guys,

I'm trying to get my head around, CSS. I need to make a new website. Now I originally made www.digizones.co.za using a free template from the Internet. I just made my own images/logo for this site. However I now need to do a new site for someone else.

I don't want to use a free template again, as it's too much of a pain in the ass to find a nice one. So, the last week or so in the little free time that I do have, I have been looking at, www.w3schools.com on their CSS guide. Which is pretty informative. However, I feel it's trying to throw everything at me, at once. Which is just confusing the hell out of me. :(

I've had a look at the stick, with the relevant links to varies websites offering tutorials. However, it's still not really clear.

So, what I want to know and aim to achieve via this thread is:

1. How to start a new CSS file for my HTML website.
2. How is it possible to know all of CSS code in your head? (I can't remember it all. :()

I really do enjoy making websites, and I want to be able to make them from scratch or even use a 'blank' template that I can change how I wish to. All this 'padding' ECT just confuses me as no one site explains exactly what each bit does to a page and how I get it into an html file.

For example, so I now want a menu bar, under a site's main logo...

1. How do I get the logo at the top and menu below?
2. How do I even make a menu? Photoshop?

As you can see, I'm a lost sheep here and really want to do this properly, not like my first website. Which, might I add is still in complete. :(

So, I just need a rough guide on where to start and how I go about this?

Appreciate any help at all on this! :):(
 
best bet would be again look for some more free templates and then see how they are made, change tiny parts of it, so say it has padding: 10px; change it to 20px and see what happens, if it says float: left; change it to right;, do this kind of stuff and you will quickly see how stuff is made.

css is extremely easy once you know what your doing. you ask how do we remember? like everyone else does with everything, like remembering peoples names, phone numbers, addesses, actors names, you just remember from doing it a few times.
 
Thank you. :).

You see the problem is I really need to learn how to do this from scratch. Do you start each site's CSS template from scratch or have you made your own, template?
 
I have several chunks of css code i use for basic functions like layouts, menu's etc that i just splice together and modify to my needs, rather than recode everything from scratch.

once you learn how things are placed in the html, and how css functions its pretty straight forward doing basic web designs, some of the more complex things require a bit of time to get to grips with though.
 
http://www.westciv.com/style_master/academy/css_tutorial/ This covers everything, but it's a lot to swallow all at once.

Starting with a good undertanding of semantic HTML helps a lot. Make sure your headings are marked as <h1>/<h2>/<h3> etc, your paragraphs are marked with <p>, your lists with <ul>, etc. This will allow you to apply general styles quickly.

Understand that a div for the most part is just a box for grouping other elements.

Understand the box model - see http://redmelon.net/tstme/box_model/ for a great visual example.

Learn the difference between id and class selectors, and when to use each.

There are many many css properties and it's difficult to remember them unless you're using them on a regular basis. There is no shame in using references like http://www.w3schools.com/css/default.asp to help find the one you're after.

As for your specific questions, I usually start with a blank CSS file, and the first thing I do is clear the default margins / padding on most of the major elements. Some people like to clear it on all elements using the * selector, but this can make some form elements look weird on certain browsers.

There are plently of good CSS menu examples here: http://css.maxdesign.com.au/listamatic/
 
I reckon the best way to understand the box model completly is to install firebug for firefox and use it to inspect a website's layout. Cursor over a div and it will highlight the div, its padding and margins in different colour, so you can see how it all relates :)
 
You must log in or register to reply here.
Back
Top Bottom