CSS tutorial for beginners

[crmamx]

Well it's finally finished and ready for critique.

 

For those of you that don't know my history and that look at this tutorial, my story is recapped on the first page.

 

I made this tutorial for beginners with no experience with CSS, as I was when I started.

 

I hope it turns out to be a useful document.

 

I would appreciate any and all suggestions and critiques.

http://bayarearcsociety.com/tutorial/css_tutorial1.php

 

 

 

[spiderwell]

lesson 13

The id selector is used to specify a style for a single, unique element and is defined with a pound sign "#".

 

think you will find thats called a hash

 

 

still reading.......

[spiderwell]

am enjoying the float section, its a well written out site and makes it very easy to understand css. good work

[crmamx]

Many thanks...

 

I had such a hell of a time learning CSS ( and I am still far from an expert ) that I thought there had to be a better way. So I tried to put something together for the beginner who is probably only going to do one site. It definitely is not intended for the advanced programmer.

 

A lot of the format and content was derived from reading the questions on the CSS forum.

[crmamx]

lesson 13

The id selector is used to specify a style for a single, unique element and is defined with a pound sign "#".

 

think you will find thats called a hash

 

 

still reading.......

 

It's called many things. A Google search will produce, among others:

 

An id selector is defined in CSS using the "#" sign 

/* All id selectors are defined with a pound symbol (#) before their name */

