Basic CSS Concepts

Question

After discussion with some of my friends about css concepts, I have some questions to ask to you guys.

When do we use Id and class in css? and we have a conflict idea with Div and Span. When are Div and Span are used?

Any key to these questions?

Answer 1

As stated this is really a a html question, although not one that you would normally come across unless you were using CSS (Why would anyone try and achieve perfect semantics, with a load of styling cluttering the document???)

Div and Span

Both div and span are html elements used purely to provide logical grouping of their contents. Div is a block element, and as such is a rectangular area with width, height, margins and padding. Span is an inline element, and so the above doesn't apply, but it can flow across multiple lines.

It should be noted that a breaks any paragraph, so shouldn't be contained within on. It can, however, contain other paragraphs and block level elements without breaking itself.

Class and ID

An ID attribute is used to uniquely identify a given tag within an html document. You use the class attribute within CSS when you want to style one, and only one, section. The Class attribute describes the type of an attribute. For example consider the following:

<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>

Answer 2

1) I use id when I know there will only be 1 on the page, I use class when there can be multiples. Example, your header, there is only one, so I make that an id.

2) Divs/Spans - what everyone else said ... display block vs inline.

(This is just the way one lowly CSS developer does it).

Answer 3

Here comes a little short description of div and span html tags.

The span and div tags are very useful when dealing with Cascading Style Sheets. People tend to use the two tags in a similar fashion, but they serve different purposes.

div also gives you the chance to define the style of whole sections of HTML. You could define a section of your page as a call out and give that section a different style from the surrounding text.

The div tag also gives you the ability to name certain sections of your documents so that you can affect them with style sheets or Dynamic HTML.

One thing to keep in mind when using the div tag is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a div you can't have a div inside a paragraph.

The span tag has very similar properties to the div tag, in that it changes the style of the text it encloses. But without any style attributes, the span tag won't change the enclosed items at all.

The primary difference between the span and div tags is that span doesn't do any formatting of it's own. The div tag acts includes a paragraph break, because it is defining a logical division in the document. The span tag simply tells the browser to apply the style rules to whatever is within the span.

Answer 4

Should I use id or class?

The div element is a division of the web page. It's a block element.

The span element is used to enclose a span of text. It's an inline element.

Example:

<div>
   This is one part of <span>the page</span>.
</div>
<div>
   This is another part of <span>the page</span>.
</div>

You can use the styles display:block or display:inline to control the type of the elements. A block element can contain other block elements and inline elements. An inline element can contain other inline elements, but not block elements.

A link (the a tag) for example is an inline element, so you can put span tags in it, but not div tags. You can use the display style to make the link a block element and the elements inside it block elements. Even if you have made the link a block element using CSS, it should still only contain elements that are inline by default, even if you also turn those elements into block elements using CSS.

Answer 5

I suggest reading also this:

Difference between DIV as-is and a SPAN with display:block

Answer 6

As Mike mentioned DIV and SPAN are HTML elements. Both are purely wrappers for content but as a general rule, span is used to wrap strings of text and divs are used to wrap blocks of content.

Think of span as an "inline" element to say apply a color to a word in a sentence vs. a div is a "block" where you might want to add a border, set a width and height etc.

Note: because CSS is flexible, you can make a div do anything a span can, and vice versa.

Answer 7

id uniquely identifies exactly one DOM element. class identifies a set of related DOM elements.

div has display: block by default, and is generally used to demarcate some logical grouping of elements that should be in a block together. span has display: inline by default, and is generally used to apply a style to sections of text.

Answer 8

Generally you would use ID when you have a specific (unique) element and class when you have many elements with the same styling.

Typically I'll use ID's to define "structural" elements in pages (main container, header, footer, sidebar, etc.) and use classes for everything else.

Elements with ID's are usually more convenient to access via javascript as well (although jQuery mitigates this a lot) so I'll often use ID's on elements that need to be manipulated by javascript, even if there is no styling associated with the ID.

Answer 9

The id attribute identifies one element on a page. It's used to specify a very specific element and you shouldn't switch the id around on elements unless you have a very good reason to do so. It's considered invalid to use the same id twice on one page.

The class attribute is an "adjective" on an element. It specifies something about the element that makes it different from other elements of the same type. For example, an <ul> element might be specific in that it is for a todo list, so you might specify it as <ul class="todo">. You can have multiple elements with the same class on the same page.

The purpose of <div> and <span> is similar in that they both specify generic content. Their difference lies in that <div> is for block content and <span> is for inline content. It's considered invalid to put block content in inline content, but the same is not true for the opposite (putting inline in block, or block in block for that matter.)

Answer 10

An ID is a unique name given to an element on a page. An example would be 'product_98509'. A class is a non-unique reference to one or more elements on a page. For example 'product'. Then when using CSS you could reference all products with '.product {}' and a specific product with '#product_98509 {}'.

A is a block-level element designed for boxes and containers. For example a header bar, a quote box, etc. A is an in-line element usually used in text. For example someone's name in a paragraph, a price in a product description, etc.

Hope that helps a bit!

Answer 11

Div and span are HTML tags. You can stylise them using CSS, but as such, they are raw html elements.

Div is mainly used as a wrapper block, you can position, style and size it, then put content inside it, however it can also execute the function of span, if used as an inline-block. Span is supposed to be used to highlight a bit of text within the paragraph tags, or to apply some specific styling to a bit of text that is between heading, list, anchor, (etc) tags.

(# - id) is used and should be used for a unique element that does not repeat on the page.

(. - class) is used for a set of elements that must inherit the same properties.

For example, form fields may have an id and a class, the ID will make them easy to highlight using javascript, while the class will apply the basic styles.

Answer 12

A basic rule is that an ID may only exists once in the complete page. The ID is usually used to identify an object in your page. Most of the time you will use class in CSS.

A span is an in-line element, a div is a block element (by default, you can override this in your CSS). Spans are usually used inside a textblock to "mark" a piece of text. A div is used to group objects in a container.

Hope this helps you a bit.

Answer 13

div is used as a section of a document. span is used to style individual parts of text. A key difference is that a div will insert a line break on either side.

However div and span are HTML not CSS.

You use id when there is one of an element and you need it to be uniquely identified. You use class when there are multiple element which you want to apply the same stylings to.