It's been confusing for a week and I'd already search through google but still it didn't clear my mind what's the difference between these two, any clear answer?
The <div> is a tag that defines a division or a section in an HTML document.
The <div> tag is used to group block-elements to format them with CSS.
<div>
<p>This is paragraph.</p>
</div>
class is defined in css, where we define what will be the styling of a tag with this class name. (stylingForDiv is name of class used in this exmaple).
.stylingForDiv{
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px; }
Inorder to apply styles of a css class (stylingForDiv in this example) to a div tag we need to associate css class with div tag which is done by using class attribute in div tag.
<div>
<p>This is paragraph the same paragraph but styled using rules defined in stylingForDiv class .</p>
</div>
So, Div is a tag of HTML whereas class is attribute of HTML tag which is use to style HTML tag according to rule described in class defined in css.
unlike like <div> , class can not be written in angle bracket as it is not HTML tag.
The tag defines a division or a section in an HTML document.
The element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.
Whilst the class is used to select any html elements and the element can be given a class example
Div :
The <div> tag defines a division or a section in an HTML document.
<div>
<h2>London</h2>
<p>
London is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
</div>
Class :
The HTML class attribute makes it possible to define equal styles for elements with the same class name.
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
The ***<div> element*** is very often used together with CSS, to layout a
web page.
while
The HTML class attribute makes it possible to define equal styles for
elements with the same class name.
<div> is a container tag whereas class is an attribute.
A class can be used in any tag, and any number of tags.
class is nothing but a name to css so that it can be used everywhere, without writing same styles everywhere. It works in the same way as a function in any programming language. It improves re-usability of code.
A container can have multiple space separetd classes, as class = "cls1 cls2"
Read more about class and div.
For example:
<div class= "mt5">
<input type= "text" class="mt5" />
</div>
Where mt5 is class (can be named anything) that represents margin-top:5px (to be defined initially).
This is very simple.
When you create a div element you can use it only once, eg.
<div id="container">
</div>
and you cannot use the div element two or more times, but there is a class element that you can use many times, eg.
<class id="container">
</class>
<div id="container2">
</div>
<class id="container">
</class>
To refer to div in css you have to use a hash:
#container
{
...
}
To refer to class in css you have to use a dot:
.container
{
...
}
I think that I helped.
is an HTML tag where as class is an attribute which can be assigned to any HTML tag including div tag.
For example :
<div class="firstDiv">First 1</div>
<div class="firstDiv">First 2</div>
<div class="secondDiv">Second</div>
If you are familiar id attribute, a HTML document can contain an ID only once where multiple tags can contain same class name.
Here is a simple explanation:
Also tag like <class> does not exist. So, this as per HTML standards is not valid : <class>hello</class>
In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”). The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
A is a tag, and it's used to group elements that belong together, it's like a box, whereas, class is an attribute, you use it like class="blah", it helps you style elements together, if you have more than one div and you want to style them the same way, they'll all be like:
A div is a container tag that is used to define a division or a section in an HTML document, whereas a class is an attribute that specifies actions to be taken to one or more elements.
When using a class in CSS you have to specify the HTML elements you want it to affect by using a dot(.) and this can be done for multiple elements whereas while styling divs in CSS, you have to style each div separately.
Related
So, I have been using my own CSS class named myclass and Bootstrap built-in class container. My question is while declaring a with both classes.
Should I use
<div class="myclass container">some code</div>
this format, or:
<div class="myclass">
<div class="container">
some code
</div>
</div>
Does both work in the same way? Or these two are different?
They are different, first one you have 2 classes for the same element, and you can select the element by using the following rules:
.container {}
.myclass{}
.myclass.container{} or .container.myclass{}
The second example you have a parent and a child elemtns
which you can use the following rule:
.myclass .container {}
Both are totally different.
<!-- Here you're declaring ONE div element with two values on class atribute -->
<div class="myclass container">some code</div> this format
<!-- Here you're declaring TWO elements with a different class each one -->
<div class="myclass">
<div class="container">
</div>
</div>
Why this is so different?
HTML tags/eelements have default properties with default values, plus the properties and values that you put in addition.
For example:
if you set globally:
div{padding:5px;}
On the first example, the content inside the div will be padded 5px.
On the second example, the content inside container will be padded 10px.
That can happen with default properties rendered by the browser or globally applied by frameworks as bootstrap.
I am working with the TN3 gallery (jquery slide show) and tried to change a class name to one that I found easier to understand. Thing is the class name that is within the div is different than the class name that controls it in the .css file? I am confused as I have never seen this before? I have only ever named a div class the same name as the class in my css code? Example is here:
<div class="tn3 description">
and in the .css file the class that controls this div is:
.tn3-image-description{Code here}
So my question is how can a differently named class work???
For me I understand the following:
<div class="description">
.description{Code here}
Interesting and I am keen to understand how this works as I have not seen things done this way before!
This div is using multiple (2) separate classes: tn3 and description.
Also check if any of the other CSS files are imported in the original css. This is usually done with #import url("another.css"); syntax, so you can search for #import statements.
Classes Are Only Conditions
<div class="a b"></div>
<style>
.a {color:blue;} /*The style only need to match a element with class "a"*/
.a.b {color:red;} /*The style need to match a element with class "a" AND "b"*/
</style>
Turns out that .a.b has overwritten .a and the div's text is in red.
e.g. no.2
<div>
<div class="c x"></div>
<div class="c"></div>
<div class="x"></div>
</div>
using .c.x {} will only style "c x"
I'm working in a content management system that allows me limited (no) access to the stylesheets, but does allow me to insert CSS into certain templates. So I have this:
<div class="inside_widget">
<div class="input"><span class="form_label">Form stuff</span></div>
<div class="input"><span class="form_label">Form stuff</span></div>
<div class="input"><span class="form_label">Form stuff</span></div>
etc...
</div>
Where inside_widget, input, and form_label are all defined in a sheet I can't touch. I want to put some custom CSS on "form_label" without having to touch every single span.
I tried using the style attribute in the containing div, but that did not work.
<div class="inside_widget" style=".form_label {color:#FFFFFF;}" >
Note: I want to retain everything else in the inside_widget styling, and not have to define a whole new class.
I think what the OP is trying to achieve is not having to repeat the style="" attribute for every single <span> in his form.
This can be done by simply adding your own class name to the enclosing div's classes:
<div class="inside_widget myclass" ...>
<!-- ... -->
</div>
Then make your own secondary stylesheet and define myclass:
.myclass span
{
color: #ffffff;
}
You can put this secondary CSS either in a <style> tag in the HTML itself, or in its own CSS file linked in.
You could do it this below.
<span class="form_label" style="color:#FFFFFF;">Form Stuff</span>
Inline styles like this will overwrite any css rules in a stylesheet, unless in the stylesheet they have a rule with !important
you do not know css right? will look like
<div class="inside_widget" style="color:#FFFFFF;" >
but I suggest you create a new css file and add whatever you want in the same
If I have a menu that is displayed at the top and bottom of a long HTML page and the DIV is setup with <div id="menu"><ul><li>Home</li><li>About</li></ul></div>
Can I just repeat this code at the bottom of the page? Or should the ID be a Class in this case?
I've read that ID should only be used once on the page.
Yes, an ID should only be used once. If you need both menus to pick up the same CSS settings, you can use <div class="menu"/> If many of their setting are the same, but some (such as the position) differ, you can use something like: <div id="top-menu" class="menu" /> and <div id="bottom-menu" class="menu" /> - this is quite a common usage, where the id controls the external position of an object on the page, which can often be unique, while a class controls its inner layout, which may be shared with other similar components.
W3 Schools has a good primer on class and id selectors: http://www.w3schools.com/css/css_id_class.asp
From their description:
The id Selector
The id selector is used to specify a style for a single, unique
element.
The class Selector
The class selector is used to specify a style for a group of elements.
Unlike the id selector, the class selector is most often used on
several elements.
This allows you to set a particular style for many HTML elements with
the same class.
An ID has to be unique within an element. This is what classes are for, if you need to reuse the ID name for whatever reason, change it to a class.
http://www.w3schools.com/tags/att_global_id.asp
<div class="menu"><ul><li>Home</li><li>About</li></ul></div>
IDs are designed to be exactly that - identifiers. You should have only one ID per document. If you need the same style applying to multiple elements, as you have correctly indicated, use a classname instead.
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
We can not repeat Same ID in page... Better to use class for the same...:)
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
Do IDs always have to relate to one element in CSS?
One element per page
What if that element is repeated on the page?
Then the HTML is invalid and you are depending on error recovery instead of expected behaviour.
If I have a menu that is displayed at the top and bottom of a long HTML page… Can I just repeat this code at the bottom of the page?
Not in an HTML document.
Or should the ID be a Class in this case?
Yes. A class a group of things that have something in common. An id identifies a particular thing. You have two menus that have something in common, use a class.
I've read that ID should only be used once on the page.
Correct
You can certainly use the id="" attribute as many times as you need, but the contents of the attribute should be unique. Not having a unique value is a HTML error.
I have a menu with links in the following form, in which I am trying to highlight the current menu item. I can't seem to get it working. Please advice as to what I am doing wrong
HTML
<body id="home">
<div id="topMenu">
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
<div id="nav-about"><p>About</p></div>
<div id="nav-rates"><p>Rates</p></div>
<div id="nav-faq"><p>FAQ</p></div>
<div id="nav-contact"><p>Contact</p></div>
<div id="nav-careers"><p>Careers</p></div>
</div>
<div id="rightTopMenu"></div>
</div>...other stuff</body>
Then for the CSS I have the following:
#home a.nav-home{ border-bottom:2px solid white; }
Do the links HAVE to be in a List, or can I leave them in div's, and if so, how can I make this work?
Thanks.
You've a little bit of a mess here.
Do the links HAVE to be in a List, or can I leave them in div's?
They don't have to be, but they probably should be. There's not good reason to use the strange markup you have chosen, you should definitely consider switching to a list and <li> tags.
Problem with duplicate ids
You have <body id="home"> and <a href="" id="home">
You also have several instances of id="topMenuBlock" (I see you fixed this in your edit.)
You cannot have more than one element with the same id. id attributes must be unique, always. Use class names instead, if anything.
You are using this selector: #home a.nav-home {} but it doesn't match anything. There is no <a class="nav-home">. You can use something like:
#home {} because that's the id of the <a> element you want
.nav-home a {} - Selects the <a> inside an element with class="nav-home"
Perhaps you have the concept of ids and classes mixed up. Ids are supposed to uniquely identify HTML elements, whereas classes can be used as many times as you like. Right now you have 6 elements with the id #topMenuBlock. You should make a .topMenuBlock class instead. I would also make a #nav-home id instead of a class since there should only be one such element on each page.
Secondly, there is no need for the <p> tags you have within your <a> tags. In fact, it's against HTML standards to do so since anchors are inline elements and paragraphs are block-level elements.
Lastly, your CSS selector that sets the border is incorrect because the .nav-home div is not contained within an <a> element. Use this CSS instead (assuming you change nav-home to be an id rather than a class):
#nav-home{ border-bottom:2px solid white; }
Fix these issues and then see what happens. If you're new to HTML and CSS, I would recommend going through some tutorials, such as the ones found at http://www.w3schools.com/.
Your class identifier should be in the <a /> tag
You have
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
but you want
<div class="something" id="topMenuBlock"><a class = "nav-home" href="" id="home"><p>Home</p></a></div>
Modify your CSS class accordingly.