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

How do I connect my CSS stylesheet to my HTML page?

742 ratings | 155088 views
http://courses.robobunnyattack.com/courses/step-by-step-html-and-css-for-absolute-beginners How do I connect a CSS stylesheet to an HTML webpage? In this lesson, you'll learn: - The reason we have separate HTML and CSS files - The purpose of HTML vs the purpose of CSS - Why it's good to keep content (HTML) separate from presentation (CSS) By the end of this lesson you'll know how to code: 1. The LINK tag (to connect an external CSS stylesheet to your webpage) 2. The REL and TYPE attributes (to describe the CSS stylesheet) 3. The HREF attribute (to specify where to find the CSS stylesheet) ***** This is a sample lesson from the online course "Step-by-step HTML and CSS for Absolute Beginners". Learn how to code HTML5 + CSS3 to create your own website in this beginner-level course. No coding experience required! Enroll today at: http://courses.robobunnyattack.com/courses/step-by-step-html-and-css-for-absolute-beginners Looking for friendly, practical, jargon-free technology training? Visit my website at: http://learn.robobunnyattack.com Thanks for watching! - Kathleen, [email protected] PS Thanks to Reverse Grip for letting me use "Raise Your Fist" as the intro/outro music for this video. You ROCK!! http://reversegriprock.com
Html code for embedding videos on your blog
Text Comments (127)
Maquis American (4 days ago)
made it to 7:45.. can't do it
Maquis American (4 days ago)
Fast forward to 4:45 if you want to save 4 minutes and 45 seconds
Owais Baig (1 month ago)
i want to ask you that if we link css in html on css coding where we have to do ? in html or css tab ,,,because i am new in this
great tutorial, appreciate your details
Joe Williams (2 months ago)
Excellent. There should be no down-votes on this, WTF is wrong with people?
Arpita Singh (3 months ago)
the work of 2 mins literally done in 10 mins with the unnecessary talks, at best it coulda take 5 mins but ugh
ASGARDIAN_THUNDER (3 months ago)
You seriously saved my bacon, you explain it better than my professor does
rsps ahmed (3 months ago)
omggg ty soo much I'm late though here is my index.html<!DOCTYPE html> <html> <head> <title>CCS Layouts</title> <link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> <header> <nav> <h1>My page</h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Links</a></li> </ul> </nav> </header> <div class="row"> <div class="col">col1</div> <div class="col">col2</div> <div class="col">col3</div> </div> <footer>2018 My site</footer> </body> </html>
Emre YILMAZ (4 months ago)
700th like thx
Alicia Frudakis (4 months ago)
I was stuck on getting my CSS to work because I had "ref" instead of "rel"... I thought I was going crazy haha (or maybe blind).
Mervin Chen (4 months ago)
Skip to 6:15 to see how she link...
Caprice Pittman (2 months ago)
zeina berro (4 months ago)
thank you. it is really informative
Chizuru (6 months ago)
Thnaks ur the best! <3
Adam (9 months ago)
thanks mami
Alvin K. (10 months ago)
Very comprehensive explanation thanks!!!!
Philip (11 months ago)
You just saved my Computer xD If it didnt work i was going to break it for sure.
Akhil Vallala (1 year ago)
I liked your explanation.
WillyTech (1 year ago)
MADNIK 45 (1 year ago)
<div id="thankmsj"> <h1>Thx</h1> </div>
MADNIK 45 (1 year ago)
This lady new about the plus re-venew before it even existed
Avery Middlebrook (1 year ago)
who the fuck codes with a mac
Catherine Karena (1 year ago)
Very long winded, the point could of been made in 1-2 minutes
celil Ahmad (1 year ago)
stop talking and show me the code
Prince Charles (1 year ago)
Thanks, very helpful but I think you should change the name of this video to How do I connect my CSS stylesheet to my HTML page for beginners. I think you over explained a lot of unnecessary functionalities for those who already has a grasp on how to build a website, I came here for a refresher. But thanks all the same.
greenlantern129 (1 year ago)
is the extra enthusiasm really needed? you traded enthusiasm for actual learning great job oh and you have an unneeded hypen at the end
Emmanuel Alex (1 year ago)
thank you, I did it
Keith Nitro (1 year ago)
I am unable to get my html file to link to my css please someone help! Both HTML and CSS files are in the same folder. \\ HTML TEXT <head> <title> Raspi Hosting </title <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"> <div id="header"> <h1>Raspi Hosting</h1> </div> <div id="content"> <div id="nav"> <h3>Navigation</h3> <ul> <li>Home</li> <li>Contact</li> <li>About</li> </div> <div id="main"> <h2>Home Page</h2> <p> This website is currenlty under construction. Some features may not be working/complete.</p> <p> Thanks! </p> </div> </div> <div id="footer"> Copyright &copy; 2017 Keith Szymczyk </div> </div> </body> // CSS TEXT #header { color: Red; }
Dillon Johnson (1 year ago)
I just need an answer, not a whole video of someone talking.
Jimbeem79 Jimbeem79 (1 year ago)
i would you like to say thank you your video was very helpful. have a nice day
Chris (1 year ago)
Thank you
Abhigyan Bhowmick (1 year ago)
I was just rolling on the ground when she said "pain in the rear". 😂😂😂
Niv (1 year ago)
The video could've been 4 minutes long if you would just go straight to the point instead of fighting to make it 10 minutes long.
bikash khadka (1 year ago)
thank you @Robobunnyattack!
yuvraj singh (1 year ago)
that was not right
benedict boh (1 year ago)
This really helped, much thanks! Made my weekend worth more
EEEWorks (1 year ago)
Great ! You solved my problem Rob ... so proud of you
Re-Animator (1 year ago)
Reading some comments and you just can't help people can you! just a huge thanks for the video hun. Great tutorial well put together for people just getting to know the basics...Thanks again. I've sub so please keep it coming...J...Liverpool UK
Hassan Ali (1 year ago)
worst tutorial ever so much wasting of time
Kay (2 years ago)
nice tutorial but you talk so much
STYLISHTEE (2 years ago)
Great job! Thanks.
Mike (2 years ago)
I just want the actual code thanks
jar (2 years ago)
good job
Glory Fk (2 years ago)
can u gimme links to the youtube,fb,twitter icons ??? and also the dark red and bright red or whateve that color is its name
Dan Mac (2 years ago)
6 mins in and you finally start writing the code, for fuck sake get on with it!!!
ELITE bP (2 years ago)
You want to know how to do this go to bootstrap. This video is hear to explain what to do but at the same time explaining what is going on. This is a big help for beginners like my self. Sorry you don't like it.
Titch Gaming (2 years ago)
you really helped me out, thank you
Marven Wilson S Donque (2 years ago)
I lost it when she said it pain in the rear... lol
Glory Fk (2 years ago)
<autocorrect style="margin-top:4px; margin-left:30px; font-family:roboto, sans serif;> big pain in the rear...loololol</autocorrect>
sydney sibanda (2 years ago)
thanks for good tuts, perfectly explained..
EMIN3M EMIN3M (2 years ago)
:) to much talking just for a line , but thumbs up
jonvic Mamon (2 years ago)
Your Style of teaching is amazing very easy to learn and follow
TylerTheCreator (2 years ago)
Thank you so much! I was watching another tutorial and the way they did it was completely different and didnt work for me. You just earned yourself a sub and a like full of love.
Priya Saha (2 years ago)
wow Mam u r so good
jaka runi (2 years ago)
very good my teacher should be like you :) nice explanation .
Moz'ART Designs (2 years ago)
Hi Kathleen. Great video! I have a question. I am doing an online course on Udemy on Web Development and I am also minoring in Web Design in college. In the Udemy course, the instructor has created an "index.html" file for the CSS instead of a "style.css" which I've read on different forums is a no-no. I am going to watch the entire section on CSS before I make judgement and ask him but we are only working on individual web pages for projects and not multiple website pages at once so is that why you think he is not creating a separate .css file for the CSS? The Udemy instructor had taught himself web development and everything is going well so far (I created my first web page with basic HTML, which you can view here: http://sites.codeschool.org.uk/?site=nimm21). I am a beginner with code so I just want to make sure I am not being taught the wrong things. Here is a link to the course where you can see the course content if you'd like: https://www.udemy.com/complete-web-developer-course/ (Scroll down to curriculum if you're just interested in that). I know this is an old video so hopefully you'll answer. Thanks!
Kardel Sumail (2 years ago)
Your Voice is so pretty :)
Anthony Skittles (3 years ago)
Thanks this helped a ton!
PRANAIKUMAR K (3 years ago)
thank you for the video
UnAnimus (3 years ago)
Me like the way you talk. Very easy to follow along and very friendly! A+ tutorial, me subscribe now.
Mandogy - Games (3 years ago)
Thank you, I am making my first website and when I change a background I hate going to every single page and editing
zakarya hamdaoui (3 years ago)
where is the next video ???
Anish Alwekar (3 years ago)
Nice tut but its not working for me tough .I  have html and css files and when I link as you say using href it doesn't work...!!!
Anish Alwekar (3 years ago)
Sorry Kathleen my bad,i did not include type="text/css"....thank you very much.Your voice is amazing....!!!
wanjohi mugo (3 years ago)
good tutorial was actually looking for the follow up video showing how you created the css wish you had made one ....
Crystal Clear (3 years ago)
thanks this helped me understand thanks
james mcwilliams (3 years ago)
Not only did this help me out it taught me more. Subscribed.
MrFriedgreentomatos (3 years ago)
Hi this video shows the forward slash closing tag being out in at the end, another previous video does not include this closing-forward slash - which is it?
vu nguyen (3 years ago)
Thanks for helping, you've just gained another sub :)
Roger Micheal (3 years ago)
<h1>You are <em>Amazing!!!</em></h1> Thank you hahaha!!
Josh Kim (3 years ago)
+Kathleen Farley (Robobunnyattack) Good tutorial, except I made the html and the css files but my html file just shows plain text. How do I load the contents of the css onto the html site?
osvaldo (3 years ago)
oh my gosh , thank you, all i was missing was saving the css in the same folder i am so excited .
darky snoow (3 years ago)
Dushyantha Vithanage (3 years ago)
Thank You , Its Really help me to understand CSS and HTML linking part Thank you Again :D
T K (3 years ago)
thank you.
Jason Wyrostek (3 years ago)
Thank you so much.This is very helpful
Jamie Quayson (3 years ago)
Thank you was very helpful but you talk too much.
Leticia Nava (1 month ago)
+Luna Lo peta Did you even read the comment? They meant... "Thank you, it was... etc."
rsps ahmed (3 months ago)
you learn how to spell how l0l
Luna Lo peta (1 year ago)
James Quayson please learn hoy to write it is You were not was Stupid 🤓
+James Quayson would you rather her just do the whole thing without talking?
Tricia Knapp (3 years ago)
Thank you so much for posting this. You made it so simple and easy to understand. I spent considerable time trying to link the html file to the ccc folder and with your tutorial I did it in two minutes. Much appreciate it.
真喜志 (4 years ago)
This is what i really wanted to know.
Kent Waxman (4 years ago)
Thank you so much! My website is now working thanks to you!
Joel B (4 years ago)
thanks you. great tutorial
Ted Hoffman (4 years ago)
Thank you.
Bishop Toci (4 years ago)
Using notepad ++ and this still doesn't work I've watched about 10 videos now on how to link the two pages and it just won't work for me.  I'm just not sure what I'm doing wrong.
Akshana Dassanaike (4 years ago)
Me too, have you found a way?
K. ToTi (4 years ago)
great video but when i go into my css file and i try to use hashtag "#" to get to an id the id does not come up do you know why?
K. ToTi (4 years ago)
lol yh thanks i managed to find out the hard way.
K. ToTi (4 years ago)
<title>marry me!!!</title>
Shizzy4all (4 years ago)
Thanks a ton for the help!
FZ (4 years ago)
I could kiss you right now Kathleen! GREAT Tutorial! 
Don Cooper Products (4 years ago)
Awesome tutorial!  Very easy to understand!  I'm very new at learning how all this works and I'm trying to improve the speed of my website, DonCooperProducts.com.  Thank you for your help!
Jay Cheetah (4 years ago)
Very nice tutorial, but not exactly what I was looking for. I am currently working on my resume in HTML5 with a stylesheet, which works well when I open it on my own pc. Whenever I mail my HTML file to someone, they'll see the resume, but without styling. Now I was wondering how <link> works when a user does not have access to my local files. I hope I explained my problem well enough.
Asif khan (4 years ago)
Dear mom, it's not working !  html workable ! but css don't ! my page background-color is: white; although, i called him > black <  why !!!  plz help me >browser problem ?? (I'm using "fire fox" & "google chrome" ! >and using wordpad++ !!   
xXBlockRaiderXx (4 years ago)
omg im on windows with notepad++ and this still doesent work
Sourian Cyros (4 years ago)
Your voice makes me sleepy :P
lilmissanimated (4 years ago)
+Kathleen Farley I say its a good thing cause its relaxing xD
Sourian Cyros (4 years ago)
+Kathleen Farley I dunno
Matt Rezac (4 years ago)
Well done. You have the abilities of a true teacher.
Salif Keia (4 years ago)
Thank you that was helpful :)
Desmond Turner (4 years ago)
Whenever I try using a wordpad document it opens, but doesnt' connect the css. Whenever I try doing the same thing with microsoft word, it downloads the document instead of putting it in the browser or whatever. I tried naming the files html and htm, nothing seems to work! help?
Sean Rataiczak (4 years ago)
+Sunil Yadav um i did what you said because i have the same problem. i have the style.css file in the same folder as my index.html but the html doesnt connect to it. i have double and triple checked the <link> tag but it still wont work
Sunil Yadav (4 years ago)
welcum! good luck!
Desmond Turner (4 years ago)
yes it did work, ty
Sunil Yadav (4 years ago)
tell me if that works!
Desmond Turner (4 years ago)
okay ill try that, thanks :)
AppleDeLoop (4 years ago)
Helped me  Thanks!
BACTV99 (5 years ago)
Hey it's bactv99 I contacted you on your website could you send the info to [email protected] gmail(dot) com
BACTV99 (5 years ago)
Hey it's bactv99 I contacted you on your website could you send the info to [email protected] gmail(dot) com
BACTV99 (5 years ago)
my css link doesn't seem to work I have coded the css but it isn't changing color
James Bond (4 years ago)
+Kathleen Farley you are very nice lady for helping people. thank u
gonzalo santiago (5 years ago)
Thank you for your tutorial, I am new to dreamweaver and am in intro webdesign course, I haven't been able to resolve my issue, if you can guide me in the right direction. I have made a stylesheet which is link and uploads in the browser, but when I compress the file to a zip format I lose my styles just the html structure is there. It uploads fine in many browsers before I compress the file to a zip folder. I appreciate any assistance you can give.
Darkstarr252 (5 years ago)
What is the next step after this one. I would like to see how and what you put in yout styleSheet.css to add/make your html page look like your css page.
Antonia Shanahan (5 years ago)
Hi - You saved my life with your work in a summer web class I took. THANK YOU! Then we got to WordPress & you started adding WP help! I couldn't believe the timing. Thanks again. Excellent.
White Howling (5 years ago)
You are awesome.
Neil Thaddeus Seno (5 years ago)
you wake up with something after that you know that you did have accomplished different CSS differs compare to responsibility, relationship or talent. Knowing CSS put your life in style together with your designs which you accomplish through customizing your Web Design skills. And learning CSS is a must to learn first and integrate yourself with basics through gradually progressing with new syntaxes to have your originality or styles.
Archzed (5 years ago)
thank you thank you thank you thank youuuu :) :) reeeally great tutorial you just saved my horrable day . you have a great way of teaching , and i like that you explain every word you type :) now i started to like programming thanks

Would you like to comment?

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