CSS + HTML Basics

[Ben]

In this tutorial you will hopefully learn:
>>What CSS is
>>Why CSS is so useful
>>How to code CSS and which part does what
>>How to code CSS into your HTML (XHTML) Document

CSS stands for Cascading Style Sheets, it can and from my point of view should be used in most HTML or XHTML documents.

First of all, some people may be thinking why they should use CSS when they could just use some font tags?
Well CSS can speed up the loadind of your web pages because the CSS file can be placed in an external location, which will be called up just once and then cached (stored) on the user's computer so it does not need to be loading everytime somebody views your page. With CSS you can also position anything you want EXCATLY where you want it on the page, pixel perfect
CSS also saves coding, for example:

<font size="12px" color="#333333"> Texty McTextus </font>
 <font size="9px" color="#cccccc"> Texty McTextus With a hint of more text </font>
<font size "12px" color="#333333"> Texty McTextus with some text </font>

This could be cleaned up by using CSS:


The CSS

.maintext {
font-color:#333333;
font-size:12px;
}

.subtext {
font-color:#cccccc;
font-size:9px;
}

The HTML

<p class="maintext">Texy McTestus </p>
<p class="subtext"> Texty McTextus With a hint of more text**</p>
<p class="maintext"> Texty McTextus with some text </p>

Right lets break all this down...

Lets look at the CSS, here I will show you what each part does.

.maintext { this gives the class a name, it is a class in this case because it has a dot (.) at the beginning. (I will go through classes, ID's and Tags later.) The '{' ends the list of classes,IDs or Tags.

font-color:#333333; This is as simple as it looks, font-color is telling what to modify, and the ':' is the beginning of the information and #333333 is what the modification is, ending with a ; to end the information.

font-size:12px; You should be able to guess this by now using the example above.

} This ends the 'maintext' class.



See if you can work out the 'subtext' class on your own



The HTML is very simple,

<p class="maintext">Texy McTestus </p> <p opens the paragraph tag, class= is stating which class (CSS Class) to use and &#39;"maintext"&#39; is the class to use. Don&#39;t forget the speech marks on the class&#33;


See how simple it is?



Because I am a fan of the more simple designs with more code than images I always use divs and CSS instead of tables, I use Divs instead for many reasons:

* Browsers read through tables twice before displaying their contents, once to work out their structure and once to determine their content

* Tables appear on the screen all in one go - no part of the table will appear until the entire table is downloaded and rendered

* Tables encourage the use of spacer images to aid with positioning

* CSS generally requires less code than cumbersome tables

* All code to do with the layout can be placed in an external CSS document, which will be called up just once and then cached (stored) on the user&#39;s computer; table layout, stored in each HTML document, must be loaded up each time a new page downloads

* With CSS you can control the order items download on to the screen - make the content appear before slow-loading images and your site users will definitely appreciate it.


Why should you use divs and not tables? Well first of all your code will be much cleaner, <div id=#idhere"> </div> is much tidier than loads of table tags and padding etc. you can also change complete sites without touching the html, just by modifying the CSS, a great example of this is CSSZenGarden. They have created some amazing layouts without touching the HTML.

Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web.


The main problems with using tables is:

* mixes presentational data in with your content.

* This makes the file sizes of your pages unnecessarily large, as users must download this presentational data for each page they visit.

* Bandwidth ain&#39;t free.

* This makes redesigns of existing sites and content extremely labor intensive (and expensive).

* It also makes it extremely hard (and expensive) to maintain visual consistency throughout a site.

* Table-based pages are also much less accessible to users with disabilities and viewers using cell phones and PDAs to access the Web.


Here comes the trickest bit, still, this is not tricky...
There are 3 different rules you can apply, you can apply a:
>>Class (can apply to any tag)
>>Tag (which changes the look of that tag (everytime it is used ) )
>>ID&#39;s + pseudos (I just use ID)

Lets go into more detail; you need to know where to use each type of rule. This depends on your coding style, this is mine, it may be similar to yours or completely different.

I use classes for things such as text, ID&#39;s and Tags do not work with text so im forced to use a class.
I use a Tag rule when i want a rule to apply to only a certain tag, for example if i wanted every image&#39;s border to be removed i would create this CSS in the header:

img {
border:0;
}

So every image (in an img tag) would have its border removed, this is useful because you onyl need to create the rule and its done, you do not need to apply that to any tags etc.

I mainly use ID&#39;s when styling Divs, Not really sure why. Its the way I learnt it and i have never tried classes.


Now you know how to write CSS and apply it to tags go and practice it untill i have finished the full website tutorial
I will update this when its done

And note, i have been doing this for about a week (03/04/2006) and i know all this. That is how simple it is.

hope you learnt something,
xXx--Ben--xXx

Note: Please do not Rip this tutorial, if you wish to use it or any part of it please ask me and then I will give you permission.

[unit_number_43]

You could have actually used span&#39;s instead of p tags. Since a p tag will also add spacing because it&#39;s a new paragraph.

Also, you put class=".maintag" it should just be class="maintag". the peroid is for specifying it as a CLASS in the CSS part of the code.

Looks good. Good way to get started with CSS if you haven&#39;t used it before.

[Ben]

Thanks for telling about that
Why i still use DW otherwise i would make these crappy errors.

[unit_number_43]

<div class='quotetop'>QUOTE(Project_Number_10 &#064; Apr 4 2006, 11&#58;56 AM) [snapback]163800[/snapback]</div>

Thanks for telling about that
Why i still use DW otherwise i would make these crappy errors.
[/b]

lol, don&#39;t blame DW. I use DW too. just codeview only.

[Ben]

I didnt blame DW Lol :P

I mean thats why I use DW, if I did not I would make so many errors but with DW I don&#39;t make them

[rosyolivia]

Nice sharing on HTML&css basics.

[doh85]

Ditch Dreamweaver and use Notepad++. <3

[patriklko]

To create a website HTML and CSS in combination plays a very important role in designing a website...CSS will help in creating a website code which can be edited easily in future within minutes if there is any designing issues like changing color of website or image or any issue related to hyperlink...

[Monroe]

Ditch Dreamweaver and use Notepad++. <3

I second this.

[nashir]

This is very helpfully for me to learn HTML and CSS. Thanks.