Help Me? Basic Question!

Hello guys, i am brand new to css…
i was watching CSS Crash course by Sitepoint the videos…
i wanna know that what is diference between
<div tag> and a tag he gives in second video like
<p id=“leader2”>

why can’t we just use Div id and # instead of the above id…
thanks…
:slight_smile:

<div tag> isn’t really a valid xhtml element, perhaps they were using the word tag as a placeholder? <div>'s are generally for layout or design whereas <p> tags are for paragraphs of text.

An id and class are attributes, if you wrote <div myId> the browser has no way to tell if it’s an id, a class, or something completely different. That’s why every attribute encloses it’s value in quotes.

Then just use # to identify ids in your stylesheet and periods in front of class names.

I think he is asking \why choose a <div> over a <p>. The answer is semantics. A <div> is a division in the page to seperate the structure. a <p> is a paragraph used to hold content of hte page, whether that be text or images.

Yes RYAN, i am asking that why we use an ID to ive and Id then apply css, why don’t we just give a tag like <p>hello</p> and p{something like this}
why we use id tags and all?
Please Help me!!

You use p, div and all the tags in various places and you may only want to style certain p tags. For example if you have a sidebar with p tags, and a content area with p tags you may want to style the p tags differently, so we give them classes. You can definitely style all the p tags without a class or an id, but you won’t have that fine level of control.

You really asked two questions. Maybe it will make more sense if we split them up. :slight_smile:

You CAN! Look at a case like this…


<p id="intro">hello</p>

<p class="greeting">thanks for coming over</p>

 <p>do you have to leave so soon?</p>
 
<p id="conclusion">Good bye!</p>

p{…} sets a style that will apply to all the paragraphs. So if you want all the paragraphs to have a 1em top margin then write

p {
margin-top: 1em;
}

Because sometimes you don’t want to apply a style to ALL paragraphs. If you ALSO want a 5em margin at the top of the document

#intro {
margin-top: 5em;
}

and if you also want to bold the greeting paragraph you just add a style rule to target that one.

.greeting {
font-weight: bold;
}

So if you want to affect every element, style the tag.

And if you want to affect one or a few elements, style an id or a class.