CSS Introduction: Formatting Web Pages

CSS (cascading style sheet) tutorial, demonstrating internal and external style sheets for formatting the font face, size, line spacing and colour of text in HTML documents, as well as custom link styles and divisions (divs) for page layout.

This video continues the HTML Introduction I started in this video:

Chapters:
00:00 Introduction
00:38 Stying HTML
06:17 External Style Sheets
09:07 More Styles
14:56 Divisions & Page Layout
18:40 Classic Page Layout
21:02 Wrap

[atulbhardwaj]

He is the best professor anyone can get he just taught 75% frontend in just 2 25min videos and everything is so clear. You don't need teachers who teaches so fast that you can't cope up with his voice is also study but everything is very clear.

[Reziac]

Best simple explanation of CSS I've seen. Often CSS incites hatred because of "Standards, so many to choose from!" and "Which browser shall we refuse to work with today??" -- but for simple sites, clearly it need not be so.

Always remember to close your DIV tags, or the Evil DIV Fairy will make the rest of the page disappear (at least in anally-correct browsers).

[Says the person who still uses tables for layout, and hasn't changed my page design since 1998... ain't broke, not fixing it!]

[stolz]

A <center> tag makes my day! Oh, early 2000's ....

[PS_Tube]

Greetings... Elates us like hearing voice of a long lost friend.

[mr.techie]

Chris, I can't thank you enough for this wonderful, educational, and inspirational content. You have had a great impact on my life, and have educated me on computing. I just want to take time to say thank you for all you do. Thank you for your time and commitment to creating this YouTube channel. I think your content would be awesome for remote learning settings, because it is truly educational, and so awesome. I believe that you deserve millions of subscribers, because your content is so amazing. I think that learning HTML and CSS is a very useful skill and will help lots of people. Also, I think you should consider making a programming series for kids - I think you would be a very great person to do that.

Thank you so much for all that you do, it is truly amazing.
Bob

_"I can do all things through him who strengthens me." - Philippians 4:13_

[idowebwork]

Web Developer approved. Wish there was a video showing this back in 1998, when my web dev journey began.

[michaelronan]

Once again you bring light and clarity to this subject whilst others spend far longer adding to the confusion. Many thanks for this glimpse under the interweb's bonnet.

[victorcarter]

I've learnt more in 20 mintes viewing than I have done previously in 20 hours of reading about the topic. Thank you

[WPGinfo]

Hi Chris,
As an experienced website builder I can say you presented a very useful and comprehensive 'starterkit' of the basic concepts. Despite the fact that many sites these days make use of tools such as CMS-es e.g. Wordpress, elementor, 'theme-based'-sitebuilders, php, js etc., there is still a role for HTML & CSS in these 'modern websites'. I am sure this is a very useful video for all those that dipping their toes into building websites.

[florabee]

Thank you so much for de-mystifying css!
Exactly the right amount of code:result examples to demonstrate clearly the use of cascading style sheets without being too involved and risking an “attention balk” by this viewer. Great job!

[bananaskin]

Thank you. I suggest considering HTML 5 tags like - header, footer, and section.
For some, who grew up after the advent of dynamic HTML - What's that!, they could stumble around for years without realizing that anyone can do HTML and CSS without a web server to assemble the pieces.
Kevin Yank wrote of HTML, CSS, and Javascript as structure, formatting, and behavior.
Years ago, when I tried a little library called jQuery, my use of HTML and CSS made things more efficient because jQuery plugged into the CSS selectors and HTML tags.
Nowadays I do HTML and CSS instead of Word.
Take care. Stay healthy.

[NewAgeDIY]

Good Day Chris. It’s exciting to see young people starting to get into website designing. Its even more exciting to see an older group of adults getting interested as well. Your show today will definitely help spread word.

[Colin_Ames]

A clear and concise explanation of a subject I am completely unfamiliar with. Thanks Chris.

[leetaylor]

Excellent video as always from Chris!
Another thing I like to add for images is
img { max-width: 100%; height: auto; }
This will stop your images breaking out of their containers and also fit onto smaller devices :)

[sinjhguddu]

Wonderful tutorial. Wish coding was taught in such a simplified, enjoyable way. Grazie!!

[butters_]

Christopher Barnatt is my favourite computer guy. Linus is second. 😉
I wish this channel was more popular.

[BigRedTower]

A good way to implement light + dark color schemes is, have 2 CSS sheets, one for light, and one for dark. Then, with some minor scripting and a cookie, you can use the style sheet the user prefers. You can even make a wide assortment of color schemes users can choose from. Be sure to give them cool names, though! Just always remember that 3 "good" color schemes are better than 600 generic, heartless color schemes.

Or, if you happen to be an insane maniac, you can point your style sheet links to a script that generates the CSS dynamically. It works great, but will waste a few (billion) CPU slices on the server end.

Great video as always, Chris!

[PaPaTheGMan]

Awesome video. I learned a ton. Just the right amount of appetizer to send me off to find a main course! And so, the trek into the rabbit hole begins!

[sidthetech_USA]

Good to know the basics of HTML and CSS, then learn Javascript. It's a rabbit-hole though.
Always learning still to this day.
Once you get to Javascript, you'll then open a rabbit hole of rabbit holes with different frameworks and libraries etc, and from there goes even more rabbit holes. You gotta find what works for you the best. There are tools out there that are free that will help tremendously. VS-Code is one of the text editors that is great. There are a handful of others like it.

Once you get all that done, you can learn templating and mustache, then you can then get into the database end of things, which again, is another rabbit hole of rabbit holes.

Again, find what works for you and hope it doesn't go obsolete within a year or two.

Happy coding! Thanks Chris!

[KowboyUSA]

Excellent video. Last time I tried to understand CSS it left me completely confused. Now I get it! 👍