Question

I understand the title is a bit misleading, but I come from an Object-Oriented background, and I’ve recently began a shift towards web development. I’ve only got a basic grasp of HTML, and been learning and messing around with CSS, but there are some parts of it that are a bit confusing, and I’m trying to get it into terms I can understand.

My CSS:

.Person .span4 p
{
     margin-left: 10px;
     margin-right:10px;
     margin-top:10px;
}

From what I can understand, this means that any p tag that is inside a container, like with the class of “span4″, which is in turn inside another container that has class=”Person” will be formatted with the specifications listed above.
In other words person.span4.p.format(String[] formatArgs), where the formatArgs are the margin-left, right, and top.

The Question: Is this an appropriate way to look at it?

I know it might be comparing apples to oranges, but I’d like to get an opinion before I go running with some conclusion that could be very wrong, and an actual explanation on how these work.

Answer 1

Your question about .Person .span4 p is correct, that will style a p element that’s a descendant of an element with a span4 class that’s a descendant of an element with a Person class.

However I wouldn’t try to interpret classes in HTML as similar in any way to OO classes. They’re completely different concepts, and I think that’ll just end up confusing things.

Classes can be assigned to HTML elements using the class attribute (class="span4"), and these can then be used in CSS or JavaScript to apply additional styling or behaviours to those elements. Think of giving an element a class as tagging it with a particular keyword, so it can be easily targeted later. Elements can also be assigned multiple classes by separating them with a space, eg. class="span4 box".

In addition, .Person .span4 p isn’t actually a “class”, it’s a selector. The .span4 syntax is called a class selector, the p is an element selector, and using a space between two selectors creates a descendant selector. Additionally #myId is an ID selector, and there are plenty of other types of selector as well.

I’d recommend this guide as a good way to get up to speed on the correct terminology.