I see you all new posters. Welcome.
@brownlord, @dhtml, @wisemania thanks for holding it down. Gracia.

The Box Model is a fundamental part of CSS Styling. As you may have deduced from the name, the concept teaches styling HTML elements while regarding them as boxes. The Box Model as been used extensively in CSS tutorials and has successfuly helped in an understanding. This is why I employ its use.

The Box Model
The Box represents all HTML elements that can be styled with some certain properties. These properties include but are not limited to margin, border, width, height and padding. Most times the box model refers to div s.

ehen...oga is here...

quick question: are you going to treat preprocessors?...

its d ONLY part in modern styling i dont get.

CODE-EATER:

quick question: are you going to treat preprocessors?...
its d ONLY part in modern styling i dont get.

No. Basics for now

The Box Model

This image is the Box Model. It illustrates the properties- width, height, padding, margin and border. The black box is 'The Box'. The Box represents all block-level elements that can be styled with the above listed properties.The width and height of the box is clearly visible. Thus when we refer to width and height, we are referring to the dimension of that element. The border is the line bounding the box/element. You will also notice a white box within our Box. It represents the text,images,tables,forms and other boxes that are in The Box. All these things are the content of The Box.
The space between the outer edges of the content and the inner edges of The Box is called padding. The Box is always in another container. Even if it encompasses the whole webpage, it's container would be the browser. The distance between the outer edges of The Box and its container is the margin.

As I stated earlier, The Box usually represents a div. Thus, we shall expantiate on divs. After this, we shall treat the Box Model properties in details.

Can you help! I need a website to sale used household and industrial items. I do not have much to spend because my pocket is very lean. How affordable will a good website be for the purpose. Stocks now over 500 but expandable.

So lets move on with the class, go on iyenimofe. . .

@iyenimofe well down job, keep it up

Doze unwanted posts shud be hiden....y shud diz thread be demoralized by some nuisance.......suffering 4rm d malady of d graviest species

what a thorogh and concise read from page 1 to the latest, I thank the tutors here... following

King of css is here , will not attend to any question jus here to choose 3 for scholarship #csscheats

CODE-EATER:
http://codemmunity.com/pages/css3_box-shadow_tutorials_and_examples

there are some "non standard" web practices in your tutorial.

Djtm:
there are some "non standard" web practices in your tutorial.

nope...not mine,my partner's...

Wat r d errs... lemme tell him

^^^He did not err, you guys should stop talkin like these. So far as the code works - i know quite a number of codes - some that are not even documented officially anywhere, and yet they work - because someone experimented, or exploited some hacks somewhere.
I repeat, as long as the code works just fine, just leave it alone.

Divs (Divisions) are HTML block-level elements that are used to layout specific portions of an HTML document. The div comes in the pair <div>Content</div>.
Divs have been generally accepted as a suitable alternative for tables, in regard to page layout. Thus, it is essential that you master the div tag as it will be impossible to create a webpage without it.
NOTE:Some may disagree with the statement above. Yes, you may use the <table> tag in layout, but that defies it original purpose- layout of tabular data.

However, div tags always appear with attributes.
<div attribute="value">Content</div>
How is a div used?
1) The div is first specified in the style sheet.
Syntax:
Name of Div{property:value}
2) The div is specified in the .html document.
Syntax:
<div attribute="name of div">Content</div>
3) Whatever properties/rules declared in the .css file will appear in the HTML document at the point where the div tag is inserted.

If the <div> is inserted in the .html document without any CSS modifications, nothing will appear in the subsequent webpage. Nothing. It'll just be blank.

dhtml: ^^^He did not err, you guys should stop talkin like these. So far as the code works - i know quite a number of codes - some that are not even documented officially anywhere, and yet they work - because someone experimented, or exploited some hacks somewhere.
I repeat, as long as the code works just fine, just leave it alone.

yes boss. *I never said he errd tho*

PLS AM HAVING PROBLEM WITH LINKING CSS TO HTML.




THANKS IN ADVANCE

Djtm:
yes boss. *I never said he errd tho*

True, so lets move on with the class then. . .we are nearing the interesting part

RICTPE: PLS AM HAVING PROBLEM WITH LINKING CSS TO HTML.




THANKS IN ADVANCE

ok,make i try help:

first of all,before u understand how to link or as some call it "embed" a stylesheet on a html doc,u need to first understand d different path systems used.
ABSOLUTE PATH:
an absolute path to a file in its simplest non-geeky terms is simply the FULL path to a file,it tell exactly where a file is on a server,consists of three main compaonents namely;protocol-domain/ip of server-file's location.

example

http://yourdomin.com/style.css
or
http://yourdomain.com/style/style.css

the first sends a query for a style.css file located in the ROOT of the server,the second does same but this time not in the root but in a folder or directory called style,inside which the style.css file is..

