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

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

1676 ratings | 466906 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 (140)
Manda Rishitha (1 month ago)
What if I want to have a particular paragraph of font color violet and the other paragraph pink?
Mr.Actapus (3 months ago)
***hi***
Pristine Animation (3 months ago)
Its very glad to say that it's ur no.1 channel who taught clear and defined manner
Harold McBroom (3 months ago)
The upside to CSS is it makes journalism much easier, by not having format 5,000 lines, when you can just apply CSS formatting to a particular HTML code, and have it all formatted automatically.  The downside, is that, from the outside looking in, you have to figure out what HTML item is being affected by what CSS code in what file.   Because of this vulnerability, CSS coding can often times result in duplicate effects because the coder doesn't take the time to go through the CSS to find out if something is already affecting another thing... Example, I discovered that Bootstrap.min.css and the popular fontawesome CSS may have entries that affect the same html objects. While they make it easier in the long run, you can't reverse the cycle as easy, especially when dealing with large projects, when someone loses their job, moves on, and someone else is hired, they have to figure out what's going on really quick.  When you start coding in any language, you eventually form your own style and conventions, which may not easily be understood between people who have to dissect your webpages.
Bunty (3 months ago)
The video is very good but, the Helvetica font isn't so recognisable. You could have used other font.
Leah C (3 months ago)
Confused the coloring is different? Page on css or is it done on the same html
Roman Brownlee (3 months ago)
want to ask something ... will it work if u do not put those '-'in editing those
Alamgir Sk (4 months ago)
Very helpfull vidio
Mish Nanda (4 months ago)
I have a question... Suppose I want to make changes only in text which is in first paragraph tag and don't want any changes in second one.... Is that possible..?
Papa Jee (2 months ago)
@HumbleFishStix for individual line in a paragraph add an span tag to it and put that line in between that and with and id make the change which you want to take place to that particular line and keep adding the same span tag to change any line's Css
HumbleFishStix (2 months ago)
Papa Jee for individual lines in a paragraph I mean. I made them all their own class and it works fine but I’m sure there’s an easier way.
Papa Jee (2 months ago)
@HumbleFishStix yes you have to add that class in your tag where u want the effect to occur in this case the h1 will be changed
HumbleFishStix (2 months ago)
@Papa Jee Do you have to go back into the html and add a class or can you just choose individual lines in css
Papa Jee (3 months ago)
give that tag a class and in the css change the colour for example <h1 class="colorchange ">This is my website</h1> Go to css and add .colorchange{ color: orange; /*or whatever colour you want */ }
alauddin khan (5 months ago)
you are amazing sir. thank you.
MaFess ABR (5 months ago)
You are too fast sir !!!!!
Son of Light (7 months ago)
GUYS LETS GO AHEAD
LemonGuy (7 months ago)
i <3 montserrat font
hemant Sheoran (7 months ago)
Sir If i want to style a particular paragraph then how it will be done..
DJ HONZA (3 months ago)
Give it a 'class' or 'id'
x x (7 months ago)
what about chrome and sublime?
Christocream (9 months ago)
very helpful, Thank you
2lovely85 (10 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 (11 months ago)
Css Button Design https://youtu.be/JrbPQSZ_EK0
sanket kamble (1 year ago)
Just save and refresh dude...wtf
PAK Social Media (1 year 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 (1 year ago)
thx soo much ur saving my carrier
KARTHICKRAJA M (1 year 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 (1 year 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 (1 year ago)
but how to import google fonts to this.??
susan oikelomen (1 year ago)
thank you ur so straight to the point im suscribing
FlinTz Tv (1 year ago)
question what to put if you just want to change one <p> because in this video you change two <p>
Mish Nanda (4 months ago)
I have Same questions... Can you explain me that or share that video link plz
FlinTz Tv (1 year ago)
dont mind this ai lready figured it out in the future video haha ,
Abubakar Naseer (1 year ago)
thanks vry nic
drew erving (1 year ago)
Excellent video. Thank you.
Ben Sufiany (1 year ago)
Nice
Nicholas Bay (1 year ago)
this is the easiest subject in the history of EVER
Kalamata Info (1 year ago)
Hi...Thanks Really very nice great place to learn css for beginner....
Ritesh Mohanty (1 year ago)
sir what is helvetica..... what does it mean.....can i do other thing
EJ Media (1 year ago)
Helvetica is just the font: https://en.wikipedia.org/wiki/Helvetica You can use any font you would like.
Khalilur Rahman (1 year ago)
It's amazingly easier explain to be understood as a beginner in CSS. Thanks. :)
benekaiwi1 (1 year ago)
Great tutorial. Mahalo
GavinTFI (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; } ?
RoamArrow (1 year ago)
Im no expert but i think <p style= Color: white; backround-black; Text-align: center;> will probably do it
RoamArrow (1 year 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?
Bethany Solomon (1 year 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 (1 year 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;~~
Joseph 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++
RoamArrow (1 year ago)
sara hf Post code?
PHP CODER (2 years ago)
can u make css animation tutotial?
Battleside (2 years ago)
Does any kind of font work with font-family?
Requirements Wizard (2 years ago)
Hi, Thanks for making this. Do you teach HTML/CSS?
Requirements Wizard (2 years ago)
EJ Media hi. Is there a number I can reach u???
EJ Media (2 years ago)
i work with it all the time
Harshada Khandagale (2 years ago)
Thanku! u are really a good teacher. ur videos helped me and my friends to learn html and css
Kazem Jalabi (2 years ago)
hello wat If I wanted to make a background-color to the first and not to the second pls answer
xPringle (1 year ago)
Or a class
Darton McIntire (2 years ago)
Kazem Jalabi You would have to use a div element or an ID tag
Smile Ismail (2 years ago)
you are genius sir
Nicholas Bay (1 year ago)
so easy omg
MacMarc (2 years ago)
0:56 "When you put pee in here - and just pee - we're gonna alter everything."
NECESSARY TIPS (1 month ago)
XD
MacMarc (2 years ago)
Nah it makes perfect sense when put in context
EJ Media (2 years ago)
Oh no did I do something wrong?
Espaxium (2 years ago)
Changing font type? *nah, I dont need this* *-lol get rekt skrub-*
hello there (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 (3 years ago)
I have a problem at 2:31.When i wrote color: red; it only color's the first paragraph
achal jain (2 years ago)
i am having the same prob
FireRize (3 years ago)
+EJ Media It doesn't matter.I made it.But thank you for the support.
EJ Media (3 years ago)
i can send you my code - what is email?
Anthony Green (3 years ago)
nice logo lol
EJ Media (3 years ago)
thank you sir
tatjana1707 (3 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! :)
RoamArrow (1 year ago)
EJ Media and the best thing is.. all we pay you is viewership of the ads you put on
EJ Media (3 years ago)
+tatjana1707 Glad to be of help :)
BSAsnipes (3 years ago)
i thought this was counter strike source :(
NECESSARY TIPS (1 month ago)
XD
Allen Farias (7 months ago)
You are in the wrong side
Allen Farias (7 months ago)
Lol
Zach Shult (11 months ago)
The same advice still applies
神Ruby (1 year ago)
Haha same
Lynn Bartlett (3 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 (3 years ago)
Perfect - thanks so much.
EJ Media (3 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 (3 years ago)
Waou that is awesome
tensol promotional (3 years ago)
thanks
WALKING DEAD (3 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 (3 years ago)
+WALKING DEAD Never tried that one lol but I would assume as you found out it will not work
黃盈達 (3 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 :))
黃盈達 (3 years ago)
thx man :))
EJ Media (3 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 (3 years ago)
great tutorial!
Yannik Arndt (3 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 (4 years ago)
*to use percentages*
Lazzy Mazzter (4 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 (4 years ago)
k thnx
EJ Media (4 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 (4 years ago)
thanks brother very nice , you really make it easy  bro
sirbinary (4 years ago)
Does this font and coloring work for a href html code?
EJ Media (4 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 (4 years ago)
Great...:D
Rahat Khan (4 years ago)
Hi...Thanks a lot, Really....very nice...great place to learn css for beginner....
T Wu (4 years ago)
Nice ! 
raj kr. chauhan (4 years ago)
unable to change font type?
RoamArrow (1 year 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 (4 years ago)
Okay..let me watch other videos of your tutorial ;)
EJ Media (4 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 (4 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 (4 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 (4 years ago)
@EJ Media thanks for the link and the quick response again
EJ Media (4 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 (4 years ago)
@Mustard Which part of the web page are you looking to change the color for ... the background color?
Konrad Mostert (4 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 (4 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 (4 years ago)
IT'S Really So very Good for beginner
EJ Media (4 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 (4 years ago)
Very Nice!
EJ Media (4 years ago)
@zecxixo Thanks!

Would you like to comment?

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