CODEWITHSUNDEEP
htmlcss
Sandra Schlichting
Sandra Schlichting

Reputation: 25996

What is id= name= .something #something?

In HTML are the attributes like

<input class="new" type="text" name="title" id="title2" />

and in CSS do I see

.something { ... }
#something { ... }

What is id= name= .something #something used for?

Upvotes: 3

Views: 1681

Answers (5)

Exodus
Exodus

Reputation: 105

The .something is a class, and the #something is an id. the Name= attribute is commonly used in forms, and usually not used in CSS. In other words, the following code:

<body class="thisisaclass">
<div id='thisisanid'></div>
<div class='thisisanotherclass'></div>
</body>

Would result in a CSS that looks like this:

.thisisaclass {..Code..}
.thisisaclass #thisisanid {..Code..}
.thisisanotherclass {...code...}

Classes are used for repeating stuff, for example if you want to use the same type of text formatting in several areas of your page - whereas ids only should appear once in the html code.

Check out HTMLDog to learn more, it's a great start :)

Upvotes: 1

Cheetah
Cheetah

Reputation: 1

class is multiple selector for example if you want many tables have same colors, back ground colors and font etc. You will define class. In these tables if a specific table is to style in different way you will use id. Id can not be duplicated. And you can assign a same class to as many objects you want.

<style type="text/css">
.MyTable{
background-color:#ff00ff;
}
#centralTable{
background:color:red;
}
</style>

<div class="MyTable">Data </div>
<div class="MyTable"> </div>
<div class="MyTable" id ="centralTable"> Data</div>
<div class="MyTable"> Data</div>
<div class="MyTable">Data </div>

Remember classes are followed by period (.) and Ids (#) in Cascading Style Sheets.

Upvotes: 0

Aron Rotteveel
Aron Rotteveel

Reputation: 83193

  • ID: unique identifier for the DOM element
  • Name: name to be used when submitting a form which is used as the data retrieval key
  • #something: reference to element with ID 'something'
  • .something: reference to element(s) with classname 'something'

These are some really basic concepts of HTML and CSS. You will probably want to read a basic HTML tutorial to find out more on the subject, especially the attributes section.

Id's and classnames are primary used for styling elements with CSS and adding behaviour to them with JavaScript. For example:

HTML:

<button id="foo">Click me to unleash the Unicorn</button>

CSS:

#foo { 
    border: 1px solid #ff0000; 
    font-weight: bold; 
    background: #000; 
    color: #fff; 
}

JavaScript:

document.getElementById('foo').onclick = function() {
    var img = document.createElement('img');
    img.src = 'http://display.ubercomments.com/6/23672.jpg';
    document.getElementsByTagName('body')[0].appendChild(img);
};

See also, this beautiful example (Unicorn included).

Upvotes: 4

null
null

Reputation: 11869

  • id="something" means ID. You can have it only once. It's CSS reference is #something. Also, by using #something at end of address, you can directly move browsers to that ID, without using JS.
  • name= is used while sending form. Using PHP, you can check that value by using $_REQUEST['title']. In other programming languages, there also are methods to get that value.
  • .something is class in CSS. It's used to style HTML elements with class="something"

Upvotes: 0

Rudi Visser
Rudi Visser

Reputation: 21979

An id attribute is a unique identifier for the element within the DOM. It's unique in the sense that you cannot have more than one element with this ID contained within the document.

Styling an element based on ID is done using #something.

A name attribute is simply a non-unique name for this element. This is most commonly used in forms as the name that gets POST'd or GET'd through to the server side language.

.something is the style selector for the class= attribute on any element.

For instance, you could style the following element: <div class="testclass" name="testname" id="testid"></div> in any of the following 3 ways:

.testclass {
    background-color: black;
}

#testid {
    background-color: black;
}

div[name="testname"] {
    background-color: black;
}

Remember, both a class and a name are NOT unique, so they can be used to style and define multiple elements.

Upvotes: 2

Related Questions