quick question why the "dot"?

Forum Moderators: not2easy

Message Too Old, No Replies

quick question why the "dot"?

the dot

ichiro

8:48 am on Apr 23, 2009 (gmt 0)

is the dot (.) necessary? if so, why?

THANKS!

.left {
background: #FCDB8C;
color: #000000;
border: 1px solid #000000;
}

.middle {
background: #EFBE00;
background-image: url('images/cell1.gif');
color: #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}

.mainbody {
background: #FFFFFF;
color: #000000;
border: 1px solid #000000;
padding: 15px;
text-align: justify;
}

.navigation {
background: #FFFFFF;
color: #000000;
border: 1px solid #000000;
text-align: center;
}

.copyright {
color: #000000;
font-size: 85%;
letter-spacing: 2;
font-weight: bold;
padding: 2px;
text-align: center
}

.hottopic {
border: 1px solid #000000;
padding: 5px;
font-size: 80%;
text-align: left;
background: #B9C4E4;
color: #000000;
}

.form {
border: 1px solid #000000;
background: #95A2CE;
color: #000000;
letter-spacing: 2;
font-weight-bold
}

g1smd

9:34 am on Apr 23, 2009 (gmt 0)

It matches the

class="theclassname"

in the HTML.

You can only use an ID once in a page of HTML, but you can use the same class name multiple times. Classes are very useful.

ichiro

10:06 am on Apr 23, 2009 (gmt 0)

i should have also said earlier that i looked for ".left", etc. in the CSS spec, i found "left", etc. but no dots (i/e.. ".left").

so you are saying that is not necessary, it's just an author created (author's word choice) class name?

it could be (and have the same effect as long as it is referred to in the same places in the html) ?:

myclassName {
background: #FCDB8C;
color: #000000;
border: 1px solid #000000;
}

