HomeОбразованиеRelated VideosMore From: EJ Media

CSS Tutorial for Beginners - 10 - Using an external style sheet

822 ratings | 212728 views
In this video we take a look at the external style sheet.
Html code for embedding videos on your blog
Text Comments (97)
soundous bouzegza (1 month ago)
Linking the 2 didn't work at first, then I noticed that I kept reloading the same page, which had the old path in the URL. So I closed the file and reopened it and ta-daaa, it worked :)
Masad Allick (3 months ago)
please could you help me on drop down sub menus, pliz
Anushka Goyal (4 months ago)
I m not getting that another file of css. What to do?
mandeep singh (5 months ago)
its not working help pls
KARTHICKRAJA M (5 months ago)
SOURCE CODE ============== index.html ------------------ <!DOCTYPE html> <html> <head> <title>Fish</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> </head> <body> <h1>The Fish Webiste</h1> <p class="blue">Welcome to the Fish Website.Everything you want to now about fish is in this website</p> <h2>This is a section on Bass fish</h2> <p class="purple">bass fish lives in lake <blockquote class="blue">This is an Indent</blockquote></p> </body> </html> stylesheet.css ------------------------- body { color: green; /*Inheriting color property value to childe elements <h1>,<h2>,<p>*/ font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; font-weight: normal; } h1,h2 { border-bottom:1px solid black; } .blue { color:blue; /*Inheritance Overriding color property value to <p> */ font-size:25px; } p.purple{ color:purple; /*Inheritance Overriding color property value to <p> */ font-size:25px; }
dhanraj parmar (6 months ago)
in <link> tag "rel" means?
Ankose (6 months ago)
It was verry helpfull. Thanks a lot,
Waisullah Yousofi (9 months ago)
Tanks a lot.❤
Ben Sufiany (9 months ago)
<link rel="stylesheet"href="my sheet name.Css">
Syed Masood (10 months ago)
i love you! you saved my life
amanda Muniz (10 months ago)
If its not working make sure you didn't forget to put /* CSS Document */ at the top of the stylesheet page. That turned out to be my mistake!
Sania Anjum (10 months ago)
when i m using my file name as stylesheet for external stylesheet it give the required output..but when the file name is changed to sheetstyle or any other name instead of stylesheet it doesn't show the required output..can anyone plzz explain.
Ritesh Mohanty (10 months ago)
where from the <link................> come......m unable to do that
kuku swuro (10 months ago)
For those having a problem with executing the css external code, even though it looks exactly the same. It may be that you are using a shortcut file and the original file may be somewhere else in another folder. ( that was my problem and it took me about an hour to find it:-)) hope it helped.
Latoya Clarke (10 months ago)
That was my exact issue also
Zsiggy (11 months ago)
<p> love ur vids. easy to follow and well set out </p>
klas h (6 months ago)
<!DOCTYPE html> <html> <head> </head> <body> <p>love ur vids. easy to follow and well set out</p> </body> </html>
Khalilur Rahman (11 months ago)
For the first time I've learned about external style sheet that's pretty easy understanding for me. Thanks. :)
piano tutorials (1 year ago)
I could understand this ...thank you so much
Born to Html (11 months ago)
Multiple Mayhem (1 year ago)
What did I do wrong <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <h1> The Fish Web Site </h1> <p class="orange underline"> Welcome to the Fish Web Site. Everything you want to know about fish is in this web site. </p> <h2> This is a section on Bass fish </h2> <p class= "coral"> Bass fish live in lakes. </p> <blockquote class="orange underline"> This is an ident </blockquote> </body> </html>
Z0MB13 HUMAN (1 year ago)
index and stylesheet that doesn't work I tried what shall I do teacher
ganesh chiram (1 year ago)
even though i named it as index it is showing index.html and web page is looking blank.
Ana G (1 year ago)
These series are amazing!! Thank you so much for the effort you put in making them. I am learning so much. Really unpayable.
Antonieta Ibanez (1 year ago)
Great explanation.
hari haran (1 year ago)
can you help me...i tried working with ref link....still i couldn't fix it
zeronecool (1 year ago)
As a programmer, I watch these at 1.5speed and its such a perfect speed for quick learning
Appelpeer15 (13 days ago)
+Ryan As a woman, I watch these in the kitchen.
dc5trust (2 months ago)
As an idiot, I watch at 0.25 X speeds. Gotta get every subtle detail.
Jacob Davis (2 months ago)
As a Chicken I watch this at 143.5x speed.
Rainbow Paws (5 months ago)
As an athiest, i watch them at 5x speed
Kodegems (5 months ago)
hahha thumbs up. made my day :D
Darshan modi (1 year ago)
type=tex/c.. is optional attribute
Kelsey W (1 year ago)
Like others, I can't seem to get index.html to find stylesheet.css, even though they are both in the same folder. I've triple-checked for typos and can find none, and have also tried the full path. I've also tried replacing href with src, source src, and a href. All to no avail. Help? <link rel="stylesheet" type="index/css" href="stylesheet.css">
Madz Bautista (7 months ago)
Vibhinn Singhal (7 months ago)
The correct syntax is <link rel="stylesheet" type="text/css" href="YOUR DOCUMENT NAME.css"> Type stylesheet in the link rel attribute. I comitted error in the same.
Marko Janjic (11 months ago)
The solution is that you should save the html file as "all files" instead of "text documents".
Born to Html (11 months ago)
Prakash Saini (1 year ago)
Well I got it fixed. You have to make sure that you should del. <style> tag. And change its 'encoding' to the one with which you have saved .html file It's really working (well I changed encoding to uni code of all my pages )
Karan Orha (2 years ago)
unable to link to css file css and html, both files are in same folder this code is in html file <head> <title> IDEAL FIRE </title> <link rel="idealstyle" type="css" href="idealstyle.css"> </head> and this in css file body{ color:red; font-family: verdana; font-weight:normal; } please help
Karan Orha (2 years ago)
okay i got my mistake rel="stylesheet" dont reply for this and thank you so much for tutorial
densel opulencia (2 years ago)
I have a serious problem... My code is exactly like yours in linking the css file.. but when I open the html it is not linking, the html is in default style. The css and html is in the same folder in the desktop. I also tried the full path but didnt help. Im using Windows 10 and Notepad++
Sadat (2 years ago)
Close running tab,and run index again
Chamil Sarajith (2 years ago)
thank you , good work
Honey Gelato (2 years ago)
Melissa Sobolik (2 years ago)
Thank God for you!!!!! :) Thanks for sharing!!!
EJ Media (2 years ago)
Always glad to be of help :)
Pika 10 (2 years ago)
This Is Very Helpful :)
Born to Html (11 months ago)
张宇 (2 years ago)
excellent tutotial,alough i don't totally understand,because my english is not very well,i have learn the css in chinese version,赞一个
Lorisel Relos (2 years ago)
thank you
EJ Media (2 years ago)
+Lorisel Relos You're very welcome
QuickScopes2009 (2 years ago)
I'm having hard time linking the css sheet to the html when i use: <link rel="stylesheet" type="text/css" href=""> but it always connect when i take out, type="text/css" I am using Sublime text 2, is that why?
QuickScopes2009 (2 years ago)
Yes i did put in my css page. Not sure what I'm missing.
EJ Media (2 years ago)
+QuickScopes2009 I don't see anything in for href - did you put something in href parameter?
CLARIAN KEN (3 years ago)
we're given assignment to create a website with at least 20 pages... so is it better to use this external css??
A.S.M. Morshed (3 years ago)
+clarian KEN
EJ Media (3 years ago)
+CLARIAN KEN For sure you can reference as many as you want - in fact the larger web sites do just that
CLARIAN KEN (3 years ago)
+EJ Media is it possible to use 2 or more external css in one html??
CLARIAN KEN (3 years ago)
+EJ Media thanks for advice. still watching the videos :)
EJ Media (3 years ago)
Janis Brooks (3 years ago)
I just sent u a message with my email address.
Janis Brooks (3 years ago)
I am taking an HTML class, and did exactly as you instructed along with having checked with it in the book several times... I even checked the css page with the http://jigsaw.w3.org/css-validator site and it showed fine. It will not work. I am so frustrated. Its an older browser where I am. maybe thats why?
cory balkman (2 years ago)
+Janis Brooks I know this is really late but for any comment lookers who have this problem here is something I did when I had the same problem: Typically I checked everything too and it was all correct but nothing was changing. Now this is most likely because your rel= class does not say rel="stylesheet" I found out that this NEEDS to say stylesheet in order for it to work. in the href= it should be href="example.css" example being the name of your css. If this does not work too make sure your files are saved as the proper extensions and your save paths for those files connect to the file in your website folder.
YuriDSC (3 years ago)
+EJ Media Did you 2 figured it out I'm having the same problem.
EJ Media (3 years ago)
+Janis Brooks Is it possible you can send me all your files?
Kangeman Maipmokiuah (3 years ago)
i start with backy from zero but i see how people create website hehehhehe.  OMG  its not too hard. thanks bro. needing may helps. i will try and complete this videos with 4 days and try website for my own ,,,many thanks
Richard Wheeler (3 years ago)
Ah! THIS lesson answers one of my biggest questions. Thank you. Since I've been around since the days of PC-DOS, I get really nervous seeing filenames with their extensions hidden. I think it would be instructive for beginners to see the .css or .html at the end of the filename.
Richard Wheeler (3 years ago)
+EJ Media In Windows 7, click *Start* > *Folder Options* > *View* tab. Then uncheck the box for *Hide extensions for known file types*.
EJ Media (3 years ago)
+Richard Wheeler I wish by default those extensions were shown to be honest - I hate that you have to hit properties or format the columns
Ahmad shofiq (3 years ago)
helpfull tutorial, thanks .
Dineth Nimantha (3 years ago)
Deathium (4 years ago)
Is there a way to put comments in your stylesheet.css ?
A.S.M. Morshed (3 years ago)
Dayvid N (3 years ago)
+Richard Wheeler whatever is in between /* */ will not render out where people will see. No end tag unless you count this that last part */
Richard Wheeler (3 years ago)
+EJ Media Are you saying that it comments out the whole line, and no end tag is needed?
EJ Media (4 years ago)
+Tammy Jolly // is just a way to make a note but it wont be read by the computer as code
Tammy Jolly (4 years ago)
+EJ Media I am not sure what // means.  Remember, I am very computer illiterate.

Would you like to comment?

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