Help me with CSS.

[waloshin]

What is the difference between doing this:

.bg {

and

#bg {

When using <div class="bg"> .... </div>

[jared_kipe]

Originally Posted by waloshin

What is the difference between doing this:

.bg {

and

#bg {

When using <div class="bg"> .... </div>

The .bg applies to that div, and #bg does not.

. means class, and # means id.

.bg == <anything class="bg" />
#bg == <anything id="bg" />

[waloshin]

Originally Posted by jared_kipe

The .bg applies to that div, and #bg does not.

. means class, and # means id.

.bg == <anything class="bg" />
#bg == <anything id="bg" />

Ok thanks and what really is the difference between class and id?

And why doesn't this work:

Html:

<tr>
<table class="table1">
<th>Model</th>
<th>Specs</th>
<th>Description</th>
<th>Power</th>
<th>Operating System</th>
<th>Price</th>
</tr>
</table>

CSS:

.table1 {
border-width: 5px thin medium thick;
font: bold 12pt;
background-color:blue;
}

[Evoken]

Originally Posted by waloshin

Ok thanks and what really is the difference between class and id?

Within an HTML document, you can apply a class to multiple elements whereas an id can only be applied once.

When it comes to CSS, you can use a single rule to manipulate multiple objects that share the same class.

For example, if you want all images with the class "half" to be 50% the width of it's container, you just write:

.half { width: 50%; }

This single rule would affect every image with the class "half", and this class can be used any number of times you want in a single page.

An ID on the other hand is for more specific things, a single element on a page that is unique (say a container or section). It is also better reserved for jQuery/javascript plug ins. It is not for elements that repeat on a page.

[jared_kipe]

Originally Posted by waloshin

Ok thanks and what really is the difference between class and id?

There are differences in the way they 'cascade'. Namely ID's take priority.

e.g.

<style>
    #main {width: 800px;}
    .content {width: 500px;}
</style>
<div id="main" class="content"></div>

Which of these take priority? All things equal, the last rule would count, i.e. width=500. However the width would actually come from #main and would be 800px wide.

Traditionally you can only have 1 of any given id on a page. e.g. you cannot have two different elements with #main in this document. ID's are also used for on page linking or anchoring. <a href="#main"> when clicked would cause the browser to jump or scroll to the location of that element (if it is viewable). <a href="someotherpage.html#main"> would cause the browser to goto/load that page then go to the named id (if it is viewable).

Generally when I'm working I ask myself, would there be ANY circumstances where the rules I'm writing would need to be displayed on multiple elements on the page at once (i.e. would I ever need these styles or blocks on the page more than one time?) I would use a .class. If I could say with certainty that this is a one off or structural block I would use an #ID.

Another difference comes from javascript, where one could argue that an id is easier to get a hold of thanks to the function document.getElementById('main').

[angelneo]

Originally Posted by waloshin

And why doesn't this work:

Html:

<tr>
<table class="table1">
<th>Model</th>
<th>Specs</th>
<th>Description</th>
<th>Power</th>
<th>Operating System</th>
<th>Price</th>
</tr>
</table>

CSS:

.table1 {
border-width: 5px thin medium thick;
font: bold 12pt;
background-color:blue;
}

A couple of issues, your html is malformed. The tags are in the wrong sequence.

Also, for border declaration, it's usually

.table1 { 
border:1px solid #000; 
}

or

.table1 {
border-width:1px;
border-style:solid;
border-color:#000;
}

[waloshin]

I am going crazy with these tables!

What is wrong with this HTML?

	<tr> <table class="table_title"> 
		<th>Specs</th>
		<th>Description</th>
		<th>Power</th>
		<th>Operating System</th>
		<th>Price</th>
	 </table> </tr> 
	
	<table class="row">
		<td>Next Gen 1.0 (2012)</td>
		<td>(1)Intel i8 processor 12 core @3.5 GHz, 16 GBs of Ram, 2 TBs of Hard drive</td>
		<td>This is our Next Gen 1.0 Model, you can order the case in black or white</td>
		<td>More powerful then your grandmas computer.</td>
		<td>Waloshin Distro based on Linux 64 bit</td>
		<td>$6000 including tax</td>
	 <tr>

This is what it looks like:



This is what it needs to look like:



The question is where did the lines goes on my table; and why is the title of the table not aligned with the table?

I got the th to become bold,but can't figure out the rest.

[Ap0ks]

You need to revise the HTML for tables, what you've posted is invalid. Tables start and end with the <table> tag, then you list each row with the <tr> tags and inside those rows you list the columns with <td> tags (or <th> for the heading row).

In your example you've got columns, inside a table, inside a row then columns inside a table with no closing <table> tag. Also your headers don't line up because you're not using the same number of columns in each row.

Here's some commented code for you to look over to achieve the desired outcome:

<html>
<head>
<style type="text/css">
table {background-color: #FFFFCC;}
.row>td {border-bottom: 1px solid #333;}
.table_title{color: #FFF;background-color: #666;}
.price {color: red;}
</style>
</head>
<body>
<!-- table starts here -->
<table cellpadding="5" cellspacing="0"> 
	<tr class="table_title"> <!-- begin the heading row -->
		<th>Model</th> <!-- Our 6 column headers are listed here-->
		<th>Specs</th>
		<th>Description</th>
		<th>Power</th>
		<th>Operating System</th>
		<th>Price</th>
	 </tr> <!-- end of heading row -->
	<tr class="row"> <!-- begin the data rows -->
		<!-- Our 6 data columns are listed below -->
		<td><strong>Next Gen 1.0 (2012)</strong></td>
		<td>(1)Intel i8 processor 12 core @3.5 GHz, 16 GBs of Ram, 2 TBs of Hard drive</td>
		<td>This is our Next Gen 1.0 Model, you can order the case in black or white</td>
		<td>More powerful then your grandmas computer.</td>
		<td>Waloshin Distro based on Linux 64 bit</td>
		<td><span class="price">$6000</span> including tax</td>
	 </tr><!-- end the first data row here -->
	 <!-- to add another data row we need to add <tr> tags and the 6 columns -->
	 <tr class="row">
	 	<td>1</td>
	 	<td>2</td>
	 	<td>3</td>
	 	<td>4</td>
	 	<td>5</td>
	 	<td>6</td>
	 </tr>
</table> <!-- table ends here -->
</body>

The comments, everything between and including the <!-- -->, can be removed. Perhaps try extending the table with more data rows and changing the styles until you're happy with how HTML tables work.

[waloshin]

Why the spacing in the header of the table?

Figured it out: <table cellspacing="0">

[arrowmarketing]

.bg

and

#bg


. mean start the class in CSS coding and # mean start the id in CSS coding.