Common CSS properties and how they work

It doesn't take that many properties to style your site really nice. These roughly 20 properties should be a good foundation to build anything you want.
Previous video on HTML tags: • Common HTML tags and w...
Hope you enjoyed the video!
Check out this code here:
github.com/engineer-man/youtu...
Join my Discord server to chat with me:
/ discord
Check out some code on my GitHub:
github.com/realtux
github.com/engineer-man/youtube
Come visit us on Reddit:
/ engineerman
Other Social:
/ _engineerman
/ engineermanyt

[@Jeevanmn]

This is actually the most complete yet compact course in html css on the whole internet!

[@kajautus]

And it took like 10min.

[@patrique.taletoria]

Thank you so much. A lot of some youtubers who explained this, won't get to the point. Some even take hours trying to cover what you did here in 12 mins. For the hours and mins and secs that you have saved me, thank you sooo much.

[@perrymathias]

i'm glad chase had an absolute and fixed position. cute dog. thanks man!

[@LifelessNerd]

Pumped for the next video recreating pages!

[@AJonVolk]

I love your short concise style of covering syntax, it's refreshing and so much more efficient than other KZbin video's, I hope my comment helps the algorithm :p

[@njafros8]

Bro Ive watched so many videos on the subject you're the only one who took the time to explain the basics... Awesome stuff man much apreciated !

[@EngineerMan]

You're welcome :)

[@hughrees-beaumont9433]

This is head and shoulders the best HTML/CSS video I've seen anywhere; it answered pretty much every question I've ever had so I'm extremely grateful to you

[@hadireg]

Great way of putting things and explanation structure! Thank You!

[@datpmf]

Like a breath of fresh air. Fundamentals are important!

[@mardarg3]

Best CSS explanation! Thank you!

[@3llo0H]

thanks for the video! exactly what I was looking for

[@skootdiggity1301]

#whatsgoinonjineers

[@danield.7359]

great and simple to understand explanation. I missed "float" though.

[@EngineerMan]

I ended up cutting float out at the editing process because I wasn't satisfied how I explained it. I'll be sure to cover it in a future HTML/CSS video (there's still a couple more to go).

[@TrevorWilliams215]

This is wonderful. Finally someone explains this nicely enough with the right visuals to make it click. I have struggled with CSS for so long and gave up because when I try to experiment with it, nothing changes on the webpage or it breaks something unrelated. CSS debugging tools are no help and I'm left to google stuff and watch videos in accents I can barely comprehend. Thank you for doing this and I can't wait to see you break down and recreate websites from scratch. Someone needs to make that a series of videos if that doesn't already exist.

[@khalifaigbin5013]

This really helped, thank you.

[@closertothecosmos3519]

subbed bcz this helped and finding you was difficult

[@pja1991]

Thank you for sharing this.

[@danesmith7774]

I've recently been building my own site - for fun mostly. I've used Bootstrap to handle the styling, do you always write custom css for your projects or do you use pre-built libraries?

[@EngineerMan]

In 2020 for any non-trivial project I'll use a CSS framework. Typically Bootstrap, Foundation, or Material Components for Web.

[@aayanpathan5124]

I am struggling learn web Development 2 years i see recommendations in feed i glad youtube algorithm thanks enginner man

[@spy4303]

Why are you so underrated, man??

[@noweare1]

It takes years to be an overnight sensation.

[@Fytrzaczek21]

2137? He used the funny number! Pope JP2 loves you!

[@MrGustavCR]

@Engineer Man Thank you for a great tutorial. Question: How come you prepend the main.css stylesheet with a forward slash when you link to it inside the index.html? I can reproduce the tutorial sample webpage when not prepending this file with a "/". I use the same folder structure as well.

[@EngineerMan]

On a URL that is just "/" it doesn't matter if you do "/main.css" or "main.css". However, if you were on a URL that was like "/users/login" and you put "main.css" it would try to request that from the URL "/users/login/main.css" which wouldn't exist. Generally speaking you want to express URLs as the full path including the "/" in the beginning.

[@michaelvilain8457]

Thanks for explaining the difference between padding and margin. Those always confused me.

[@zigginzag584]

Must be something in the air, I was right in the middle of making a new local site just to make listening to music and going through my files a bit more enjoyable.

[@Venom-ne4ox]

Great, Thanks a lot!

[@kavishkasulakshana9848]

thank you so much 👍

[@futbolplayer913]

Thank you so much! Great overview! If I want a footer on my web page, what do you reccomend? If the page content is short then the footer will look out of place. Any reccomendations welcome

[@danield.7359]

The "fixed" position property ("position: fixed;") could help as it makes the item stay in the same position within a view-port regardless of the view-port's size and regardless if scrolling.

[@futbolplayer913]

@@danield.7359 A fixed footer behaves similar to the accept cookies notifications on sites. Do you recommend I have it as relative and switch to fixed if the height is too small?

[@septim2315]

Why not use absolute positioning? Put it at the end of the uppermost parent or before then position it absolute with bottom: 0

[@danield.7359]

@@futbolplayer913 try the solution of Septim if you like it to stay at the bottom of the document. Means, if you scroll up (say the document is longer than the view port) it will disappear. Otherwise with the fixed position it may indeed behave like the (bugging) EU cookie notification.

[@futbolplayer913]

@@septim2315 Perfect. Thank you

[@swapnilshinde9868]

Can python make search bot program to look website to buy chipset available stuff?

[@Demodude123]

This is great, but how does one center a div?

[@buddy.abc123]

I google it everytime, I still don't know. CSS is the hardest part of a dev's job

[@o156GTA]

Make a class for the div and use "margin: auto;" and give it a width below 100% or it won't do anything.

[@septim2315]

If you can use flexbox for parent, use that + justify-content and align-items. If not use the margin method

[@o156GTA]

@@septim2315 Flexbox is very useful but I feel it needs a video of it's own.

[@Erynnin]

For Canadians, the title Engineer is regulated and reserved for licensed individuals. With that in mind and seeing a video about CSS, well... Is that Engineering?

[@EngineerMan]

Maybe engineering with a lowercase e.

[@a.a.aa.a.a9756]

why when I open a new document and I click on enter it's not ganging to google ??

[@maycherryblossoms]

How do you configure Atom to auto refresh your browser like that?

[@EngineerMan]

It's not Atom that does that, it's the npm package live-server.

[@usingvancedplzdontban1128]

Doesn't your Atom get high CPU usage problems? Mine spikes up to 100% for no good reason erratically. Thinking of ditching Atom.

[@EngineerMan]

The only time I have high CPU issues with Atom is when I'm working on very large files. However, I suspect this would be a problem with most graphical editors.

[@usingvancedplzdontban1128]

@@EngineerMan unfortunately it happens much more frequently in Atom than VS Code for me. Even a simple Hello World Python script in Atom sometimes volcanoes my CPU to a constant 100% CPU usage, fans ablaze and all; ultimately crashing my PC. Anyway, good to hear you're not facing that problem.

[@pja1991]

What is the IDE you are using?

[@braydenhouston]

He is using the Atom Text Editor atom.io/

[@pja1991]

@@braydenhouston Thank you.

[@ukeshrestha]

Cool

[@resumidor.]

Open the firmware of mi band 4 ? How much costo to you make it?