HTML & CSS for Beginners Part 9: External CSS

In this video I show you how to create an external stylesheet, how to link it to your HTML file, and the benefits of an external CSS file. I also look at the very basics of selectors, properties, and values.
W3Schools CSS propterties reference - www.w3schools.c...
This video is part of a large series introducing HTML & CSS to people who have never used it before. The goal of this series is to give you a good enough understanding of HTML and CSS to let you build your first website on your own!
----
Half Bit by Kevin MacLeod is licensed under a Creative Commons Attribution licence (creativecommon...)
Source: incompetech.com...
Artist: incompetech.com/

[@ashishkkrishna]

I was first linked to this series from the HTML Foundations section in The Odin Project but as soon as I reached the CSS foundations in TOP I felt lost, everything they told me went over my head and I literally broke down thinking I was too stupid to understand this, but then I remembered this series and immediately came back here. Man you're a lifesaver, because after the previous video and this I am starting to understand things I couldn't earlier. Thank you so much for these videos.

[@KevinPowell]

So glad to hear that. Keep up the hard work 👍

[@otee6639]

Same here, TOP's CSS module was like rocket science, but kevin's video really simplified it. Even my older brother who is a front-end engineer always recommends kevins vids whenever i get stuck.

[@Mario-su1jz]

Thanks for this comment. I thought I was a buffoon.

[@PS3CookieMonster]

this is so reassuring, i felt the exact same way. became to overwhelming to quick

[@krishnakishore3706]

It is really nice to see this comment bcz, even I thought that "Why can't I understand this Css as I was going with the flow of TOP", Lol 😂 After checking this I pat my self that the TOP Css module is a very bit overwhelming after finishing the HTML.

[@valleybae5384]

thank you! your voice is very warm and comforting. and i love that you speak slowly and carefully. very easy to follow.

[@talktoAB]

Kevin, you're a good teacher. Thank you.

[@1968doggymommy]

These videos are exceptional. Really. Experience and teaching skills in one person are a rare combination. The series of videos should be the first package in any beginner's exposure to web coding (later on web design) in every high-school, college and university in ... well, anywhere. Says the teacher: "Go home and watch these, my students ... and I'll see you in class next month ... at which point I myself will know far less than you do, look like a novice, and stop getting paid for whatever it is I do." Well done and thank you so much.

[@uncleted470]

This video was made 7 years ago and here i am in 2024 watching and learning. U are so awsome. I just started web design and this has been by go to. Everyday I come back from class, I watch and practice what was taught because u explain it so much better. For example I didnt really understand how to go about the external CSS. However after this video I find it very easy and also so much better. Thank you for taking out your time to offer us this knowledge free of charge. Love from Cameroon.

[@hybirds111]

Wowzers man! I just noticed It was the videos birthday today! 5 years old happy birthday Mr="HTML & CSS for Beginners Part9: External CSS" thanks for the great memories in learning! highly valuable stuff here! many thanks fella. best wishes to your future uploaded days!!

[@slo3442]

I'm a Game Art student trying to learn how to code my own art portfolio website and your videos 7 years later are immensely helpful! The cute Jingle you played at the outro of the video made me smile like I did a good job haha

[@mazharulislam23]

give us your portfolio website link

[@georgestayvus9581]

Kelvin, I must say you really are a good teacher

[@KevinPowell]

Thanks so much George :)

[@davidyi8786]

Thank you for helping me follow along.

[@maurolimaok]

Man, I'm really enjoying these videos. I'm finally managing to understand the "whys"! Thanks a lot!

[@pashko-k6h]

i'm really enjoying this course, Kevin makes it so easy and engaging

[@sgtkeebler]

I am the same as @ashishkkrishna. I was super confident after completing the HTML section of TOP. I went to CSS foundations and confidence started fading, then I remembered Kevin Powell's videos, and now CSS was not as complicated as I am making it to be. I know this video is old, but this is why I like vs code. VS code displays the color that you would like to use which is a genuinely nice feature.

[@koul_2482]

thanks for all this information! I am more of a visual learner and have learned so much!

[@McCeighty]

I love these videos! I was trying to learn from someone else and was ending up rather confused. This lesson made all the difference. I am so happy to have learned what CSS is and how it makes everything more clear. Thank you! I'm excited for the next lessons

[@duck8dodgers]

Nothing was working right in this video until I realized that I'd saved my style.css file as styel.css, so remember kids spelling counts!

[@IG7799-c4u]

I can relate. I sometimes forget to link my css file to my html file and get super confused on why nothing was changing xD

[@Osmanity]

omg I had the same issue here not gonna lie xD

[@user-mr4cu9hz8p]

even after 6 years this video is awesome

[@mikeshaw4610]

This is good, especially for beginners. One suggestion would be for beginners to stick to the colors that you can code by starting the color nam vs the code.

[@bibithebadger4941]

you are becoming my best friend lately :p thank you c: industrial engineer here but i want to learn programming too and who knows, maybe i will be able to merge this two fields and do something pretty cool in the future for my country :D thank you once again for teaching us so easy to understand and so clean. See you in the next comments!

[@Extention6]

really glad i found this channel who the hell dislikes this.. weirdos thanks for these videos

[@rhowie.dearest]

Kevin, thank you for these amazing videos!

[@victoriak.f9064]

I love these tutorial videos! They are so easy to follow and explains perfectly all you need to know to get started!

[@mekkiferiel7832]

thank you for your videos, they are clear and very well done !

[@karimalaa3441]

Hi having so much fun with your videos and learning alot too so thank and keep up and make javascript and react videos too ❤

[@Rhine2271]

It's like Jared from silicon valley is teaching me html and css! And doing an exceptional job of it just like you'd expect from Jared!

[@workingwoman9331]

