HomeХобби и стильRelated VideosMore From: Ch-Ch-Check It

DIVs and CSS | Beginner Tutorial

1463 ratings | 74538 views
This is episode 3 of an ongoing series to teach you the fundamentals of HTML, CSS, and maybe even PHP and JavaScript in the future. We'll see where it goes ;) Due to popular request, there is no longer background music! Intro music: Song: Upper West - Wouldn't It Be Upper West's channel: http://www.youtube.com/user/UpperWestMusic
Html code for embedding videos on your blog
Text Comments (99)
Drej Trovski (5 months ago)
You got like and sub from me ;)
Hassan Malik (7 months ago)
yar choren iss bore banday ko.. nichay video dekhen kitna pyara samjhaya iss banday ney.. kamaal hi kar gya hai https://youtu.be/NA6-e3nVIbc?list=PLa9CM2i1zaCr-badFUH47AVKM-k7TsYr9&t=60
novicetech1 (1 year ago)
Great video. This really helped me better understand CSS. I've watched lots of tutorials but this one made things much more clear for me. Can you offer any tips on how to style a link that is not in the menu? I'm having a very difficult time figuring that out. I'm using wordpress and I have converted a text element to a link. Now I want to change it's color and font type on hover. I can make the font italic (as I wanted) but it's applying that same style to all the links on the page. I also want the color to change on hover as well. Any tips you can provide would be very helpful. Like many of the other people, I'm now a subscriber :-). Thanks.
Steve Burrus (1 year ago)
Jus t where did you get yiur copy of Dreamweaver from anyway? Is it still one of Corell's software offerings or not? A prompt response would be greatly appreciated.
Lurs hammy76 (1 year ago)
not exactly a promt response but whatever
Lurs hammy76 (1 year ago)
it is called "brackets" and is a free code editor
Mr Austin (1 year ago)
it wont fill my whole screen when i do the Div .header thing it puts space from the top and to the sides Help please!
fukmoney1 (2 years ago)
Liked! :D
JoseM Aboytes (2 years ago)
Gave it a like bro. This is a very good breakdown, thanks for the post and your time. Keep up the good work.
Alexis (2 years ago)
Do you have a video explaining divs and images?
Liam James (2 years ago)
Is very important to know about how CSS is working, great video! #hgrqtza
Cornelius Omale (2 years ago)
I really enjoy the videos.
Benjamin DeCocker (2 years ago)
Absolutely Loved it! Thanks!
Neilraj Lama (2 years ago)
you made it easy to understand, nice job.
ABBAS ANNOOZ (2 years ago)
The best HTML CSS tutorial in YouTube thank you man
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>
mark m (3 years ago)
Isn't it more common to have two files open, one css and the other html?
mark m (3 years ago)
+Mark M should have watched the ending :)
Adam Salma (3 years ago)
To any of you who want to become really good at using HTML and CSS, its best if you keep the content and the styling in different files and avoid mixing them as much as possible. If you eventually do go on to making a career out of this, you'll be making much bigger websites, and any mixing of CSS/JavaScript in an HTML document will lead to a lack of organisation later on and make life hard. Hope this can help a few of you!
Blake Johnson (1 year ago)
I agree. I wouldn't have even shown or even mentioned the inline or page styling in the video. This vid is clearly for beginners and if it were me learning all over again I would not want to unknowingly prioritize that information.
Pavan Pandurangi (1 year ago)
Adam Salma just made this mistake... completely agree
Ryan XCIX (3 years ago)
I had a problem when making the header; it would not show up on the webpage. I fixed it by changing the: ".header" to "div.header", this fixed it for me.
Cam S (3 years ago)
What text editor are you using?
Musavvir Ahmed (2 years ago)
+Ch-Ch-Check It Looks like you're using Edge Code, the non-free version of Adobe Brackets! From what I hear, there are some differences in features.
Rounak Kayathwal (3 years ago)
Adobe Brackets! it's free :3
Ch-Ch-Check It (3 years ago)
It's a free program called Brackets!
Senseblend (3 years ago)
666 like... illuminati confirmed
Kostas Nikolouts (3 years ago)
Nice tutorial bro:)What editor you are using btw?
terumy aderes (3 years ago)
Is kt ok to put multiple divs? I would like to make a phising
not just liked it but I subscribed to your channel this tutorial was much more useful than the ones I have seen that only explained css for about 30 minutes or more I have to point out that I really liked when you explained the css combinations tags/class, well keep up the good work really clean explanation well done.
Ch-Ch-Check It (3 years ago)
+Francisco Bruno Filgueiras de Souza Thanks Francisco! Glad you enjoyed the tutorial :)
Kent Godfrey (3 years ago)
Instant sub. Thanks so much! Great information, but I want to take it a step further... A video detailing how I can add images into my nav bar such as the Facebook icon and other social medias (so users can connect to the facebook page) would be great!
buddyroach (3 years ago)
I made a program that lets you create CSS DIV containers: https://www.youtube.com/watch?v=9qWVXL4oKRQ
Aiyrrhamae Ilustre (3 years ago)
I learned so much from this. 
Amir Ali (3 years ago)
Just great. You did an awesome work. Love you. Just a request to make a tutorial on "SLIDE SHOW" menu in HTML. Thanks
oakeydokey (4 years ago)
Thank you so much!
TipDesk (4 years ago)
Thanks for the great tutorial! Do you recommend any resources to further learn CSS?
Brady Gunter (4 years ago)
For you guys wanting to do some more CSS and learning here you go: So if you were to do something like <h1 class="header_1"></h1> then when styling you would do a . and then your class. For example: .header_1 while styling would only effect anything with that class. An id="" is simular, but what you do is instead of a . while styling, you do a # and then the id name. Here's the website i learned HTML, and python from: codeacademy.com
Jason James (4 years ago)
Excellent Tutorial. 
AmerykanskiGracz (4 years ago)
After watching this video I realized how dumb I am. 
Piong Falqueza (4 years ago)
what text editor is he using?
DriftEDM (3 years ago)
Brandon is using Adobe Brackets (which used to be called Adobe Edge Code). http://brackets.io  
onceuponatimencode (4 years ago)
Mar7us (4 years ago)
Could you edit some pictures in Photoshop CC? Like using brush and gradient etc. 
Abir Hasan Dipu (4 years ago)
You're super Awesome, you know that???
NightHunterTriple3 (4 years ago)
Hey man great videos :) but when are you bringing back the after effects, photoshop and Sony Vegas tutorials?
NightHunterTriple3 (4 years ago)
Hey man great videos :) but when are you bringing back the after effects, photoshop and Sony Vegas tutorials?
MikeKalLive (4 years ago)
Can't wait for the awesome wallpaper that you did on youtube *.*!...and of course every tutorial that you are doing is unique!
I want to ask something. I'v been learning Photoshop year and few months now and I almost achieved what I wanted ( 75 % of it :D) I want to learn also how to build websites. I can make whole website mockup but how to build it? I know there are more then 1 and 2 programs to do it: HTML, CSS and others but tell me, which one is the most practical, strong, not so confusing and worth learning and mastering on a pro level. Also what are differences between them and why is 1 better then another. You could make a whole video about this subject. I think theme is good 
Lunatic2147 (4 years ago)
Hey thanks man for these tutorial. I have been thinking about learning HTML for a while but I didn't know where to start, it just so happened your doing these videos. I like a lot of your tutorial videos. Keep up the great work! 
KeepItBlank (4 years ago)
Z4ckAtt4ck007 (4 years ago)
Like these videos!!
Jaka Keda (4 years ago)
can you pls help with my personal intro for my gaming chanell?
TheDeviant Ljv (4 years ago)
Useful as Always :)
Grey SexyBones (4 years ago)
Very awesome tutorial!
Laurent de backer (4 years ago)
Really good tutorial! Helps so much! As always i enjoy your tutorials, it's really thanks to you guy's that i'm learning and progressing in my own work! I like all of your tutorials (photoshop and now the web design tuts) I don't really now anything about after effects but i am sure those tutorials are very good as well, again thank you very much! I've seen that my comment was at the end of the video. Really cool :-D
StarRonaldoHD (4 years ago)
What's the difference between Div id =" " and Div class=" "? I've never used the second one, can someone explain me what they're meant for?
StarRonaldoHD (4 years ago)
+thecrashdummie Thank's :) So which one is better if I'm making sidebars etc.. or even a box which includes 3 different pics?
aviatsit (4 years ago)
Brandon, What is the font used for the logo?
Sheikh Hussain (4 years ago)
Your videos always help me in my projects..  Looking forward for more cool stuff 
Dwayne Pipe (4 years ago)
Your tuts are amongst the best on here, i appreciate that you do this for free and in your own time, much appreciated !
ZetaBeta25 (4 years ago)
If programming languages like C, C#, C++, etc could be taught in the same style you teach HTML, I'd learn programming a lot faster! I just can't sit through TheNewBoston's tutorials! D:
Filip Kaukiainen (4 years ago)
Please do more Cinema 4D tutorials, I really like them alot and would like to learn more ;/
thebeno100 (4 years ago)
how about some more after FX Tutorials please
Celyn (4 years ago)
Hey Brandon, I wanna ask you about that thing on the top on ur desktop, which has icons and stuff, its really cool. :3
Dosenwerfer (4 years ago)
You did it again! :D Awesome tutorial ^^
Steinadler X (4 years ago)
Nice tut 
Johann (4 years ago)
YaY NavBars! I was hoping for that following my comment which suggested making a nav bar tutorial :)    You forgot to talk about the Twice a week Html Tutorials?
Kamil Zduńczyk (4 years ago)
I am waiting the next lesson :) and I have a question you have a very nice mouse pointer. you can write from where did you get it? I mean this small black arrowhead
Kamil Zduńczyk (4 years ago)
+Jurre Volkers OMG there's so much movie here :) thx I'm start watching
Jurre Volkers (4 years ago)
There is a vid somewere on the channel explaining it i think :)
Jorge Alvarenga (4 years ago)
Thank you. .. Where is Eli if I may know
Just Niceguy (4 years ago)
Josh DeRossett (4 years ago)
Nice video, I am always happy when I see them in my sub box.
FoorX (4 years ago)
Awesome tutorial :D Waiting for next episode.
Jeahn Laffitte (4 years ago)
Quality tut today, Brandon! I learned so much. As always. Thanks again! :D
MultiMartoo (4 years ago)
Love these tutorials
Verc James (4 years ago)
Keep-em Coming! 
shuvodip pabi (4 years ago)
1 request , how i attach a css coode in php ...!!
Antoine Cedric (4 years ago)
exactly the same way, just add this code inside your <head></head> tags <link href="style.css" rel="stylesheet" type="text/css">
Do a lesson on how to optimize for any resolution.(Sorry if my English is bad))
+Ch-Ch-Check It I mean page customization for different screen resolutions for different size screens and mobile devices. (if not clear, I do not know how else to explain it), I can say for sure this is done with css.
MrDevStaff (4 years ago)
+Ch-Ch-Check It Well, they look good and it's easy to make one if you use a framework like bootstrap or so. Maybe you could make a tutorial on how to make a sexy bootstrap design?
Ch-Ch-Check It (4 years ago)
+MrDevStaff I sure hope not... Responsive web pages aren't fun to make. -B
MrDevStaff (4 years ago)
You mean how to make a responsive page?
Sir Sharc (4 years ago)
Again awesome and helpful tutoruial!
Wat, Wattingtons (4 years ago)
PHP next?
What program are you using by the way? I use Dreamweaver ... *DREAMWEAVER IS AWESOME !!!* lol
E U P H O R I A (4 years ago)
Edge Code, its a free coding program by Adobe , though you can use Brackets . Same thing.
babis8142 (4 years ago)
I already know a lot about HTML but I still watch these lol
I hardly use Page CSS or Inline CSS ... *CSS ON A SEPERATE STYLE SHEET "IZ DA BOMB !!!"* lololol
Kamyar Tehrani (4 years ago)
what happen to photoshop and affter effect tutorial
E U P H O R I A (4 years ago)
Eli is sick and Brandon is working on HTML tutorials 
E U P H O R I A (4 years ago)
Awesome tutorial. Much much better than those what adobe teachers teaches. They sound boooring! 
Ro1and (4 years ago)
Could you also make some more advanced tutorials? (maybe advanced php / javascript and practical applications)
E U P H O R I A (4 years ago)
Being honest, this tutorial series is for those too who are completely new. Well mostly for them , So you gotta need to wait until or unless he comes to that chapter or episode ! Be patient ;)
Ch-Ch-Check It (4 years ago)
Here's my third video for HTML and, now, CSS! Due to popular request, I am no longer including the background music in the tutorial, so I hope you folks are happy with that =P if you have any particular requests of what I should cover in the next tutorial, let me know! Enjoy!! -B
KCD Designs (4 years ago)
Thnx Mann for this tutorial was waiting for this hehehhe
E U P H O R I A (4 years ago)
Second LOL! Thanks for the tutorial bro! Good thing i gave you shoutout! ;D. Lol jk . You are awesome for being putting out these tutorials =) 

Would you like to comment?

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