What does a dot before a variable indicate in html?

Question

I'm new to html and web coding in general. What do the periods before variables indicate in the following code?

<style>
<!-- Modify these styles -->
.page_title       {font-weight:bold}
.page_text        {color:#000000}
</style>
... JS code

Thanks

score 14 · Accepted Answer · edited May 23 '17 at 12:16

those are not variables. Those are CSS Selectors, and they represent a HTML node with that class per example

<div class="page_title">Page Title</div>

You use CSS Selectors to style those elements in the HTML

Since they've suggested. =)

There are a few ways to reference HTML nodes in CSS, the most common are ID's, Classes and the tag name.

take a look at this example

<div>
    <ul id="first_set">
       <li class="item"> Item 1 </li>
       <li class="item"> Item 2 </li>
    </ul>
    <ul id="second_Set">
       <li class="item"> Item 1 </li>
       <li class="item"> Item 2 </li>
    </ul>
</div>

Ok. we have a div with two unordered lists, each list as two list-items, now the CSS:

div { background-color: #f00; } 
#first_set { font-weight: bold; }
#second_set { font-weight: lighter; }
.item { color: #FF00DA }

the div selector will select all <div> 's in the HTML page, the # means ID, so #first_set it will select the object with that id in this case it will select

<ul id="first_set">

the dot symbol select classes so the .item selector will select all objects with the item class in this case it will select all

<li class="item">

This is just the basics really, you can mix these selectors to be more specific per example:

#first_set .item { text-decoration: underline; }

and it will only select the objects with class item that are inside the #first_set.

It's worth mentioning that in general, an ID (selected with #myID) should only be used ONCE on an HTML page, and a class can be used on multiple elements. Additionally, an element can have more than one class; just separate them with spaces. (e.g., <li class="item special-item">) – Platinum Azure

Thanks a lot Couto! I'll read up more now that I know what they're called. — Rob, Dec 29 '10 at 17:33
You might, given the nature of the question, also want to explain what hash-prefixed selectors are... `#thisElement` as an example. @Rob, if this answer helped, you can either up-vote it (click on the △ beside the question), or accept it as the 'accepted answer' (click on the tick-mark) — David Thomas, Dec 29 '10 at 17:34
@David Thomas, as you asked, i've added a more deeper (not to deep) explanation, since english is not my first language, i will be glad if you guys could revise it =) — Couto, Dec 29 '10 at 17:49
It's worth mentioning that in general, an ID (selected with `#myID`) should only be used ONCE on an HTML page, and a class can be used on multiple elements. Additionally, an element can have more than one class; just separate them with spaces. (e.g., `

score 0 · Answer 2 · answered Dec 29 '10 at 17:28

0

That is to mark a style grouping as a class in CSS. Please go through the tutorial @w3schools, that is a real good starter.

http://www.w3schools.com/css/default.asp

answered Dec 29 '10 at 17:28

Chandu

81,493
19
133
134

2

Avoid W3Schools, it is dreadful. http://wsc.opera.com/ is a better starting point. – Quentin Dec 29 '10 at 17:30
I didn't know about this site. Will check this site.Honestly I think w3schools.com is a good site for basic learning though. – Chandu Dec 29 '10 at 17:32
w3schools is awesome as a reference, but it provides no context for beginners, which is a shame =\ – Couto Dec 29 '10 at 17:35
1

W3Schools has many errors. Many of these are not noticeable if you only test how pages render in graphical browsers, but cause problems for screen readers, search engines and other non-visual user agents. Then you get to the programming tutorials, which use out of date practices at their best, and teach people how to write code with huge security holes at worst. – Quentin Dec 29 '10 at 17:35
As a reference, W3Schools is much worse then just using the language specifications. – Quentin Dec 29 '10 at 17:36

score 0 · Answer 3 · answered Dec 29 '10 at 17:30

0

usually the class something belongs to for example

.treeListContainer input

treelistcontainer is the class and input is the control within the class so the style only affects the controls within that class

answered Dec 29 '10 at 17:30

elasticrash

1,181
1
12
30

score 0 · Answer 4 · answered Dec 29 '10 at 17:41

The section you talk about is CSS embedded in HTML. Neither CSS nor HTML have variables, you are looking at selectors.

The dot prefix indicates that it is a class selector and will match an HTML element which is a member of the given class.

To make an element a member of a class, the class name is added to the space separated list given as the value of the class attribute.

Thus .page_title will match an element with:

class="foo page_title bar baz"

Generally speaking, however, anything you give a class name such as "page_title" to is likely to be the same thing as the main heading, so the HTML should usually look like:

<h1>Main heading goes here</h1>

And the CSS:

h1 { … }

Incidentally, , is an error in HTML (and HTML compatible XHTML). A CSS comment is delimited with /* and */.

Good catch David; we missed that completely. – Rob Dec 29 '10 at 20:36 — Rob, Dec 29 '10 at 20:36

What does a dot before a variable indicate in html?

4 Answers4

Linked

Related