.myclassName2 {
background: #EFBE00;
background-image: url('images/cell1.gif');
color: #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}

etc....? in short the dots are not required by any spec. ?

ichiro

10:10 am on Apr 23, 2009 (gmt 0)

for example, here:
CSS Code:
p.first{ color: blue; }
p.second{ color: red; }
HTML Code:
<html>
<body>
<p>This is a normal paragraph.</p>
<p class="first">This is a paragraph that uses the p.first CSS code!</p>
<p class="second">This is a paragraph that uses the p.second CSS code!</p>
...

are the dots required? or can it be: pfirst{ color: blue; }
psecond{ color: red; }

are there alternatives to the "dot" in the above example or is this actually spec?

ichiro

10:12 am on Apr 23, 2009 (gmt 0)

e.g., alternatives like: p first{

using a space instead?

ichiro

10:19 am on Apr 23, 2009 (gmt 0)

maybe the ".left" stuff i questioned should read, well, something before the dot... like:

"p.left"? why in my example of "p.first" (above) need the/require dot?

ichiro

10:29 am on Apr 23, 2009 (gmt 0)

OK, apparently, if i'm reading this right, the dot IS required:

You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:
.center {text-align:center}
In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:
<h1 class="center">This heading will be center-aligned</h1>
<p class="center">This paragraph will also be center-aligned.</p>
[w3schools.com...]
?
[edited by: tedster at 3:28 am (utc) on April 25, 2009]
[edit reason] attribute the quote [/edit]

ichiro

10:34 am on Apr 23, 2009 (gmt 0)

the ANSWER, yes it IS required, gsmd1:

< unattributed quote removed >

[edited by: tedster at 3:36 am (utc) on April 25, 2009]

g1smd

10:47 am on Apr 23, 2009 (gmt 0)

= styles all paragraphs.

.name

= styles all stuff that has class name of "name", could be a div, h1, p, li, img, or anything at all.

p.name

= styles only paragraphs with class name of "name". Does not style other elements (ul, h1, img, etc) with the same class name. Does not style paragraphs with a different class name.

mattur

10:50 am on Apr 23, 2009 (gmt 0)

The dot matches a class name as g1smd posted above.

p {...}

applies to <p> elements

.p {...}

applies to all elements with with class "p" eg <p class="p">, <h1 class="p">, <i class="p"> etc

p.p {...}

applies to all <p> elements with class "p" i.e. <p class="p"> but doesn't apply to <h1 class="p">, <i class="p"> etc

#p {...}

applies to a single element with an ID of "p" eg <p id="p"> or <h1 id="p"> or <i id="p"> etc.

CSS Crash Course - Font Control and Basic Syntax [webmasterworld.com]

ichiro

10:50 am on Apr 23, 2009 (gmt 0)

got it, THANKS!

g1smd

10:51 am on Apr 23, 2009 (gmt 0)

Oh, your original question really was as simple as "can I omit the dot from .left in the code"?

No you cannot. The dot signifies that this is a class name.

ichiro

11:05 am on Apr 23, 2009 (gmt 0)

cool, sorry if i was unclear.

ichiro

11:15 am on Apr 23, 2009 (gmt 0)

and so, the moral of the story is:

you can use actual html elements ()no added symbol(s) necessary, e.g. dot) in the element name on an *external style sheet (and without referring to them in the html]; and, you can also create CSS classes in an *external style sheet, named whatever you like, preceded by a dot (then refer to them in the html).

(*some of this, not all, also pertains to block or in-line CSS.)

ichiro

11:18 am on Apr 23, 2009 (gmt 0)

hmmm, not so sure about my * parts. must have thought block and in-line meant simply CSS in the html (not external), i see there are display properties, right?

HelenDev

11:18 am on Apr 23, 2009 (gmt 0)

Yep, that sounds right. And using a space means something else too...

div p {...} means that every time a p is within a div it will use this style.

ichiro

11:21 am on Apr 23, 2009 (gmt 0)

damn, ok:
inline dfoes mean on the html page (not external).

and i do realize you can have both inline and external. conflicts resolve to inline.

g1smd

11:30 am on Apr 23, 2009 (gmt 0)

There are three places you can put CSS information:

- in an external CSS file (advantage: one file styles the whole site, easy to maintain, whole site is consistent, file is cached so it will load once per visit not once per page view)
- in the HEAD section of each page (disadvantage: hard to maintain, makes page load slower) - OK for single item that applies to ONLY one page {but still not recommended}.
- inline on the HTML element itself (disadvantage: code bloat; impossible to maintain) - just don't do it.

Another thing. if you find yourself repeating the same class name over and over in the HTML, change the code so that the class name goes on the parent container, and then style it using the parent child { .... } notation.

That is, change the HTML from:

<div>
<p [b]class="name"[/b]>Text goes here.</p>
<p [b]class="name"[/b]>Text goes here.</p>
<p [b]class="name"[/b]>Text goes here.</p>
<p [b]class="name"[/b]>Text goes here.</p>
<p [b]class="name"[/b]>Text goes here.</p>
<p [b]class="name"[/b]>Text goes here.</p>
</div>

to:

<div [b]class="name"[/b]>
<p>Text goes here.</p>
<p>Text goes here.</p>
<p>Text goes here.</p>
<p>Text goes here.</p>
<p>Text goes here.</p>
<p>Text goes here.</p>
</div>

and change the CSS from:

[b]p.[/b]nam[b]e {[/b] ... }

to:

[b]div.[/b]nam[b]e p {[/b] ... }

Notice the space between

div.name

and

here.

ichiro

11:50 am on Apr 23, 2009 (gmt 0)

very good. ( yes, i have observed those spaces and knew they were mandatory.)

THANKS

btw, any suggestions/tips on stripping down and site that does have an external sheet but is nevertheless bloated in the html?

this site:
<snip>

recently i was asked this about that site:

"And, if you can do it easily, can we adjust the fonts on the home page titles so that they are all uniform in size? Bigger than the small titles, but smaller than the large titles."

not quite sure what she specifically means yet. maybe you see it?

[edited by: swa66 at 5:06 pm (utc) on April 23, 2009]
[edit reason] No URLs, no site reviews please see ToS and forum charter [/edit]

ichiro

11:52 am on Apr 23, 2009 (gmt 0)

got to sleep nowwwww.........

HelenDev

12:42 pm on Apr 23, 2009 (gmt 0)

you'll be dreaming about css ;)

ichiro

7:33 pm on Apr 23, 2009 (gmt 0)

darn. that site was for disabled school kids whose parents are trying to get reform, all volunteer. i volunteered to upload and link their documents (maintain the site for a while). the site creator is not anymore.

<snip>

don't want to break any rules so i'm just asking .

[edited by: swa66 at 11:58 pm (utc) on April 23, 2009]
[edit reason] Keep discussions in the forum please. [/edit]

HelenDev

10:06 am on Apr 24, 2009 (gmt 0)

The etiquette here is to post the code rather than link to the site, as sites come and go and we want all the info to be here to help someone in the future who might be looking at this.

You don't have to post all the code, just the relevant bits.