How do you get what you typed for a paragraph to stay within a certain amount of space? When I type it goes and goes and goes lol it does not automatically return to the next line like a word document. I am very new to all this. I AM VERY MUCH ENJOYING THIS SET OF VIDEOS!!! Thank you for posting.

[@quangnguyentran2594]

Super helpful. Thanks for your hardworks!

[@themalonecode]

Thank you TOP and KP

[@bobbouwmans]

Thnx for the video's, they are very helpful, greetz from Holland. 👍🏻

[@ripdoxyyy]

thank you Kevin

[@ChukwumaAlexia-of9vw]

Beautiful

[@nohandle759]

Love externalizing my CSS. Now my CSS can live externally, like my dread.

[@sweezy.mp5]

Your voice is very good i lesson all things from you can you make javascript and python lessons?

[@alialkubaisi5678]

Kevin i'm loving your videos very well explained, i have a question please. I see other people put a type in between rel and href and you did not. Can you explain maybe what the difference is?

[@surewhynot5920]

Great video, Kevin! I misunderstood The Odin Project instructions, so instead of watching just your first video initially, I made it all the way to here Which is not bad at all! You make it so easy to follow along.

[@user-dc5sn9hh8n]

This lesson are awesome I can’t thank you enough I wish you have js and python lesson You’re a great teacher man thanks a lot This is too easy and simple for a complicated subject as this all over the Internet

[@vitpav1164]

i'm not an absolute beginner, but this gives me so much more order in my head, the question would be in 2021: is tailwind bad then, if you want to keep your css in the separate files?

[@pd6055]

Same

[@erfannikbin7683]

so nice and helpful

[@amehjoseph4016]

Hi Kelvin! I'm really learning a lot from your videos. Thanks a lot!

[@superfutbolistas]

you are awesome !

[@olusanyaolamide9764]

Hi, thanks so much

[@patriciocorvalan1298]

Really clear!

[@bellaunta]

hey, dont know if anyone is reading this, but i run into a problem. I added the link with css to my page two header, yet it doesnt get applied to the page.. ive proofread my code 85 million times and i cant find any errors, simply doesnt apply the style. terminal gives no errors either. any recommendations ?

[@syllanceio0.1]

Maybe you have some inline css in the page two that's overriding the external css? I hope that you figure it out!

[@Steelwall44]

This may be a silly question, but if I wanted my second page to have a different color scheme than my other pages, would I make a secondary style folder (ie stylespagetwo.css)?

[@KevinPowell]

Not a silly question at all! When you think about it logically, it makes sense to have a separate CSS file. By using only one CSS file though, you will speed things up. Once the homepage has loaded, the CSS file will be cached, and the second page will load faster if it's using the same CSS file. It just means the file is much longer. One thing you can do is give the tag a class, like , which makes it easy to target things that are only on that one page.

[@SamCo99]

god bless you sir

[@smitamahadik1605]

hey, what is the difference between inline css, internal css, external css

[@omarrojjas-ys6wp]

when you linked to the css file why did you use link instead of a??

[@mohamadali6636]

Thanks!

[@ionutrogojina1066]

But what if I want that my first paragraph be blue and the other one orange in my external css ?

[@tennis10182]

so what IF you wanted to change only certain paragraphs (in addition to whole section sections that were performed in the video)? would u have to do it in the index.html or is there a way to do it all in the css file?

[@KevinPowell]

Add a class to that paragraph, or paragraphs, that you want to change, and then select that class in the CSS to make the changes 🙂

[@quiztherapy6851]

i missed how do we add a second page to this project. Is it just create a file in the same folder and name it index. html or name it differently?

[@TheRealNas1]

If u mean a second page like about page go to the folder in which u have the index.html in and create new folder eg.pagetwo.html and. If its the style.css second page you want rather than that use classes and ids way faster and easier. and hey give us an update on ur progress tho peace out!!!!

[@markevans7239]

Hi Kevin With you link to your css/style.css this is for the main index page right? But if I did a navbar with an about me html file would I do can I do a new css file for about me so it would be css/aboutme.css ? Mark

[@KevinPowell]

I'd suggest having one CSS file that's used for all of your pages. It can lead to a very big CSS file in the end (specially for large sites), but it's the best way to do it. Just keep it organized! You could have a main CSS file with global elements (things that are on all your pages), and then have another CSS file for that individual page, but that leads to more HTTP requests, which is generally a bad thing... HTTP/2 is coming though, which will change things a bit... And this is getting overcomplicated fast! I tend to have one CSS file when a site goes live, but I also use a CSS preprocessor (Sass), which makes organization a lot easier. I'll be talking a bit about that in my next video.

[@markevans7239]

Kevin Powell hi Ok thank you, sorry just one more question :) So how do I change a paragraph or a word color in the about me without it effecting the main index paragraph?

[@KevinPowell]

Ask away, it's what I'm here for! I would give that paragraph its own class, say or something in that vein... For one word, wrap it in a span tag with a class to change the color.

[@markevans7239]

Kevin Powell thanks Kevin you have been very helpful :)

[@markevans7239]

Kevin Powell I have an image on my main page, and I've done a photo gallery but when I changed the image size in css for image it changed my main image, So can I give the image on my main page a class name so it can put it back to the size I had it?

[@alfinnadzim4386]

hi,thank you

[@wwdoubleyew]

hi!

[@sudharshans1545]

here

[@OliverPotatoFox]

Hi

[@hammadnaushahi8411]

hi

[@pranavnyavanandi9710]

Appreciate the tutorial very much although it would have been better if you had not taught the whole lesson with the terrible black background and white text giving a very disturbing contrast.

[@MagnusAnand]

all seperate.... until tailwindcss... 😂

[@soberreflections656]

awsome

[@alexpuiu3018]

hi!