HomeХобби и стильRelated VideosMore From: tutor4u

HTML div tag Example and Tutorial using CSS

1931 ratings | 441733 views
http://www.LittleWebHut.com This video demonstrates how to use the HTML / XHTML div tag and how to style it with CSS. The examples will cover the basic usage for the div tag and demonstrate the CSS color, text-align, background, float, and width properties.
Html code for embedding videos on your blog
Text Comments (295)
ANURAG KUMAR (1 month ago)
Good job sir'e
technical brother (29 days ago)
https://youtu.be/F6W53xTj_Bw Subscribe
Pew Pew Dave (1 month ago)
Bob Ross of HTML :)
venom xxi (2 months ago)
Thank you!!
Cassandra Ferri (3 months ago)
Perfect tutorial video for those who are just beginning!
Asjid Muzammal (4 months ago)
I learned from this lesson
MoviesLover (4 months ago)
x1.25 is the best. thanks me later lol, anw your teaching is awesome!
Brian Saturnino (4 months ago)
I'm not sure about watching this video. It's severely out of date. HTML5 came out in 2014. HTML6 is coming soon. The same can be stated with CSS3. I recommend watching videos that came out recently.
Bhuvan D (4 months ago)
wow , great explanation bro.thanks for upload this video.
abhi shek (5 months ago)
nice :-)
Orpcal (5 months ago)
2018?
campbell folly (1 month ago)
stop asking dumb questions? 😑
Mike Fornah (5 months ago)
Excellent! love the way you teach and flow, easy to understand.
Nimatu Ibrahim (6 months ago)
Thanks solo much for this clear tutorials. I could have saved myself a lot of stress if I had listen to this earlier on.
BeastMaster64 (6 months ago)
This guy is a genius!
Hassan Malik (7 months ago)
yaar choren issko ye dekhen.. kiss kadar khubsurat andaz ma iss banday nichay video ma samjhaya hai.. iss banday ney to 9 minute bore hi kiya hai https://youtu.be/NA6-e3nVIbc?list=PLa9CM2i1zaCr-badFUH47AVKM-k7TsYr9&t=60
Deep Roy (7 months ago)
thank you
amandeep joshi (7 months ago)
Great tutorial...thanks
Deepjyoti Das (7 months ago)
Great teaching
Shamsul (8 months ago)
Nice tutorial!! Like it.
Derick Shiba (8 months ago)
I love it
yash r (8 months ago)
i love you buddy .. this is just perfect way of explaining .. indeed it helped alot ..thanks man :).i subscribed you from 9 accounts :)
may may (9 months ago)
I tried to do float but i can't do 6:17 statement.
Nicholas Lewis (9 months ago)
nice
minivanjack (9 months ago)
OK, so everyone in the world is supposed to know that, somehow, every browser recognizes the words "class" "width(#)px" "mainstream" "background" "content-type" (with a hyphen of course) etc etc etc. How about explaining the syntax and how to find out what all the code words mean? Where is the list of codes, commands and value syntax? This is useless unless you happen to want two paragraphs in ugly boxes.
emarskineel (8 months ago)
minivanjack I feel like this tutorial assumes that knowledge. You’re probably not going to be searching for div info if you don’t know what a class is.
Velawan Weerayah (10 months ago)
New and learning web design for my own sites. Fantastic teaching. thanks
kiran behara (10 months ago)
Excellent... But can u tell me how create 3columns in a single row using div tag??
G2G TV (10 months ago)
Fuck you explain everything so well thank you
Naveen Sharma (10 months ago)
awesome thanks for this video
chato1403 (10 months ago)
This really helped thanks.
George Muirhead (10 months ago)
Excellent little tutorial love it!
Rishikesh Chaudhary (10 months ago)
really helpful
Ernesto Enriquez (10 months ago)
Someone get this guy some cocaine
Adefisayo Boluwatife (10 months ago)
helpfulllll thanks
Rama Chandra Mansingh (10 months ago)
Nice
stanley pacios (10 months ago)
Thank you!
Jay Donga (11 months ago)
Increase the video speed to 1.25X. Peace.
Alvin Cruz (11 months ago)
Great video.
Kingston Mocktail (11 months ago)
Thank you!
Casklord (1 year ago)
Tip: watch at 2x speed
Gerald Foushee (1 year ago)
Very nice example. I really appreciate your site and presentation. It's well done.
HappyCodings (1 year ago)
https://youtu.be/s1D9SSYVi2I
gud
zelda promt (1 year ago)
what is the difference between div tag and br tag?
Reynaldo Photography (1 year ago)
div tag is like a block, br tag make a line space
Ghazwa Aida Assad (1 year ago)
Excellent explanation and useful. Thank youI would like toseemoe tutorials !
Sam Murphy (1 year ago)
Siraj's advice of watching video at faster speed helped me here
roohi rim (1 year ago)
best
michael mwaura (1 year ago)
Thank you for giving me this new insights,
Very helpful short video, thank you!
H.E Hanna (1 year ago)
excellent video and tutoring
Ivars Boss (1 year ago)
Very good tutorial.
Kiea R (1 year ago)
Thank you! This was very clear and easy to understand! Great sample scenarios!!
Jisha George (1 year ago)
Excellent lessons. Informative and easy to follow.
Camera Dealer (1 year ago)
Finally, a clear and fully informative tutorial. Thank you! And there was I thinking CSS was an alien language. Going off to practice my newly learned skills.
Elias Dargham (1 year ago)
Excellent Teaching, you earned a sub!
DLiberator78 (1 year ago)
Another awesome tutorial. Thanks for such s detailed tutorial on div tags. You have a fantastic teaching style.
Rehan Jamshed (1 year ago)
very helpful thanks sir
Thusitha Thanthirige (1 year ago)
Great
Anirban Dey (1 year ago)
thank you so much...this helped a lot
ade koiki (1 year ago)
Thank u, gr8 demo and very easy to understand
Mbulelo Paul (1 year ago)
Zach can you do this using note pad
rage1umr (1 year ago)
You can do any type of coding using Notepad.
Randy Getsla (1 year ago)
Finally, someone who knows how to teach. Very good. Simple, smart, easy to understand. Five stars.
T Nelz (1 year ago)
Too slow of talk
Макс (1 year ago)
damn laggy
Sundar Rajendran (1 year ago)
Good way of teaching.Thanks
Jay Williams (1 year ago)
Would it make any difference if a ";" was added at the end of "text-align:center"?
Jay Williams (1 year ago)
Before 4mins
best tutorial for beginners ! thank you sir
dee Logan (1 year ago)
thank you! easy to follow and now I understand divs better!
Adam Fry (1 year ago)
Thank you for sharing.
ELEGBEDE ESTHER (1 year ago)
Thanks it really helped
derek mak (1 year ago)
Just wondering hwo to tag class 123? Is it --> .123{ } <span class='123'>This should also be red and should have margin left of 30px</span>
DamanDVS (1 year ago)
Dude, you are so BORING!
Jimmy Chan (1 year ago)
true, slow but good content, just wanna confirm what div was, and he did cleared that out
Timothy Basaldua (1 year ago)
Good demo LittleWebHut. Please include text/fonts and "canvas" in future demos. Again, good job. Thank you very much.
valentin vali (2 years ago)
Interesting. Look another tool. http://www.arta-web.ro/web/html-css-generator/
2-Cousins (2 years ago)
do you also have a tutorial on divs with images? I notice images 'dont care' about what style i set my divs to and the images dont rescale or stick to the borders of the divs
ART (2 years ago)
For those deciding whether to use <div id > or < div class> there are pretty much the same. However, ID should be used once for a unique element. <div class > can used on multiple elements. The <div class> is very helpful if you have various elements throughout the page you want to style the same.
Midie (1 year ago)
Thank you!
sankalp tripathi (1 year ago)
Is there any video you can refer to me to understand this more clearly?
Driver0077 (2 years ago)
Thanks you so much you earned my subscribe
Muhammad Nasir (2 years ago)
thank you sir!
Saurabh Arora (2 years ago)
Very nice video. Thank you.
tharun j (2 years ago)
Thank you....
Petr Kolegar (2 years ago)
vjd kfjvdjvenvenvejvfkvfj dk kdvkdjvdk dj djvd jdjvekvdjvdjvdkfdvkdkicjd jdvffj jd jdivbf kdj dn dk dk dk fk dn ekvnd a nx kdj dj dk djvdn dm dn dn dj dk ducn dn dm nf nfk dm fn dk dnvd nekvdmcenvdk ejvfj ek envej ek i fb jfj dj dj dk ndk fk fj ek en fk dk ef f jfj fj djvfjvfkvekvke kfkvekfwkv kfkf jf je jd kruddj ej dj dvhfi eivej euvgeu ejf
Michele Peroni (27 days ago)
<p>vjd kfjvdjvenvenvejvfkvfj dk kdvkdjvdk dj djvd jdjvekvdjvdjvdkfdvkdkicjd jdvffj jd jdivbf kdj dn dk dk dk fk dn ekvnd a nx kdj dj dk djvdn dm dn dn dj dk ducn dn dm nf nfk dm fn dk dnvd nekvdmcenvdk ejvfj ek envej ek i fb jfj dj dj dk ndk fk fj ek en fk dk ef f jfj fj djvfjvfkvekvke kfkvekfwkv kfkf jf je jd kruddj ej dj dvhfi eivej euvgeu ejf</p>
Pakman YT (4 months ago)
Good information
Alex (8 months ago)
Petr Kolegar Good point, I never thought of it that way.
azzywazzy768 (2 years ago)
Well presented and thoroughly clear explanation for basic div tag. Thank you
Susan Tran (2 years ago)
Thank you for showing me how to operate with div tags
Lon W. (2 years ago)
"Was" looking to learn how to move images around in Blogger, with ease, that would include the accompanying title or caption. Thanks.
Philosofisk (2 years ago)
Great Video, you are a great instructor! Take Care! Peace!
Bugsy (2 years ago)
Thank you
Simon Garrett (2 years ago)
excellent tutorial, super clear and well-worded.
Santiago Castillo (2 years ago)
isn't it better to use CSS not the <style> on the <head></head> I hear this is bad
Hector (2 years ago)
He said he did it for easy reference dumbass
Mark Bell (2 years ago)
Excellent tutorial
UnAnimus (2 years ago)
Very cool! Adding the float property was a bonus!
Habib Hanna (2 years ago)
thanks  you did my work easier and more
Frodobaggins149 (2 years ago)
Thank you this was very helpful to me. Some tutorials just tell you to add div elements without explaining what they are.
Ajit Darbar (1 year ago)
Frodobaggins149 JGTC DJ's vhhxbcvvxbcv
Ed Poitras (2 years ago)
You do a very good instruction of every topic. Thank you very much for your time and effort and Merry Christmas.
Rafy-Ivan Morales (3 years ago)
I'm taking a Java class I need help with this code: I need to group all three pieces of supporting content with divs, like this: <div class="learn-more"> <div class="container"> <div> <h3>Travel</h3> ... </div> <div> <h3>Host</h3> ... </div> <div> <h3>Trust and Safety</h3> ... </div> </div> </div> Wrap all pieces of supporting content with two divs, like in the example above. Give the outer div a class="learn-more" and the inner div a class="container". This is the code I have write so far: <!DOCTYPE html> <html> <body> <div class="learn-more">..</div>. <div class="container">..</div> <ul> <li>"Rafael"</li> <li>Browser</li> </ul> <ul> <li>Sign Up</li> <li>log in</li> </ul> </div> </div> <div class="jumbotron"> <div> <h3>Travel</h3> <p>"From apartments and rooms to treehouse." <p> <a href="#">"See how to travel on Airbni." </p> </div> <div> <h3>Host</h3> <p>"Renting out your unused space could pay your bills or fund your next vacation."</P> <p><a href="#">"Learn more about hosting" </div> <div> <h3>Trust and Safety</h3> <p> "From Verified ID to our worldwide customer support team, we've got your back."</p> <p><a href="#">"Learn about trust at Airbnb" </P> <h1>"Find a place to stay."</h1> <P>"Rent from people in over 34,000clients and 192 countries." </div> </div> </body> </html>
Kiran Mirxa (3 years ago)
i'm a beginner html user, thanks for these tutorial but still i need to understand lil more.
prathamesh shastri (3 years ago)
precise
OK one thing about aligning the texts when u align it on center it becomes like: 1.Right 2.Right left corner 3.right left left left corner corner. What i want it to become like: 1.Right 2.Right left corner 3.right left left left corner corner.
Galad Damodred (3 years ago)
Thanks man
Caleb Sam (3 years ago)
great video on DIV tag, save me much time. Thanks so much!
Cristian Landero (3 years ago)
Very good introduction to div tags. Thanks!
maaproperties (3 years ago)
nice vedio
Subhani Shaik (3 years ago)
Good lecture. Still im confused with div part. how can i create complex layout using nested div tag.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.