Using ID and CLASS Attributes

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

Along with the <div> and <span> elements, the id and class attributes make for a very flexible yet simple framework to define most of the semantic markup small to medium projects might require.

The id attribute

The id attribute uniquely identifies an element in a file. This makes it possible for the stylesheet or scripting to easily target this element for styling or processing.

The following element:

HTML
			<div id="sidebar">sidebar content</div>
		

... can be styled as a right floated side bar with the following CSS selector:

CSS
			div#sidebar {width:160; float:right;}
		

... and can be accessed with this JavaScript:

JavaScript
			document.getElementById("sidebar");
		

The class attribute

The class attribute is used to share the same style among multiple elements. In some way, id could be seen as a first mames while class would be the family name. Different elements can also share a class without sharing all the attributes.

Let's say we have these elements:

HTML
			<div id="sidebar" class="left">sidebar content</div>
			<p class="left">paragraph content</p>
		

A stylesheet could set both elements to have a white background, indent the paragraph and float the sidebar:

CSS
			.left {background:white;}
			p.left {margin-left:20px;}
			div#sidebar.left {width:160; float:left;}
		

 

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

132 / 194