This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Dreamweaver > February 2006 > Re: Totorial confition
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Re: Totorial confition
|
|
|
| This was asked yesterday, do a search for "Is this a standard CSS opening
line"
--
Pablo
Web
.....................................
http://www.dellwebsites.com
.....................................
Photography
.....................................
http://www.dellimages.com
....................................."Deon" <deonREMOVE@REMOVEsincro.co.za>
wrote in message news:dsf10e$npt$1@forums.macromedia.com...
> Hi there,
>
> According to this tutorial:
>
> http://www.macromedia.com/devnet/dr...pts_pt3_03.html
>
> I get this:
>
> html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
> margin: 0;
> padding: 0;
> border: 0;
> }
> body {
> color: #666666;
> background: #666;
> font: 100.01% Arial, Helvetica, sans-serif;
> text-align: center;
> }
>
> As I am very new to CSS I see & do tutorials, but do not necessarily know
> what it means/does.
>
> Why do I have to make a separate ruling for body even though it is part of
> the first line?
>
> I will really appreciate some clarification.
>
> Regards,
> Deon
| |
| John Waller 2006-02-12, 6:36 pm |
| The first line is setting properties for margin, padding and border for all
those elements (html, body, ul, ol, li etc etc) to which those properties
need to be applied.
In effect, it's zeroing out all default margin, padding and border values
which would otherwise be applied to those elements by the browser. Different
browser often have different defaults. It's kind of a clean starting point
for the site.
The 2nd line is setting other properties exclusively for the <body> tag
which do not apply to the other elements (html, ul, ol, li etc).
--
Regards
John Waller
| |
| Josie1one 2006-02-12, 6:36 pm |
| I gave Deon that tutorial to work through when he asked the question. Hey
Deon - did you work your way through or jump!??
Jo
"Pablo" <dell@takeoutdellwebsites.com> wrote in message
news:dsf1t9$325$2@forums.macromedia.com...
> This was asked yesterday, do a search for "Is this a standard CSS opening
> line"
>
>
> --
> Pablo
>
> Web
> ....................................
> http://www.dellwebsites.com
> ....................................
> Photography
> ....................................
> http://www.dellimages.com
> ...................................."Deon" <deonREMOVE@REMOVEsincro.co.za>
> wrote in message news:dsf10e$npt$1@forums.macromedia.com...
>
>
| |
|
| Okay Deon,
Here is what I would use if I were you:
html, body {
height: 100%;
margin-bottom: 1px;}/* the above forces the pages to have a scroll
bar*/body {
background:#fff url(images/image.jpg) repeat;/*refers to the body bg image
and forces the image to repeat*/
font: 100.01%/135% Georgia, "Times New Roman", Times, serif;/*font size,
line height, font family*/
text-align: center; /*IE5 bug, use this if you want a horizontal centering
layout and give a hoot about IE5 */
padding:0;/*kills all padding, sets them to zero*/
margin:0;/*kills all margins, sets them to zero*/
}Just use the above, obviously you will need to adapt your font etc. Go here
http://www.htmlhelp.com/reference/c...k-tutorial.html print out some
stuff and experiment."Josie1one" <joleros[nospam]@yahoo.com> wrote in
message news:dsf28q$3ji$1@forums.macromedia.com...
>I gave Deon that tutorial to work through when he asked the question. Hey
>Deon - did you work your way through or jump!??
> Jo
>
> "Pablo" <dell@takeoutdellwebsites.com> wrote in message
> news:dsf1t9$325$2@forums.macromedia.com...
>
>
| |
|
| Jo,
thanx again for the link to the tutorial.
No, I did not jump and went through the whole tutorial. But many thing
are being done in the tutorial without really explaining why it is done.
Regarding this question, I was just wondering, for what ruling does my
browser listen and is it not duplication to have body as part of another
line and now have it on its own?
I think I understand the explanation given. The property must not be
repeated in both lines?
Deon
Josie1one wrote:
> I gave Deon that tutorial to work through when he asked the question. Hey
> Deon - did you work your way through or jump!??
> Jo
>
> "Pablo" <dell@takeoutdellwebsites.com> wrote in message
> news:dsf1t9$325$2@forums.macromedia.com...
>
>
>
| |
|
| Blimey that came out looking like a dogs dinner, here's another go:
Okay Deon,
Here is what I would use if I were you:
html, body {
height: 100%;
margin-bottom: 1px;}
/* the above forces the pages to have a scroll bar*/
body {
background:#fff url(images/image.jpg) repeat;/*refers to the body bg image
and forces the image to repeat*/
font: 100.01%/135% Georgia, "Times New Roman", Times, serif;/*font size,
line height, font family*/
text-align: center; /*IE5 bug, use this if you want a horizontal centering
layout and give a hoot about IE5 */
padding:0;/*kills all padding, sets them to zero*/
margin:0;/*kills all margins, sets them to zero*/
}
Just use the above, obviously you will need to adapt your font etc. Go here
http://www.htmlhelp.com/reference/c...k-tutorial.html print out some
stuff and experiment."
"Pablo" <dell@takeoutdellwebsites.com> wrote in message
news:dsf3rb$5jh$1@forums.macromedia.com...[color=darkred]
> Okay Deon,
>
> Here is what I would use if I were you:
>
> html, body {
> height: 100%;
> margin-bottom: 1px;}/* the above forces the pages to have a scroll
> bar*/body {
> background:#fff url(images/image.jpg) repeat;/*refers to the body bg image
> and forces the image to repeat*/
> font: 100.01%/135% Georgia, "Times New Roman", Times, serif;/*font size,
> line height, font family*/
> text-align: center; /*IE5 bug, use this if you want a horizontal centering
> layout and give a hoot about IE5 */
> padding:0;/*kills all padding, sets them to zero*/
> margin:0;/*kills all margins, sets them to zero*/
> }Just use the above, obviously you will need to adapt your font etc. Go
> here http://www.htmlhelp.com/reference/c...k-tutorial.html print out
> some stuff and experiment."Josie1one" <joleros[nospam]@yahoo.com> wrote in
> message news:dsf28q$3ji$1@forums.macromedia.com...
| |
|
| Thank you so much for your reply and suggestions. I will use that and
see what happens. I have a small site that was done in tables which I
want to "upgrade" to CSS.
Thanx again,
Deon
Pablo wrote:
> Blimey that came out looking like a dogs dinner, here's another go:
>
> Okay Deon,
>
> Here is what I would use if I were you:
>
> html, body {
> height: 100%;
> margin-bottom: 1px;}
>
> /* the above forces the pages to have a scroll bar*/
>
> body {
> background:#fff url(images/image.jpg) repeat;/*refers to the body bg image
> and forces the image to repeat*/
>
> font: 100.01%/135% Georgia, "Times New Roman", Times, serif;/*font size,
> line height, font family*/
>
> text-align: center; /*IE5 bug, use this if you want a horizontal centering
> layout and give a hoot about IE5 */
>
> padding:0;/*kills all padding, sets them to zero*/
>
> margin:0;/*kills all margins, sets them to zero*/
>
> }
>
> Just use the above, obviously you will need to adapt your font etc. Go here
> http://www.htmlhelp.com/reference/c...k-tutorial.html print out some
> stuff and experiment."
>
>
> "Pablo" <dell@takeoutdellwebsites.com> wrote in message
> news:dsf3rb$5jh$1@forums.macromedia.com...
>
>
>
>
| |
| Josie1one 2006-02-12, 6:36 pm |
| Deon
Sorry, it really was meant as a joke! I found I had to go through it a bit
at a time, doing the exercises and then it all made sense. I'm still very
much learning myself and CSS seems to take a lot of learning - but boy is it
worth it!
Jo
"Deon" <deonREMOVE@REMOVEsincro.co.za> wrote in message
news:dsf3ss$4qd$1@forums.macromedia.com...[color=darkred]
> Jo,
>
> thanx again for the link to the tutorial.
>
> No, I did not jump and went through the whole tutorial. But many thing are
> being done in the tutorial without really explaining why it is done.
> Regarding this question, I was just wondering, for what ruling does my
> browser listen and is it not duplication to have body as part of another
> line and now have it on its own?
>
> I think I understand the explanation given. The property must not be
> repeated in both lines?
>
> Deon
>
>
>
>
>
> Josie1one wrote:
| |
|
| Josie,
another quick one:
What is the difference between
p em {
color: #990000;
}
and
p, em {
color: #990000;
}
with the , between p & em?
I think, and this is a wild guess, that the p em means that any em
between <p></p> is emphasized. With the latter, the color rule goes for
<p> & <em>?
Thanx again!
Deon
Josie1one wrote:
> I gave Deon that tutorial to work through when he asked the question. Hey
> Deon - did you work your way through or jump!??
> Jo
>
> "Pablo" <dell@takeoutdellwebsites.com> wrote in message
> news:dsf1t9$325$2@forums.macromedia.com...
>
>
>
| |
|
| Pablo,
I understand about classes and ID's, but all I want to know if there's a
difference between
p em {hgkhgkghghjgkjhdfkghdfgkjh; }
and
p, em {hgkhgkghghjgkjhdfkghdfgkjh; }
Regards,
Deon
Pablo wrote:
> p { font-size:0.9em; color: #990000; }
>
> the above will style size and colour.
>
> Just as:
>
> p { font-size:80%; color: #000; }
>
> There are classes and id's too:
>
> Go here:
>
> http://www.w3schools.com/css/css_syntax.asp
>
>
>
>
>
> "Deon" <deonREMOVE@REMOVEsincro.co.za> wrote in message
> news:dsf9k6$4qd$3@forums.macromedia.com...
>
>
| |
| Josie1one 2006-02-12, 6:36 pm |
| So, Pablo, is the comma for separating group selectors?
Jo
"Pablo" <dell@takeoutdellwebsites.com> wrote in message
news:dsfaio$eji$1@forums.macromedia.com...
> p { font-size:0.9em; color: #990000; }
>
> the above will style size and colour.
>
> Just as:
>
> p { font-size:80%; color: #000; }
>
> There are classes and id's too:
>
> Go here:
>
> http://www.w3schools.com/css/css_syntax.asp
>
>
>
>
>
> "Deon" <deonREMOVE@REMOVEsincro.co.za> wrote in message
> news:dsf9k6$4qd$3@forums.macromedia.com...
>
| |
| Josie1one 2006-02-12, 6:36 pm |
| Phew I'm glad you answered Pablo! I'm still learning and was trying to find
the right replies with a "wait for the experts" foreword.
Jo
"Pablo" <dell@takeoutdellwebsites.com> wrote in message
news:dsfaio$eji$1@forums.macromedia.com...
> p { font-size:0.9em; color: #990000; }
>
> the above will style size and colour.
>
> Just as:
>
> p { font-size:80%; color: #000; }
>
> There are classes and id's too:
>
> Go here:
>
> http://www.w3schools.com/css/css_syntax.asp
>
>
>
>
>
> "Deon" <deonREMOVE@REMOVEsincro.co.za> wrote in message
> news:dsf9k6$4qd$3@forums.macromedia.com...
>
| |
|
| p { font-size:0.9em; color: #990000; }
the above will style size and colour.
Just as:
p { font-size:80%; color: #000; }
There are classes and id's too:
Go here:
http://www.w3schools.com/css/css_syntax.asp
"Deon" <deonREMOVE@REMOVEsincro.co.za> wrote in message
news:dsf9k6$4qd$3@forums.macromedia.com...[color=darkred]
> Josie,
>
> another quick one:
>
> What is the difference between
>
> p em {
> color: #990000;
> }
>
> and
>
> p, em {
> color: #990000;
> }
>
> with the , between p & em?
>
> I think, and this is a wild guess, that the p em means that any em between
> <p></p> is emphasized. With the latter, the color rule goes for <p> &
> <em>?
>
> Thanx again!
>
> Deon
>
>
>
> Josie1one wrote:
| |
|
|
|
| Josie & Pablo,
thanx for your patience & time.
Am I correct in saying, with:
p, em {color: red}
ALL text included between either <p></p> or <em></em> will be red.
With:
p em {color:red; }
only text surrounded with <em></em> between <p> and </p> will be red and
not text surrounded by <p></p>.
Sorry for these questions.
Deon
Josie1one wrote:
> So, Pablo, is the comma for separating group selectors?
> Jo
>
> "Pablo" <dell@takeoutdellwebsites.com> wrote in message
> news:dsfaio$eji$1@forums.macromedia.com...
>
>
>
| |
|
| Look:
p, h1, h3, h6 { font-size:0.9em; color: #990000; }
The above will make all the selectors ie: p, h1,h3 and h6 font size 0.9em
and the font colour #990000
p { font-size:0.9em; color: #990000; }
Will only apply to p
In other words it's a bit silly doing this:
p { font-size:0.9em; color: #990000; }
h1 { font-size:0.9em; color: #990000; }
h3 { font-size:0.9em; color: #990000; }
h6 { font-size:0.9em; color: #990000; }
That's why you group selectors. Seperate with a comma.
"Deon" <deonREMOVE@REMOVEsincro.co.za> wrote in message
news:dsfb45$4qd$4@forums.macromedia.com...[color=darkred]
> Pablo,
> I understand about classes and ID's, but all I want to know if there's a
> difference between
>
> p em {hgkhgkghghjgkjhdfkghdfgkjh; }
>
> and
>
> p, em {hgkhgkghghjgkjhdfkghdfgkjh; }
>
> Regards,
> Deon
>
>
> Pablo wrote:
| |
|
| Pablo,
100% right. My question was, what happens when you take out the comma.
Regards,
Deon
Pablo wrote:
> Look:
>
> p, h1, h3, h6 { font-size:0.9em; color: #990000; }
>
> The above will make all the selectors ie: p, h1,h3 and h6 font size 0.9em
> and the font colour #990000
>
> p { font-size:0.9em; color: #990000; }
>
> Will only apply to p
>
> In other words it's a bit silly doing this:
>
> p { font-size:0.9em; color: #990000; }
>
> h1 { font-size:0.9em; color: #990000; }
>
> h3 { font-size:0.9em; color: #990000; }
>
> h6 { font-size:0.9em; color: #990000; }
>
> That's why you group selectors. Seperate with a comma.
>
>
> "Deon" <deonREMOVE@REMOVEsincro.co.za> wrote in message
> news:dsfb45$4qd$4@forums.macromedia.com...
>
>
>
| |
|
| Take the bloody thing out and see :)
It won't work.
"Deon" <deonREMOVE@REMOVEsincro.co.za> wrote in message
news:dsfc8j$4qd$6@forums.macromedia.com...[color=darkred]
> Pablo,
> 100% right. My question was, what happens when you take out the comma.
>
> Regards,
> Deon
>
>
> Pablo wrote:
| |
| Murray *TMM* 2006-02-12, 6:37 pm |
| Yes, you are correct.
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"Deon" <deonREMOVE@REMOVEsincro.co.za> wrote in message
news:dsfbos$4qd$5@forums.macromedia.com...[color=darkred]
> Josie & Pablo,
>
> thanx for your patience & time.
>
> Am I correct in saying, with:
>
> p, em {color: red}
>
> ALL text included between either <p></p> or <em></em> will be red.
>
> With:
>
> p em {color:red; }
> only text surrounded with <em></em> between <p> and </p> will be red and
> not text surrounded by <p></p>.
>
> Sorry for these questions.
>
> Deon
>
>
>
> Josie1one wrote:
| |
| Murray *TMM* 2006-02-12, 6:37 pm |
| Yes, I think it was too.
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"Deon" <deonREMOVE@REMOVEsincro.co.za> wrote in message
news:dsfelb$gvj$1@forums.macromedia.com...
> Murray *TMM* wrote:
> Thanx Murray,
>
> I think my question was misunderstood. Thanx for your help - again.
>
> Deon
| |
| Josie1one 2006-02-12, 6:37 pm |
| Don't do it! Stick to the basics Deon! Wait! Learn more!
What Pablo is saying beautifully is a group of things separated by commas
such as color, h1, h2 will have the property given (eg #FFFFFF). This was
obviously said better by Pablo (and as he said - try it!) but perhaps just
spelled out more. I strongly suggest you do everything the long way and use
what you're asking about later.
Jo
"Pablo" <dell@takeoutdellwebsites.com> wrote in message
news:dsfckb$hbj$1@forums.macromedia.com...
> Take the bloody thing out and see :)
>
> It won't work.
>
>
>
> "Deon" <deonREMOVE@REMOVEsincro.co.za> wrote in message
> news:dsfc8j$4qd$6@forums.macromedia.com...
>
| |
|
| I think some misunderstanding arose in the thread, thus said I agree with
you Josie (if I understand correctly) that Deon should start slowly and then
move up a gear. Getting to grips with css is easier the easy way, keep
things understandable, clear and simple.
"Josie1one" <joleros[nospam]@yahoo.com> wrote in message
news:dsfdvg$jc0$1@forums.macromedia.com...
> Don't do it! Stick to the basics Deon! Wait! Learn more!
> What Pablo is saying beautifully is a group of things separated by commas
> such as color, h1, h2 will have the property given (eg #FFFFFF). This was
> obviously said better by Pablo (and as he said - try it!) but perhaps just
> spelled out more. I strongly suggest you do everything the long way and
> use what you're asking about later.
> Jo
>
> "Pablo" <dell@takeoutdellwebsites.com> wrote in message
> news:dsfckb$hbj$1@forums.macromedia.com...
>
>
| |
|
| Murray *TMM* wrote:
> Yes, you are correct.
>
Thanx Murray,
I think my question was misunderstood. Thanx for your help - again.
Deon
| |
| Thierry | www.TJKDesign.com 2006-02-12, 6:37 pm |
| Deon wrote:
> Hi there,
>
> According to this tutorial:
>
>
http://www.macromedia.com/devnet/dr...pts_pt3_03.html
>
> I get this:
>
> html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
> margin: 0;
> padding: 0;
> border: 0;
> }
> body {
> color: #666666;
> background: #666;
> font: 100.01% Arial, Helvetica, sans-serif;
> text-align: center;
> }
Are these rules straight from the tutorial?
Because text *and* background are the same color...
--
Thierry | http://www.TJKDesign.com | CSS-P Templates + Articles:
CSS Popups, CSS 3 Column Layout, CSS Tabs, CSS Dropdown Menu,
TIP Method, Sliced Images, Clean Popup Windows, Easy Maintenance.....
| |
| Josie1one 2006-02-12, 6:37 pm |
| Sorry Deon - I'm so glad you got sorted out.
Jo
"Deon" <deonREMOVE@REMOVEsincro.co.za> wrote in message
news:dsfelb$gvj$1@forums.macromedia.com...
> Murray *TMM* wrote:
> Thanx Murray,
>
> I think my question was misunderstood. Thanx for your help - again.
>
> Deon
| |
|
| No problem. thanx for the help.
Deon
Josie1one wrote:
> Sorry Deon - I'm so glad you got sorted out.
> Jo
>
> "Deon" <deonREMOVE@REMOVEsincro.co.za> wrote in message
> news:dsfelb$gvj$1@forums.macromedia.com...
>
>
>
>
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|