HomeОбразованиеRelated VideosMore From: thenewboston

XHTML and CSS Tutorial - 24 - Width & Height

1334 ratings | 158527 views
Facebook - https://www.facebook.com/TheNewBoston-464114846956315/ GitHub - https://github.com/buckyroberts Google+ - https://plus.google.com/+BuckyRoberts LinkedIn - https://www.linkedin.com/in/buckyroberts reddit - https://www.reddit.com/r/thenewboston/ Support - https://www.patreon.com/thenewboston thenewboston - https://thenewboston.com/ Twitter - https://twitter.com/bucky_roberts
Html code for embedding videos on your blog
Text Comments (93)
cory jensen (16 days ago)
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
cory jensen (16 days ago)
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEELLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
Brandt Phillips (19 days ago)
hi
I wonder if he makes the typos on purpose at this point
Ege Şanel (10 months ago)
how can i make the edges of a padding polished like i don't want it to be all edgy and stuff
Rhys Pymont (1 year ago)
is there a way to make the width span across the same size as the text automatically?
Getrogo (2 years ago)
the text didn't get centered after using width in the background color .. someone help me out please
kittiecommittee (2 years ago)
so what's the dif between using background color on a text element and using padding? don't they work the same? sorry for the dumb question
Flore Loriz (2 years ago)
Why are you saying "sorry for the dumb question"? Remember: NO QUESTION IS DUMB!!! expect for those that are...
yerrapotu kiran (2 years ago)
Eg if padding is 50px then text will be 50px away from border and background-color fills the padding with required color
Mohammad Mahjoub (2 years ago)
<!DOCTYPE html> <html lang="en"> <!-- This is the 9th CSS class and it's about width and height By default the width of your text will be to the end of your web site. However, the height of your text will be == to size of your text.. --> <head> <style type="text/css"> h3 {background-color: red; color: white; width: 53%; height: 30px; } </style> </head> <body> <h3> I love that girl that I meet yesterday </h3> </body> </html>
yerrapotu kiran (2 years ago)
ayyy captain
Gandalf the Grey (2 years ago)
+yerrapotu, Basically what it says; it specifies that this is a website in English.
yerrapotu kiran (2 years ago)
What is html Lang =en
Mohammad Mahjoub (2 years ago)
Yo! Does anyone know how make the width exactly at the end of the text without having testing it couple times? Thanks guys!
Dragon Ouali (3 years ago)
how do you adjust the table's position?
Aditya Patgaonkar (2 years ago)
Thank you +Dragon Ouali​.
Robert Reimann (2 years ago)
+Dragon Ouali I will :D
Dragon Ouali (3 years ago)
I use <div> tags to position pretty much everything. Watch the rest of the tutorial series to know what I'm talking about.
Aditya Patgaonkar (3 years ago)
+Dragon Ouali Did you get the answer?If yes, please share.Thanks.
Larry Hoover (3 years ago)
Really, really enjoying your tutorials on html.  Thanks so much forall our time and effort.  Larry H.
Andrewboy159 (1 year ago)
Craig Polchinski I died reading that XD
Craig Polchinski (1 year ago)
Larry thank you for signing your comment to avoid confusion
Are you teaching us about lace butterfly? There is an off topic link in recommendations, even Love at first hiccup - FULL MOVIE - HQ - free, no registration.
Bayssa Belachew (4 years ago)
Another great video (: Bucky is the Best!
K.Robert Evans (4 years ago)
One could confuse width with cellpadding pretty easily in this example. Might it be better to discuss this during the border cellpadding tutorial and discuss when it is better to use one or the other. Just a thought.
Laila Jamshaid (4 years ago)
bucky is so cute n funny
Glen Sul (4 years ago)
I strongly agree ;) And he's also smart <3
Daniel djabko (4 years ago)
"And I'll smell you guys later!"
Sibialix (5 years ago)
And i will smell you guys later LOL!
Beggi Swag (5 years ago)
<center <h1 Wsafmjkhtatpgoaht</h1 </center right?
Beggi Swag (5 years ago)
wtf is codeacameday (I spelled it wrong but who cares)
TooT - the new Google (5 years ago)
and Codecademy
Valkaron Valceon (5 years ago)
+ The teachers who got fired because they only use Bucky's guides these days.
silver2screen (5 years ago)
yeah i am pretty sure he said that too! lol
TheGamer720x (5 years ago)
At the ending did you say " Smell you guys later ???"
David Jarrin (5 years ago)
the width:..... isn't working but the height:.... is....why is this?
Rob L (5 years ago)
"Business phones don't have to be complicated!!!" AHHH I HATE damn Cudatel!
awrootbeer345 (5 years ago)
you can use div , go to tutorial 31
Boris Jurosevic (5 years ago)
about tree fiddy pixels
myloveisrody (5 years ago)
To claim an exact position of your text that has background write in css: position:relative; right:-50%; You can also add top,bottom,left sides.You can test it by yourself. :)
Ramzy Elias (5 years ago)
WOW useful video.
Codori Marius (5 years ago)
sorry bucky, but you're wrong , you could even use your name... you can even create youre own tag, and use it like a normal tag..... but even this.. you're the best
Shaquille Hinds (5 years ago)
misspelling genius!
Micheal Giff (5 years ago)
Bucky, I am so thankful for your tutorials. I need to know a programming language before I start my degree, and you are the way to go. I recommended you to a couple of friends who are learning just as quickly as me. I am also doing your Java tutorials and plan to do your PHP, Javascript, HTML5 and probably jquery tutorials once I am finished with these ones.
uzaricanin07 (5 years ago)
How would you make the width to be the same as the text?
beprot ling (5 years ago)
24!
David K (5 years ago)
late, but, I think problem causes your pc.. did you solved it?
panda100123 (5 years ago)
Howcome when I type "Width: 500px", it becomes un-centered? It ignores the text-align:center...
Brendan Noble (6 years ago)
Vote if Bucky is the greatest programmer on the Earth!
nipuni malsara (6 years ago)
thank u
programmer1905 (6 years ago)
I WAS ABLE TO MAKE THE FACEBOOK LOGO, =)
Braden Best (6 years ago)
Oh, sorry. I should have mentioned that I was referring the the U.S.S.R. flag with the hammer and sickle, which IS yellow and red.
Colin Reed (6 years ago)
Did anyone see the wordpress advertisement before this video? they claimed that you needed to know Java to build a website... They need to do their research. They meant Javascript
Tim Vermeulen (6 years ago)
23 done, 23 to go… Halfway, bitchez! :D
TheSplendidSpiders (6 years ago)
lol.
Ewout Lokker (6 years ago)
i becoming an expert!! :p
Yume Hasu (6 years ago)
no one has noticed he pronounces "height" in a strange way? no? just me? :::meme okay:::
Lance Friended (6 years ago)
how fast is your upload?thumbs up if you want.
Aizacc84 (6 years ago)
I know, I just like to make random conversations with people.
Braden Best (6 years ago)
no. I was pointing out every flag I know of has red as one of the colors, sometimes with white, so it's silly to insist that the color belongs to one single nation.
Aizacc84 (6 years ago)
You sir just point out the blood on everyone of those flags.
Braden Best (6 years ago)
who's a conspiracy theorist? :|
Aizacc84 (6 years ago)
Conspiracy Theorist!!!
Beast M0D (6 years ago)
Speaking of shortcuts, if anybody knows java or is learning java, a short cut for System.out.println("Hello World"); is if you type syso and the press ctrl and space at the same time the same outcome will come but without the Hello World part Thumbs Up so people can see!
Murtaza2501 (6 years ago)
You know, I'm stinky right now.....
Murtaza2501 (6 years ago)
Thank you very much Bucky for all of the hard work you do for us!
Murtaza2501 (6 years ago)
I'll complete this course, then I'll do the JavaScript one, then C and C++ that's all.
Braden Best (6 years ago)
most flags have red and/or white canada-red/white japan-red/white usa-red/white/blue russia-red/yellow UK-red/white/blue iraq-red/white/green/black so what are you getting at?
Braden Best (6 years ago)
As far as I know, there has been a multi-uploader in youtube since 2007. So maybe he makes all the episodes in one sitting, and mass uploads them on the multi-uploader.
Osman Tursun (6 years ago)
ur the nice teache with excellent accent.. haha, like u...
thesaramon (6 years ago)
Ure the best teacher ive ever had in this major
ThisWayGaming (6 years ago)
@coolguy4488 That's what the ladies tell him ;)
Jesus Rodriguez (6 years ago)
YOU LIKE WHITE AND RED? YOU BELONG TO CANADA
Robert Hotaran (6 years ago)
a shortcut ex: margin 50px 40px 100px 20 px . it's simple going clockwise beggining up (top 50px) - right(40px) - down(bottom 100px) - left(20px). works for padding too
placebotos (6 years ago)
"So thank you guys for watching, don't forget to subscribe and I'll SMELL you guys later!" :D :D :D
Aa Ha (6 years ago)
@Azinoskateteam or just go on his website and click donate?
Manmeet Purba (6 years ago)
Always " like" the tutorial you watch, appreciate this man work.
Mitchell Griffin (7 years ago)
@psntanner11man Yup he did.
Thomas Cook (7 years ago)
heading4: "I don't get no respect, no respect at all!"
Ultroman the Tacoman (7 years ago)
@juzuze You sure? My anmes is LutromanEthAtcoman
The Mighty Shuzum (7 years ago)
@JIM50 same as me dude.. he's a drug!
Just Some Fails (7 years ago)
I am addicted to bucky and his tutorials he is funny and explains everything clearly Because of him I am going to learn every programming language he posts on his site
juzuze (7 years ago)
there are 2 typos at the start
Anas Barghouth (7 years ago)
Did he say at the end "I'll smell you guys later?" btw.... you're my man! :) and honestly... I smell good always! :p
UGMEditing (7 years ago)
@paper4life dude lol thanks 4 what thanks4life lllooolll
monsterhunter99 (7 years ago)
@MrPitbull917 I am so I will also say hi to my mom =)
Radcliffe Robinson (7 years ago)
@MrPitbull917 just u .......say hi to ur mom 4 me
PixelCode Tim (7 years ago)
Thanks!!
glen (7 years ago)
@coolguy4488 that's good i hate trying to learn something like HTML the finish the text align video and having to wait like a week for the next video to learn the next thing
MrPitbull917 (7 years ago)
Who here is under 13 and already learning XHTML?
YamoxD (7 years ago)
ty so much bucky!
Wittingtonsworth (7 years ago)
You upload FAST!

Would you like to comment?

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