CSS Introduction and Tutorial for Beginners
Vložit
- čas přidán 14. 06. 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
In this CSS introduction and tutorial for beginners, you will learn how CSS applies to HTML, the different types of CSS, the anatomy of a CSS ruleset, and how to avoid errors in your CSS code.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
• CSS Tutorials for Begi...
🔗 All Resources for this CSS Tutorial Series: github.com/gitdagray/css_course
📬 Course Updates ➜ courses.davegray.codes/
CSS Introduction and Tutorial for Beginners
(00:00) Intro
(00:05) Welcome and Who This Tutorial Series Is For
(00:54) What is CSS?
(01:23) HTML vs CSS
(02:12) The Tools We Need
(03:00) Create an HTML page
(04:17) External CSS
(06:13) Adding Live Server to VS Code
(08:01) Internal CSS
(10:02) Inline CSS
(11:08) Anatomy of a CSS Ruleset
(12:22) Errors in CSS
(13:27) Validating your CSS code
⚙ Web Dev Tools:
Chrome Browser: www.google.com/chrome/
Visual Studio Code (VS Code): code.visualstudio.com/
Live Server VS Code Extension: marketplace.visualstudio.com/...
vscode-icons VS Code Extension: marketplace.visualstudio.com/...
Github Themes VS Code Extension: marketplace.visualstudio.com/...
W3C CSS Validator: jigsaw.w3.org/css-validator/
📚 References:
MDN CSS: developer.mozilla.org/en-US/d...
MDN CSS Basics: developer.mozilla.org/en-US/d...
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about getting started with CSS helpful? If so, please share. Let me know your thoughts in the comments.
#css #introduction #tutorial
After learning the basics of HTML, the next step in your web development journey should be to learn the basics of CSS. That's what this CSS for Beginners tutorial series is all about! In this tutorial, you will get help getting started with CSS - from the tools you need to identifying the different types of CSS to how to apply your first CSS declarations - it's all in this tutorial. If you haven't learned HTML yet, I suggest starting there first with my HTML for Beginners playlist here: czcams.com/play/PL0Zuz27SZ-6OlAwitnFUubtE93DO-l0vu.html
I've just finished the HTML course - I couldn't get enough of it, I did the whole 4 hour tutorial and the project in two days, I've just moved on to this - fantastic content, far and away the most accessible I've found yet. I've just started this course but you've really excited me about the possibilities. Thank you so much
You're welcome and thank you for the kind words! 🙏💯
how are you doing? found a job?
"Remember to keep striving for progress over perfection and a little progress every day will go a very long way."
I'm always happy and it makes me feel good to hear this at the end of each video.
You are a great teacher.
You richly deserve the title of Professor.
I'm here from FreeCodeCamp. I'm about 2 hours into your HTML course and I have to say it's easily the best on the entire web I have come across. It's so detailed and you clearly explain how important using semantics are to accessibility. A lot of people seem to skim over this when doing their own courses/tutorials. So it's very refreshing to see someone take the time to explain and introduce many more elements than you would typically see from most other people. I can't wait to start this CSS course once I have finished watching the HTML course. If it's anywhere as good as that is, then It'll be amazing. Thank you for all your hard work!
Thank you for the kind words! 🙏 I am still building this CSS series. One new chapter per week until it is complete. 🚀
Man, i can't wait to go through all the content available here at your channel. There is so much good stuff.. I mean the least i can do is comment in every single video thanking you for it!
Dave, I'm using these as a refresher. They are perfect. Thank you.
You're getting more and more subscribers lately. You completely deserve it. Thanks for all this quality content.
You're welcome! 🙏💯 And thank you for the support!
Thanks a lot for making the lessons enjoyable for us!
Great content man, you explain everything in a way thats easily understood and show plenty of visuals. My go to source for all things coding related!
Thank you for the kinde words, Joshua! 🙏💯
Done thanks!
CSS applied to the element itself takes precedent over everything else but in-line css in tag) doesn’t take precedent over separate style sheet file, but whichever is read first in the html overwrites the others. If you have in-line and style sheet both, the properties in common will be overwritten by what is read last and the other properties/attributes will remain
I came here to check all CZcams courses for CSS. I saw many courses but nothing simple and straight as you. I am glad to subscribe and thank you for your efforts.
You're welcome!
Hello, i recently finished your html course &now I am confident in that just Because of you sir! Now starting new journey to learn css from you sir. Thank you for these wonderful playlists and for free which others are providing for a great sum of money.
Thank you sir.
Hi Dave, thank you so much for this. I feel like all of this course was specifically made for me and is the one thing I needed and finally found
Hey , I'm learning HTML and CSS on CZcams and thought it might be more enjoyable and productive to have a learning partner. interested in joining me?
Best instructor !!! Explained very clearly
Glad it was helpful! 🙏💯
Thank you, Dave
Thank you Dave for making me love web designing once again
Glad to hear that! 💯🙏
Hi Dave! I just finished your HTML Course. I could say that your lesson was the best among all other tutorials. I'm planning to use your channel as my main source of information regarding Web Development. I hope that I can finish all of these until React and Node.js :) Thanks a lot!!!
You're welcome! 🙏 💯
Thank you very much Dave, just did the HTML course and now on to this, have not programmed since MS Basic in the 80's, back in the day....light years away, but getting closer. Also working on a bit of Python as well. You are a very good teacher!
Glad it was helpful!
Now that I have become somewhat confident in CSS, this playlist really helps me revise all the important features of CSS. Thank you very much Sir for creating this wonderful channel. It really has come as a blessing to my life when I have started my journey to learning web development.
Super tutorial dave gray thank you very much😍😍😍
You're very welcome! 💯
Thanks ❤
Hi Dave, looking forward for this course. Keep going. One request is that to teach some advanced css contents like sass/animations in the end please.
Thank you, Shiva! I will keep Sass separate, but I will likely include some animations before this series is over. Thanks for the request! 💯🙏
thankyou teacher Dave Gray! understandeble content i like very much.from uzbekistan
Hello to Uzbekistan! 👋 You're welcome!
thank you sir
You should be recognised for your teaching abilities since you make things so simple to learn.
Thank you for the kind words, Leye! 🙏
I'm continuing from the HTML course. Thank you sir!
Most welcome!
Thank you so much sir🥰🥰 your teaching method is very easy and you deserves millions of subscribers
So nice of you! 💯
you are the best mentor i ve find in the web
Thank you for the kind words! 💯
Your videos are amazing 👏 please don't stop you help me a lot 😉 thx 😉
Thank you, Frederico! 🙏🙏
It's a great course
hi gray thanks alotectio for this video tutorials its really brings me to excitement and go back on web development again its really good content and easy to understand God Bless you and more power - Keep On Progress Not Perfection.
You're very welcome!
Thank you!
Welcome!
good style.good learning
Thank you!
Greetings from Turkey. A great educator, I came across it by accident. the world is too small.✌
Hello 👋 to Turkey! Glad you found my channel!
you are best teacher for code
Humbled by your kind words - thank you! 🙏
thank you again
You're welcome again, too 🙏💯
THX
finished the HTML course and I'm speechless!
Thank you! 🙏 This CSS course is still being created. I add to it each week.
@@DaveGrayTeachesCode that's absolutely wonderful!
The HTML course was extremely easy to understand and after 36 hours, I can say I've learnt more on CZcams than I have in my uni classes😂😂
I hope to finish this too and even more courses in the future.
Hellow Dave, Thanks for new turtorial. I want to say that i know some easy topics of css, but when i doing my website it seems sooo poor! Will it be a profi css effect turtorial in your chanel?
There is a lot to CSS. I plan to cover all of the foundational knowledge. From there, students should continue on to learn more advanced topics.
@DaveGray Thank you
You're welcome, Vic!
Hey, great series :) What screens splitting app are you using in these videos?
Windows PowerToys - a free download for Windows from Microsoft. One feature is called "Fancy Zones" that I use to do this.
@@DaveGrayTeachesCode Thank you so much Dave :)
For each video, that I watch I will comment in order to say thank you
when i create a document i don't have the editor option to add pages and files, anyone know why?
Thank you Jaya ma'am for sharing this video in our class group
Myself Ishpreet Singh Bhatia Class-10D
Worked my way through the HTML course so it's time to move on to CSS. After that, probably JavaScript, and then tie it all together.
Good job!
Hi Dave Thank you to provide awesome flex tutorial, I've a point, I want in flex just shrink or expand boxes when screen size changes respectively . If i have two boxes then it must shrink or expand in flex container not break in one-one column. How can I use this strategy. I want to use this strategy for different screen sizes of only desktop screens not for mobile and tablet.
Expecting positive response.
I'm not sure if I understand your question correctly, but it sounds like you need to set flex-grow on the boxes you want to expand. developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
@@DaveGrayTeachesCode Yes you got my approach and thank you for your response Dave. tell me one thing up till now we learnt flex properties on elements which are in div .
How can we implement flex shrink and flex-grow on text element. I am able to implement properties of flex-shrink and and flex-grow on circle box or div but how is it possible to shrink or grow font size of text.
Let me explain plz , always text size or size should be increase or decrease as we increase or decrease the screen size.
Very Good
Thank you, Eugene! 💯
Hello Good Morning. With your explanations it is to understand
Easy to understand
I think I regret not watching your tutorial, instead I watched other tutorial which didn’t have a clear path
sir i've learned html from your HTML Course and it helped ,me a lot! THANK YOU SO MUCH for that ❤❤. now i have a one huge problem in, "HOW and WHETHER TO use div tag or not :(", Because trying making a big project, everyone is using div tag rather than using "meaningful semantics tags"(as you teaches us). Please tell me how to learn it or make a video on it .
You can review the Semantic HTML lesson in the HTML course. Overall, if a semantic tag exists that fits what I am creating, that is what I use. If it does not seem like a good fit, it is still ok to use a div. You are correct that the div element is used too often, but it is still a valid element when needed.
@@DaveGrayTeachesCode i got the semantics lesson very well. But as i said, after reviewing the other projects, they use div very often so it confuses me alot in whether to use div or semantics elements.
Maybe it worth mentioning that browsers apply their own css rules to html elements by default which make a page without custom css to look,
Also a quick look into Chrome dev tools/styles tab will show you what rules are overwritten by another (crossed) and invalid rules (crossed with exclamation mark),
Learning the fundamentals is the best way to get started even if it takes longer.
Thanks Dave,
You are correct my friend! 🙏 This series will eventually get to CSS resets and browser defaults for sure. And absolutely on dev tools, too. Dev tools will (and should) be consistently referenced when working with CSS. As always, I hope you are doing well. 💯
@@DaveGrayTeachesCode I'm sure you'll do that, but I just wanted to contribute in some way,
with all the craziness we're going through here but my brain still working (in low power mode), I think🤔
Thanks for asking my friend
I have a problem, i am working with react and trying to make my website better. I am stealing a code for some structures like (buttons, cards, icons) but it is written on html css and sometimes dosent work on react. For example in html i have input=[type"checkbox"] in css it have added :checked but it dosent work in react.
I have tried to use useState but it didnt help.
So i just made a hover effect not cheked.
Also a have span colum with word and it have span style=--i:1; and span style=--i:2 etc... but i cant give such styles in react and how to solve this problem i dont know.
I am not writing to wait for your help. Just helping to inprove your chanel.
React has its own rules for many things. You cannot take HTML and put it inside React's JSX. There are differences. Work through a React tutorial for Beginners like the one on my channel. It has two projects that include JSX and CSS.
@@DaveGrayTeachesCode thanks
tyty
Welcome!
Does Python use European English? Python was created by someone from Europe and Europeans learn European English, not American English like they learn in south America etc. Or was Python created to cater to the US market? 🤷 Anyway, these tutorials are put together really well! I just subscribed