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

Answer 1

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