In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by
a hash character (#).

The id selector is then defined with a hash- or pound-sign (#) before the id name.

ID is specified by including a number sign (#) before the selector name.

 

Number sign is a name for the symbol #, which is used for a variety of purposes including, in some countries,

the designation of a number (for example, "#1" stands for "number one"). The symbol is in Unicode as code point

U+0023 #​ number sign (35decimal); it is also present in ASCII with the same value.

 

In the United States, the symbol is usually called the pound sign, and the key bearing this symbol on touch-tone

phones is called the pound key. In Canada, this key is most frequently called the number sign key. In most

English-speaking countries outside North America, the symbol is usually called the hash, and the corresponding

telephone key is the hash key. Beginning in the 1960s, telephone engineers have attempted to coin a special name

for this symbol, with variant spellings including octothorp, octothorpe, octathorp, and octatherp.[1] None has

become universal or widely accepted. In non-English speaking nations, other names for this symbol are also used.

[spiderwell]

well i will state that anyone in europe, and definately in the UK, will probably say what i said since our money is pound sign £££££ and so when i saw that I was like WTF? lol

dont take this the wrong way, buy why does america have to change everything to suit them and ignore things that have been in place for years. i cried when i discovered they got sulphur changed to sulfur, bad day for science.

the pound was very well established long before computers or perhaps before the name hash came around, at least when refering to that symbol, rather than the drug of course!

 

ok rant done, but since you are going to be offering this site globally (hey it is the internet after all), perhaps its worth stating its also known as hash, but will be refered to as pound herein. so readers get to know about both, i quite like octathorp myself!

[crmamx]

perhaps its worth stating its also known as hash,

 

Good idea, will do.

 

But since when I call in a prescription and she says "Please enter your prescription number and when you finish, press the pound key" I will call it the pound sign."..

[cssfreakie]

looks good Curtis! you already got my review 

[QuickOldCar]

"WampServer is the only packaged solution that will allow you to reproduce your production server."

 

But you are thinking that everyone is going to be using windows.

So why not list the AMP versions :

LAMP - Linux -  Download and installing ubuntu server is most likely the best and easiest way. http://www.ubuntu.com/download/server/download

 

otherwise this tutorial covers it pretty well

http://www.lamphowto.com/

 

CentOS using YUM:

Download a copy of CentOS Linux and install it - http://www.centos.org/

Once your CentOS is installed. Open a terminal and type yum install httpd and follow on screen instructions to install apache web server

Once apache web server has been installed, type yum install php

Once PHP installed successfully, type yum install mysql-server mysql

Once everything is finished, type service httpd start to start your apache web server, the screen will show you if web server service successfully started

type service mysqld start to start your mysql server

LAMP now installed, visit http://localhost in browser

 

AppServ - Windows - http://www.appservnetwork.com/

WAMP - Windows - http://www.wampserver.com/en/

WIMP - Windows with ISS versus Apache - http://www.wimpserver.com/

MAMP - Mac - http://www.mamp.info/en/index.html

SAMP - Solaris - http://dlc.sun.com/osol/docs/content/OSDEV/gentextid-207.html

OAMP - OpenBSD - http://www.devx.com/opensource/Article/40153

 

 

I think this post should get placed into CSS versus website critique.

[cssfreakie]

Oh crmamx you might want to add a minimum height of say min-height: 210px; to your photo album otherwise smaller images flow around the bigger ones.

this page: http://bayarearcsociety.com/tutorial/example_photo_album.html

[crmamx]

quickoldcar

"WampServer is the only packaged solution that will allow you to reproduce your production server."

 

But you are thinking that everyone is going to be using windows.

So why not list the AMP versions :

LAMP - Linux -  Download and installing ubuntu server is most likely the best and easiest way. http://www.ubuntu.com/download/server/download

 

To be honest I included the mention of Wamp because my mentor has been urging me to install it. But since I have only the one site I do not want to go to the trouble.

 

And being the tutorial is aimed at a CSS beginner, I have been thinking of removing the mention of Wamp server from the tutorial. What do you think?

I think this post should get placed into CSS versus website critique.

 

I will vote for that.

 

Thanks for taking the time.

[crmamx]

Oh crmamx you might want to add a minimum height of say min-height: 210px; to your photo album otherwise smaller images flow around the bigger ones.

this page: http://bayarearcsociety.com/tutorial/example_photo_album.html

 

I made them all the same height with my photo editor so do I still need to do that?

[KevinM1]

I think this post should get placed into CSS versus website critique.

 

Eh, I think it can remain here.  crmamx is looking for overall site critique, which includes, but is not limited to, critique on his content.  The CSS board is for specific CSS questions, which isn't what crmamx is asking/looking for.

[cssfreakie]

Oh crmamx you might want to add a minimum height of say min-height: 210px; to your photo album otherwise smaller images flow around the bigger ones.

this page: http://bayarearcsociety.com/tutorial/example_photo_album.html

 

I made them all the same height with my photo editor so do I still need to do that?

 

You did indeed, but what you didn't do is give them all a caption, making some objects higher than others. by supplying min-height you can fix that.

see image, what could happen on a different screensize

 

[attachment deleted by admin]

[crmamx]

Gotcha! Never would have had any idea what min-height was used for.

 

By the way, want to apologize for using your picture in the Photo Album ( 3rd from left ). It was a mistake and I will remove it immediately....

 

Got to view my main site using IE6 at a hobby store yesterday. It is a total mess. Asked the owner why he didn't upgrade and he said he never used it except to look up parts.

 

But I could care less. If you're so dumb you are still running IE6 you don't need to be looking at my site anyway.

 

By the way, I removed the section on Wamp. Concluded that it had no business in a tutorial for absolute CSS beginners.

[cssfreakie]

hehe crmamx, no need to apologize, it's not even my own monkey nor photo Just use it, it's fun! although i like the little monkey hanging on a branch more

 

something that could be nice to know is that if you target ie6 if you use float you need to set an extra property called display:inline;

Now that only counts for the first element that is floated either left or right, but it won't harm your site if you apply it too all things that are floated. if you used a reset.css most browser differences are gone. Anyway if you have loads of time left, use a conditional comments to give that display inline property to only ie6.

more info on conditional comments here: http://www.quirksmode.org/css/condcom.html

 

it could look like this:

 

normal stylesheet:

#columnleft{
  float:left;
  width:400px;
  overflow:hidden;
}

stylesheet for ie6

#columnleft{
   display:inline; /* because this element is floated */
}

[cssfreakie]

crap i double posted

[crmamx]

I understand what you are saying but then I am lost.

 

This is my CSS:

.thumbnail
{
    float: left;
    margin:5px;
    text-align: center;
    background:#0055BB;
    padding:3px;
    border:1px solid #fff;
    margin:0px;
    color:#fff;
    width:170px;
    min-height: 210px;
}

 

and you say that for IE6 I need to add:

#thumbnail{
   display:inline;         /* because this element is floated */
}

 

But then is seems I have defined the same ID twice.

 

And how and where and what in the HTML do I put this?

 

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

 

The special instructions ought to be : Get a decent browser...

 

 

 

[cssfreakie]

I mentioned 2 separate things.

 

the minheight is for all browsers so just pput that in you original stylesheet.

 

the second things was that you said in IE6 my site looks broken. A common cause for that is that someone didn't supply display:inline on floated elements. But if i were you I wouldn't bother really.

the link i gave about conditional commets is pretty clear. You place those in between the <head></head> tag there you can either add some styletags, just for ie6 or a <link> to an external stylesheet have a look at

 

http://eu.battle.net/wow/en/  and than view source. A clear example of targeting multiple browsers by using conditional comments.

[crmamx]

I mentioned 2 separate things.

 

1. the minheight is for all browsers so just put that in you original stylesheet.

 

2. the second things was that you said in IE6 my site looks broken. A common cause for that is that someone didn't supply display:inline on floated elements. But if i were you I wouldn't bother really.

 

1. I did already.

 

2. Thank you, I won't.

[crmamx]

Ok guys, site overhauled based on a lot of good critiques.

 

Give it another whirl and let me know what you think.

http://bayarearcsociety.com/tutorial/css_tutorial1.php