CODEWITHSUNDEEP
htmlvariablesperiod
Rob
Rob

Reputation: 53

What does a dot before a variable indicate in html?

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

Upvotes: 5

Views: 8937

Answers (4)

Couto
Couto

Reputation: 853

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

Upvotes: 15

Quentin
Quentin

Reputation: 943564

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, <!-- Modify these styles -->, is an error in HTML (and HTML compatible XHTML). A CSS comment is delimited with /* and */.

Upvotes: 0

elasticrash
elasticrash

Reputation: 1221

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

Upvotes: 0

Chandu
Chandu

Reputation: 82903

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

Upvotes: 0

Related Questions