HomeХобби и стильRelated VideosMore From: EJ Media

CSS Tutorial for Beginners - 02 - Changing font type, color, and size

1351 ratings | 403942 views
In this video we go over changing the font type, size, and color. Source for episode: http://pastebin.com/RVK07MrM
Html code for embedding videos on your blog
Text Comments (131)
Son of Light (20 days ago)
GUYS LETS GO AHEAD
LemonGuy (22 days ago)
i <3 montserrat font
hemant Sheoran (23 days ago)
Sir If i want to style a particular paragraph then how it will be done..
Elder wolf (26 days ago)
what about chrome and sublime?
Christocream (2 months ago)
very helpful, Thank you
2lovely85 (3 months ago)
What if you just wanted to change the size of only one of the <p> ...How would you code that so it doesn't change all of them??
Kinza Malik (4 months ago)
Css Button Design https://youtu.be/JrbPQSZ_EK0
sanket kamble (5 months ago)
Just save and refresh dude...wtf
PAK Social Media (5 months ago)
sir you are my great teacher i have another, i want you to build a complete website tutorial so in this case we can get more advanced idea
NoSkillz (5 months ago)
thx soo much ur saving my carrier
KARTHICKRAJA M (6 months ago)
SOURCE CODE =============== index.html -------------------- <!DOCTYPE html> <html> <head> <title>Fish</title> <style type="text/css"> h1 { background-color:purple; } p { color:red; font-size:25px; font-family:Arial, Helvetica, sans-serif; } </style> </head> <body> <h1>The Fish Webiste</h1> <p>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>bass fish lives in lake</p> </body> </html>
Monde Scott (6 months ago)
I thought if we gonna change the color we need put color code (#00001) instead of just color name like purple or something
H R DEVOLOPMENT (8 months ago)
but how to import google fonts to this.??
susan oikelomen (8 months ago)
thank you ur so straight to the point im suscribing
FlinTz Tv (8 months ago)
question what to put if you just want to change one <p> because in this video you change two <p>
FlinTz Tv (8 months ago)
dont mind this ai lready figured it out in the future video haha ,
Abubakar Naseer (9 months ago)
thanks vry nic
drew erving (10 months ago)
Excellent video. Thank you.
Ben Sufiany (10 months ago)
Nice
Lesley Batman Wayne (10 months ago)
this is the easiest subject in the history of EVER
Kalamata Info (10 months ago)
Hi...Thanks Really very nice great place to learn css for beginner....
Ritesh Mohanty (10 months ago)
sir what is helvetica..... what does it mean.....can i do other thing
EJ Media (10 months ago)
Helvetica is just the font: https://en.wikipedia.org/wiki/Helvetica You can use any font you would like.
Khalilur Rahman (11 months ago)
It's amazingly easier explain to be understood as a beginner in CSS. Thanks. :)
benekaiwi1 (1 year ago)
Great tutorial. Mahalo
Gavin Guitar (1 year ago)
How do I make it so a paragraph can get an id or name so if I do something like *name of thing I want to change individually* { Color:white; Background-black; Text-align:center; } ?
Rainbow Paws (5 months ago)
Im no expert but i think <p style= Color: white; backround-black; Text-align: center;> will probably do it
Rainbow Paws (5 months ago)
Gavin // TFI Try putting the code in it individually
cat luva (1 year ago)
If I wanted to change a color would I be able to type in the hex code for the particular shade of the desired color?
Bitania Solomon (10 months ago)
cat luva Yes. Just answering for anyone else wondering the same. You probably figured it out by now.
Punitha Joseph (1 year ago)
my coding is not working:( <!doctype html> <html> <head> <style> h1 { background-colour: blue; } p { background colour: green; font-size:25px font-family:Helvetica; } </style> </head> <body> <h1> Our Earth's contains, oceans,desert</h1> <table> <tr> <th> The Contry </th> <th> The Oceans </th> <th> The Deserts </th> </tr> <tr> <td> India </td> <td> Pacific </td> <td> Sahara </td> </tr> <tr> <td> U.S.A </td> <td> Atlatic </td> <td> Gobi </td> </tr> </table> <p> To know more click this link <a href="https://en.wikipedia.org/wiki/Solar_System/"> wikipedia </a> </body> </html>
Punitha Joseph After "font-size : 25px" put ";"
Tom Mowlam (10 months ago)
US vs UK spelling of color/colour?
Jairel Marual (1 year ago)
Punitha Joseph try putting spaces ~~font-family: Helvetica;~~ instead of ~font-family:Helvetica;~~
Joe Jun (1 year ago)
Thanks nice video, you sound just like Jake Tapper.
Ajerico Julian (1 year ago)
wow
hadi reg (1 year ago)
Excellent tutorial!! Thanks!
Flaming Squirrel (1 year ago)
If i do this on mozilla thimble do i erase the whole font thing on style.css?
sara hf (1 year ago)
I'm writing the CSS code correctly put it's not working when I open the browser :( only HTML changes are working PS. I'm using notepad++
Rainbow Paws (5 months ago)
sara hf Post code?
PHP CODER (1 year ago)
can u make css animation tutotial?
Battleside (1 year ago)
Does any kind of font work with font-family?
Requirements Wizard (1 year ago)
Hi, Thanks for making this. Do you teach HTML/CSS?
Requirements Wizard (1 year ago)
EJ Media hi. Is there a number I can reach u???
EJ Media (1 year ago)
i work with it all the time
Harshada Khandagale (1 year ago)
Thanku! u are really a good teacher. ur videos helped me and my friends to learn html and css
Kazem Jalabi (1 year ago)
hello wat If I wanted to make a background-color to the first and not to the second pls answer
Otrion (10 months ago)
Or a class
Darton McIntire (1 year ago)
Kazem Jalabi You would have to use a div element or an ID tag
Smile Ismail (1 year ago)
you are genius sir
Lesley Batman Wayne (10 months ago)
so easy omg
MacMarc (1 year ago)
0:56 "When you put pee in here - and just pee - we're gonna alter everything."
MacMarc (1 year ago)
Nah it makes perfect sense when put in context
EJ Media (1 year ago)
Oh no did I do something wrong?
Espaxium (1 year ago)
Changing font type? *nah, I dont need this* *-lol get rekt skrub-*
fahad alhagbani (2 years ago)
Thank you sir. Useful and entertaining tutorials.
Ariel JJ (2 years ago)
Quick question: when you learn how to code and create a website yourself, does that mean that you no longer have to pay websites like Wix and godaddy for a domain name and website hosting?
EJ Media (2 years ago)
At a minimum you need a domain name .. but you can host the website yourself if you want to
Ariel JJ (2 years ago)
+EJ Media oh, I see. So you'll need a domain name, but not a host?
EJ Media (2 years ago)
You still need to upload the files to a service like godaddy
Mamunur Rashid (2 years ago)
Thank you...
FireRize (2 years ago)
I have a problem at 2:31.When i wrote color: red; it only color's the first paragraph
achal jain (1 year ago)
i am having the same prob
FireRize (2 years ago)
+EJ Media It doesn't matter.I made it.But thank you for the support.
EJ Media (2 years ago)
i can send you my code - what is email?
Anthony Green (2 years ago)
nice logo lol
EJ Media (2 years ago)
thank you sir
tatjana1707 (2 years ago)
I am currently attending some web design classes and some things weren't clear to me, but your explanation is simply perfect. You make it all so easy... Excellent job, I will subscribe! :)
Rainbow Paws (5 months ago)
EJ Media and the best thing is.. all we pay you is viewership of the ads you put on
EJ Media (2 years ago)
+tatjana1707 Glad to be of help :)
BSAsnipes (2 years ago)
i thought this was counter strike source :(
Allen Farias (22 days ago)
You are in the wrong side
Allen Farias (22 days ago)
Lol
Zach Shult (4 months ago)
The same advice still applies
happymurder 3002 (7 months ago)
Haha same
sebas r (1 year ago)
I was like wait, what...? and then I couldn't stop laughing hahaha
Lynn Bartlett (2 years ago)
I am attempting to create my own webpage and your videos have helped immensely. What I am struggling with is... my website essentially has a encyclopedia in it. In some of the headers (h4) it says "A (see B)" for example. I want it to be all in one line but the first part - "A" using h4 and the second part "(see B)" being a smaller font. Is that something you can help with or direct me to another video or ? Thanks for your help. Your videos have really saved me.
Lynn Bartlett (2 years ago)
Perfect - thanks so much.
EJ Media (2 years ago)
+Lynn Bartlett I think this link might be what you are looking for: http://stackoverflow.com/questions/14096292/how-to-have-two-headings-on-the-same-line-in-html
DONTSA (2 years ago)
Waou that is awesome
tensol promotional (2 years ago)
thanks
WALKING DEAD (2 years ago)
what happens if you use html comment tags <!-- --> in css instead of css comment tag /* */ ? because somethign really retarded happened my code stopped responding i wanted to die lol
EJ Media (2 years ago)
+WALKING DEAD Never tried that one lol but I would assume as you found out it will not work
黃盈達 (2 years ago)
Thank you for the tutorial :) would like to ask how to change Chinese font type? Just by typing what's called on Microsoft Word? like p { font-family: 標楷體; } Thank you :))
黃盈達 (2 years ago)
thx man :))
EJ Media (2 years ago)
+盈達黃 Here is a link that might help: http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/
Veronique Janssen (2 years ago)
great tutorial!
Yannik Arndt (2 years ago)
somehow the color tag doesnt accept rgb () declarations on my pc. can anybody help me?
Aala Hussain (3 years ago)
dude i am having a problem.when ever i set up html page.the text is always of the same size.i mean i used h1 heading and a paragraph tag but they are all the same size.i mean h1 tag should make my heading seem bigger than my paragraph but no.help me plz.i tried in css to change font size of the paragraph but to no use.my css font size tag effects the whole body content.even though i am using only style tag not body tag.It affects my heading as well.i only want to change my paragraph text size.plz help
EJ Media (3 years ago)
+Aala Hussain did you try the code i provided? thx
Lazzy Mazzter (3 years ago)
*to use percentages*
Lazzy Mazzter (3 years ago)
Aren't you able to just your percentages to change font size so that when the user wants to change size, he or she can?
Lazzy Mazzter (3 years ago)
k thnx
EJ Media (3 years ago)
+Lazzy Mazzter There are some different angles to that question - perhaps the most widely used way is users will use the zoom option in the browser. In that case you want percentage - but the best way imho is to set an absolute pixel in the body and the set pct in all the child elements. I believe I talk about this in a later tutorial. Also you can allow users to change font sizes using ASP or PHP
Kangeman Maipmokiuah (3 years ago)
thanks brother very nice , you really make it easy  bro
sirbinary (3 years ago)
Does this font and coloring work for a href html code?
EJ Media (3 years ago)
+Kiteen Sure you can use the style attribute to do that - i think i talk about that later in the series
Dineth Nimantha (3 years ago)
Great...:D
Rahat Khan (3 years ago)
Hi...Thanks a lot, Really....very nice...great place to learn css for beginner....
BracedSalmon UD (3 years ago)
Nice ! 
raj kr. chauhan (3 years ago)
unable to change font type?
Rainbow Paws (5 months ago)
Tsuki Neko Proof read everything every character especially the semi colons and misspells are common to miss
Tsuki Neko (1 year ago)
hey i had the same problem with the font i copied and pasted what you sent and it worked but even if i type the exact same thing it won't work any idea why?
raj kr. chauhan (3 years ago)
Okay..let me watch other videos of your tutorial ;)
EJ Media (3 years ago)
+raj kr. chauhan That depends on what type of font you are using for your website.  If you are using a generic font such as Helvetica then all OS's should have that.  But if you are using an obscure font then you need to use the @font-face rule to download that font to the users browser. 
raj kr. chauhan (3 years ago)
I read somewhere that to use many type of fonts in CSS we need to download font pack, is it true?
Konrad Mostert (3 years ago)
hi there what if i want to change the color in text which is generated in code and stored in variables?
Konrad Mostert (3 years ago)
+EJ Media thanks for the link and the quick response again
EJ Media (3 years ago)
+Mustard Oops sorry you did mention the text color .. in javascript there is a function called getElementById.  Here is the link explaining how to use that: http://www.w3schools.com/jsref/prop_style_color.asp
EJ Media (3 years ago)
+Mustard Which part of the web page are you looking to change the color for ... the background color?
Konrad Mostert (3 years ago)
+EJ Media  wow that was the quickest response I ever had on youtube thanks a lot! and I am looking forward to your tutorial. do you have a keyword for me so that I can browse the web in the meantime? just dynamic color in javascript? thanks again
EJ Media (3 years ago)
+Mustard Yes there is away to do that dynamically and you can use JavaScript to do that - I will be covering that in my JavaScript series which I just started
MD:RASHED PRODHANIA (3 years ago)
IT'S Really So very Good for beginner
EJ Media (3 years ago)
+MD:RASHED PRODHANIA Thanks glad to be of help - I put a lot of work into this series to make it as understandable as possible
zecxixo (3 years ago)
Very Nice!
EJ Media (3 years ago)
+zecxixo Thanks!

Would you like to comment?

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