RELATivE PAtH

this in its simplest form is almost same as absolute,but this time without the protocol and domain..
simply put;it is the location of a file on the server in RELATION to the document that file is being called from..2much eng?,an example will clear the smoke..

lets rewrite the 2 previous examples:
1. /style.css

and

2. /style/style.css

it is presumed that u r trying to call a style.css file from your index.html file,located in the root dir..

now,for the first xample the style file is also on the root dir,so you simply put "/" which most reletive path links start with,it signifies the root of your server,and since the style file is located there u simply add the name of the style file "style.css"...it becomes "/style.css",wat u hav just done is tell the browser to call a file named style.css in the root dir

example 2 is basically the same,except that this time,it isnt in the root dir but rather a folder IN the root dir named style,and the style.css is in it,so it becomes "style/style.css"


LESSON CONTINUES IN NEXT POST

^^^that your style of relative linking will fail in some settings and is not entirely reliable. But i will leave it at that - since i am not the thread's bona fide teacher.

now,we'v been able to see how relative path makes things shorter,but what if that file is NOT in the root,what if your index.html file is in another folder,say "assets" and the style is in a "style" dir,what do we do?
simple really:

../style/style.css

simple as that...

what just happened?
the index.html file we are calling from is in a folder named assets,this assests sits in d root,the style we are calling is in the style folder,also in the root dir,you might be asking yourself,whynot just roll it in with "/",well the thing is,"/" dosnt always mean the root dir,it is also recognised as the CURRENT DIRECTORY..for instance,u have a "images" floder in ur assets folder,and an image or anoda style.css file in it,puting "/style.css"or "style/style.css" will call the style.css that is in the assets folder or the style.css file in the style folder whiich is in d assets folder,NOT the one in the root dir...that creates a problem,to bypass that,what we do is to add a ".." before the trailing slash:this tells the browser to TAKE ONE STEP OUT of the current directory and enter the style.css file which is in the root dir and fetch the style.css file...
if you have multiple/nested folders(i.e folders in folders in folders in folders),u'l need to add "../" for each step out of the current folder until you get to the location u want..e.g

../../../assets/images/some-random-pic.png

this example,i presume your dir structure as follows: /root containing=aFolder,anodaFolder,yetAnoda,assets,watEver...etc
then in that assets folder=images,something,anodaFolder,blablabla..

the file(maybe an index.html) with which we r calling FROM is located in a folder,which is in another folder,which is in another folder in the "watEver" dir..

if u notice...3 nested folders,3 "../" to represent each level...

FINAL LESSON IN NEXT POST

hopefully so far i havnt made u more confused...hopefully you actually learnt something...

now its time to do something with wat you'v learnt...LETS LINK A STYLE SHEET WITH BOTH METHODS..

sinerio one:you are browsing around the web and come across this great site,and you like the styling,or you uploaded your style in a different hosting site,or u just want to use a style sheet that isnt on your server,what method do we use?,obviously...absolute path is the only option...and this is how

<html><head>
<link rel="stylesheet" href="http://example.com/style.css" />
</head><body >blablabla</body></html>


that should work perfectly...obvioiusly what it does it include a style.css file located in the root of example.com site...

next an example with relative,to save time(cuz am typing from a touch device,cumbersome to say the least) am going to just write the link rel part and leave oda html stuff..

<link rel="stylesheet" href="/style.css" />


<link rel="stylesheet" href="../style.css" />



<link rel="stylesheet" href="../../style.css" />


if u'v understood the "jargons" i'v been saying you should understand the above three examples perfectly..hopefully u do,if not,notify..

FAQS
Q. which saves time more?
A. relative..reason obvious

Q. do i need to end the link tag with a trailing slash?
A. not necessary,but advised

Q. cant i just write the style in the html document directly?
A. not advised,if a site should obey all rules of progressive enhancments,then u r required to use external style sheets(dont ask me what P.E is,our teacher would lecture that)

final note:use absolute for only files that r not on your server,otherwise,relative path sytem is adviesd...remember,for each step out/back of a directory/folder u add a "../"


thank you...if i made any errata anywhere,please notify me @gurus in d house

What is the specific naming syntax of divs?
The answer lies with its attribute. This attribute has different forms but we shall concern ourselves with two vital forms- id and class.
1) Attribute 'id'- An id is an attribute of a div. An id occurs only once in an HTML document. It is preceded with a # sign.
Example
A div named #maindiv is used in a style sheet.
#maindiv:{background-color: orange;
width:56px;
height:45px;}
To insert it in the HTML document:
<div id="maindiv">I am an orange box</div>
When viewed in a browser, you will see an orange box 56px wide and 45px high with the text, "I am an orange box", within it.
#maindiv can appear only once in the html document. This does not cancel the existence of another id div named #subdiv in the same HTML document.