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

XHTML and CSS Tutorial - 16 - Intro to CSS

1968 ratings | 273768 views
Facebook - https://www.facebook.com/TheNewBoston-464114846956315/ GitHub - https://github.com/buckyroberts Google+ - https://plus.google.com/+BuckyRoberts LinkedIn - https://www.linkedin.com/in/buckyroberts reddit - https://www.reddit.com/r/thenewboston/ Support - https://www.patreon.com/thenewboston thenewboston - https://thenewboston.com/ Twitter - https://twitter.com/bucky_roberts
Html code for embedding videos on your blog
Text Comments (270)
Jiwan Garg (1 month ago)
what about to name when there are more than 1 <p>
Ethan Lefler (3 months ago)
-like this comment and ill teach you how to do this-
Ethan Lefler (3 months ago)
dinesh malche (4 months ago)
I dont understant about doctype plss tell me about what its work..
Sanad Kadu (6 months ago)
"paragrapah" :X()?
Bongo Cat (8 months ago)
h1 {color:purple; font-family:calibri;}
I OWE you a lot to be honest, you're a very good teacher
Georg DeLambron (10 months ago)
wouldn't it be better to learn CSS by a separate file, instead of putting it in a header ?
CutTheBullShit (10 months ago)
What if I want to give my first paragraph red color and second paragraph a different color
Katyayini Kumar (11 months ago)
how to assign it's to different paragraphs
Dhruv (1 year ago)
What the heck is doctype and the rest text ?is it necessary to write everytime?
Gadock the Kitten (1 year ago)
color... *screams in British*
Tyler Stephenson (1 year ago)
You're awesome, Bucky! I love your attitude :)
MCRM (1 year ago)
<!--Hello, I'am leaving a comment ;)-->
MCRM (1 year ago)
I passed in computer engineering but failed in english spelling
Rajaram Jat (1 year ago)
you are a great guy ,please suggest what kind of assignment or project we can do after studying each lecture.
Merd Güm ! (2 years ago)
thanks man !
Aglaia Wong (2 years ago)
if the style does not show up, check whether you have comments written within <style type="text/css"></style>. Delete all the comments between and the stuff would work.
ניק פטייב (2 years ago)
I was wondering, I am studying at two different sites/courses HTML - in one place they said to use <style> tags but without attribute. Here Bucky said use it with attribute type="text/css" What's up? Is the attribute neccessery? Or is it outdated (the 2nd course is a paid one and we do it online)
Schism (2 years ago)
It's an XHTML thing. HTMLV doesn't need it.
A To Z (2 years ago)
How to modify more than one paragraphs in different ways?
Anonymous #7 (2 years ago)
I got a BIG question how do I prevent the tags from being orange I checked everything that Bucky did and my stuff is the same but on HTML half of all the tags are all orange same goes when I input CSS (text editor Im doing this on is visual studio ) another problem is when I save my file (even multiple times) then refresh the amateur-like webpage none of the stuff I typed appeared this all started happening every since I started CSS please help I need answers
PrincessEdits (2 years ago)
I've just started learning css and I can NOT use colours no matter what I do! Dont reply with examples please, they work, but if i copy it exactly and change colours it doesnt work! please help
PrincessEdits (2 years ago)
thank you soooo much that was exactly the problem!
Binaya Acharya (2 years ago)
It's probably because of your habit of writing colours instead of colors. Spelling matters!
San Samman (2 years ago)
prinduplayzx can you show me what have you written i mean how can we help you if we don't know what is the mistake !
Gary McCusker (2 years ago)
Hi, have put css code into notepad++ as per instruction, but not getting any colour or different type styles?
Gary McCusker (2 years ago)
Solution: colour and color spelled differently in USA
Anonymous #7 (2 years ago)
me too but Im using visual studio and getting colors but all of the tags are orange
PrincessEdits (2 years ago)
me too!
UnderratedYoutuber (2 years ago)
what if i only want to do the font and not the color??
San Samman (2 years ago)
UnderratedYoutuber delete the color part just :- {font - family:arial; }
Sant Plays (2 years ago)
mine won't even showhelp
yerrapotu kiran (2 years ago)
Danke Bucky
Eat Crow (2 years ago)
what if you want one paragraph one font and another paragraph another font.
IndiCoder (2 years ago)
Binary Byte ID
Dheeraj Kumar (2 years ago)
Bucky ki Buck Buck
Anita Khounthong (2 years ago)
how to make only one word colored?
UnderratedYoutuber (2 years ago)
you use the tag <span> you can go to w3school(something like that) and learn from it. :)
IndiCoder (2 years ago)
Anita Khounthong add font tags before that word.
Faizan Tariq (2 years ago)
i can't change the paragraph colour although i am doing everything just fine! help me bucky? is it a valid doctype problem?
Aman saifi (7 months ago)
Aashish Singh (1 year ago)
Trill1 lol and he never passed that code😂
Saad Tahir (1 year ago)
post the code here: it may have some errors. I'll look over it for you.
Mohammad Mahjoub (2 years ago)
So, what if I want one paragraph to have a red color and another blue? How can you do it?
Rista (1 year ago)
Use id="p1" in the tag of your second paragraph, and in the style tag type something for example like #p1 {color:green;} and it should work, use id for everything seporate you want to do :D
I'm Just Saying (2 years ago)
I don't know if you've found a solution yet, but this is a bit more complicated. When using the selector 'p', all paragraphs in your HTML document will be affected. If you want only one of them to be styled, you have to assign an identifier to it. You can do this with the 'id' attribute. Once you've assigned the ID to the paragraph, let's say you just set it to 'redparagraph', you can change the CSS selector from 'p' to '#redparagraph'. Then anything you write within that selector will affect only that paragraph.
Jashan cheema (2 years ago)
this is working without typing type="text/css"
San Samman (2 years ago)
Jashan Cheema yeah but maybe you cant to something when you only type <style> i man it better to do eveything instead of fe things !
Javid Ibrahim (2 years ago)
Actually you're right
apenasmeucanal (2 years ago)
"Intro to Counter Strike Source."
Justin Lauinger (2 years ago)
I need help when I try to change the color nothing happens
Mohammad Mahjoub (2 years ago)
Here you go: <!DOCTYPE html> <html lang="en"> <!-- this is intro to CSS and this will help to keep your web all nice and beautiful--> <head> <style type="text/css"> p {color: #cd0d2d; font-family: Nanum Brush Script; } </style> </head> <body> Every day that you use to learn something different is great day. <p> Today is good day because I'm getting better a creating Websites </p> </body> </html>
Playwarrior 123 (2 years ago)
Make sure u have no typos
Kartik Sood (2 years ago)
does not work with heading tag
Javid Ibrahim (2 years ago)
it doesn't bro
Raj Benjamin (2 years ago)
It does
thaneros (2 years ago)
Why is inline CSS a no no?
Robert Reimann (3 years ago)
So... CSS is like java :D
readysetfire 7 (2 years ago)
not even close
hhaslam11 (3 years ago)
+Robert Reimann No.. no it's not.. :|
Anthony Mwangi (3 years ago)
im stuck here my css does not apply even if i use external styling sheet
Sonia Hua (3 years ago)
+Sonia Hua Also if you need comments in the style then put them between /* */ instead of <!-- -->
Sonia Hua (3 years ago)
+Anthony Mwangi Do you have comments in your code? Are they in between <style></style>? Try moving them out.
allwyn mathias (3 years ago)
Anyone who wants to know the difference between html & xhtml please look up here: http://www.w3schools.com/html/html_xhtml.asp
Hasan Habazi (3 years ago)
What is the difference between xhtml and html
Karan Vyas (3 years ago)
+Hasan Habazi The Most Important Differences from HTML: Document Structure XHTML DOCTYPE is mandatory The xmlns attribute in <html> is mandatory <html>, <head>, <title>, and <body> are mandatory XHTML Elements XHTML elements must be properly nested XHTML elements must always be closed XHTML elements must be in lowercase XHTML documents must have one root element XHTML Attributes Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden <!DOCTYPE ....> Is Mandatory An XHTML document must have an XHTML DOCTYPE declaration. A complete list of all the XHTML Doctypes is found in our HTML Tags Reference. The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html> must specify the xml namespace for the document.
Karan Vyas (3 years ago)
+Hasan Habazi How to Convert from HTML to XHTML Add an XHTML <!DOCTYPE> to the first line of every page Add an xmlns attribute to the html element of every page Change all element names to lowercase Close all empty elements Change all attribute names to lowercase Quote all attribute values
Parth Mahida (3 years ago)
Hey, What if i i have more then one paragraph, how would i add style?
Soslan Kupeev (2 years ago)
+Anthony Mwangi How exactly?bc he just put P as an ID
Anthony Mwangi (3 years ago)
+Parth Mahida yu use class or id to choose which paragraph yu want to use
Ivan Kusakovic (3 years ago)
Till now I can't see difference between HTML and XHTML? What is HTML and what is XHTML? Isn't he explaining HTML?
seanetic (1 year ago)
Efdf Fsdfsd (1 year ago)
you should learn this first,than learn html 5
seanetic (2 years ago)
Should we be learning this playlist or the html 5 playlist so?
yerrapotu kiran (2 years ago)
+Alfa R. Thanks for the good info. What is sgml??
Ivan Kusakovic (3 years ago)
+Alfa R. Thanks :)
Gummi Koalabears (3 years ago)
I happen to know that C++ requires a compiler to run the info, but my version of N++ has a language option and it has C++. does my version of C++ have a compiler???
Abhishek Varma (3 years ago)
is it necessary to past the first two top line stuff or is<!doctype html>okay?
Atif Hamid (3 years ago)
Atif Hamid (3 years ago)
Hi guys total beginner here im using a macbook and using text wrangles and i have typed in the style coding exactly and the colour or font does not change everything up until now has been perfect please advise 👍
makica25 (3 years ago)
My CSS works only when using <style>  without type="text/css"> Can anybody advise why????
makica25 (3 years ago)
+mamo tesema try using netbeans (free IDE program) and there you can just click-drag CSS file into html (head section)
mamo tesema (3 years ago)
+makica25 ?I have the same problem. did you figure it out
Vicky Mukherjee (3 years ago)
You could add it externally
Siavash Sabet (3 years ago)
what should I do if I want different properties to have different elements?!!!
Hermez (3 years ago)
+Siavash Sabet , for that you will need to learn "id" and "class" attribute.
Richard Jucewicz (3 years ago)
doesnt seem to work with font-family: arial even tried the http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_style but no arial ......
Utkarsh Malviya (2 years ago)
just add double quotes around the font name. eg: "arial" it worked for me!
NIGHTMARE 1412 (3 years ago)
You have to type "font-family:arial;" with no spaces and a semicolon.
Kevin Smith (3 years ago)
I'm stuck here. The css won't apply an I've type everything exactly as its supposed to be.
Kevin Smith (3 years ago)
Never mind I figured it out. I was using comments in my style sheet but not the correct type. 
Eric Becker (4 years ago)
This doesnt work if i put a comment at the end at line 6. Does someone have similar problems?
Eric Becker (3 years ago)
probably because stylesheet is a separate programming language
Kevin Smith (3 years ago)
 just figured it out. You can't use standard comments within a style sheet it messing everything up comments need to be between /*   */ instead of <!-- -->
Kevin Smith (3 years ago)
me too. I'ts not working for me 
A.Mckinnon (4 years ago)
I keep thinking of counter strike:source when he says CSS
Who doesn't.
Majestic Barrack (4 years ago)
if we want to change the color the text which is not in <p> </p> i.e normal text what to do ??
Aashish Kandel (4 years ago)
instead use body or maybe another line with another selector for things like lists, and stuff
Majestic Barrack (4 years ago)
my font does not  change i write every thing same??
shugaRaye (4 years ago)
on a side note...so i just changed all my times new roman fonts
JamesTKirk82 (4 years ago)
did you just say you want to change the pee-color to blue? :P
Irakli K (4 years ago)
are we done with xhtml? 
Jay Bartgis (4 years ago)
This isn't educational institutions where you memorize it then throw it out when you're done. This is theNewBoston... where you learn something then use it for the rest of your life. So no. We're not "done with xhtml".
Michael Trier-hofby (4 years ago)
one does not simply become done with xhtml
Amine Hijji (4 years ago)
Not yet!
wolfy5197 (4 years ago)
I didn't type the "type='text/css'" and it still worked :I xD
Jay Bartgis (4 years ago)
+Hasan Bugra Arslan Someone didn't watch the tutorial videos in order.
HB (4 years ago)
I thought it was heading but they are the same i think. Thanks btw.
R-Kedgaming (4 years ago)
a header is the title we write before starting a paragraph
HB (4 years ago)
+vaishakm6 What is a header btw? I don't use them as well. Lol.
HB (4 years ago)
+vaishakm6 Haha.
Mariano Salvatore (5 years ago)
you are awesome
46Bax (5 years ago)
nice if you do html {font-family:Lucida Grande;} it'll make the website look like you're watching it on a mac (Lucida grande is default font for mac)
Michael Trier-hofby (4 years ago)
Jiff Pop (5 years ago)
Well yes I mean in American English not British English, even though technically we both use the same language
J (5 years ago)
In British English it's "colour". What's your point?
dat nig (5 years ago)
y i have tried bot spellings many times and still don't work
Jiff Pop (5 years ago)
The spelling in English is color :3
harry nixon (5 years ago)
colour is spelled color in this shit ahahah
dat nig (5 years ago)
no matter what i do the colour just doesn't show.
edza345 (5 years ago)
same problem here
Troy Najera (5 years ago)
Thanks a lot. I had this problem because I tend to write a lot of comments for future reference. Thanks again!
Fiyad Hossain Sowad (5 years ago)
Ivan S (5 years ago)
I cant add notes to the in the head for some reason and if i do they cancel out my code....
ricky golfer (5 years ago)
edit-silly me typed text/class instead of text/css
ricky golfer (5 years ago)
I can't seem to get the color to change =/
Suk Mike Hok (5 years ago)
let's change the font it is rome or something who the heck is using ( you are -_- )
TheFinalDog (5 years ago)
He's true. nothing would be done without (X)HTML CSS makes look it pretty Javascript makes your page elements move and do things PHP is server-side language that is used in comlex things like databases
aldebearart (5 years ago)
Why wth are you guys referring programming and junk to teh human body?!
HashtagTwo (5 years ago)
I just heard castrating style sheet....
YoloSwagProductions (5 years ago)
But the brain is an internal organ... And internal organs are part of the body... So you're saying Javascript = HTML = CSS
andrewjakeways153 (5 years ago)
what if you have 2 paragraphs an have them both different colours or different font what element name would i use the keep the separate???
PicoriPi (5 years ago)
you mean the worst way that isn't supported anymore
ily u bucky 3
Harshe Cod (5 years ago)
easiest way is to type font color tag of html
Aaron Garton (5 years ago)
Those curly brackets are called 'braces'
Yug Shende (5 years ago)
make sure you spell it wrong..xD
A Grand Angry Funk (5 years ago)
Actually, I was thinking about how annoying ads are...
DoubleAWilly (5 years ago)
HTML = the body parts of a car CSS = the design and style of the car Javascript = the engine
Treyzania (5 years ago)
If you aren't spelling someting wrong, then you aren't doing it right. Even these sentences are mispelled.
MoveLegacies (5 years ago)
With css do not add line comments on any of the style lines as it will not read your commands in the braces. I had an error for like half an hour until I removed it and placed elsewhere.
MrUniverse (5 years ago)
HTML = The skeleton CSS = The skin Javascript = The muscles & organs (apart from the brain) PHP = The brain
or do the css for #blue {color:blue} then wherever you want blue color id=blue!
I have been coding for awhile and it is a lot faster to put the CSS in the head, because it is easier to see what the change is and fix it.
Dann858 (5 years ago)
True and JavaScript is the fancy animations and stuff. :D
haha okay good PHP is the heart
ChrisPTY507 (5 years ago)
Wrong,PHP is the heart. I just forgot to mention it =3
skazis87 (5 years ago)
no, heart is electricity. always.
Kyupa Suria (6 years ago)
CSS can be inline, internal styel sheet, external style sheet
Manuel Maestrini (6 years ago)
This CSS tutorial is CSS, CSS2 or CSS3?
Anson Joswin (6 years ago)
here i believe he showed the example of internal style sheet... the separate style sheet u want is the external style sheet..i guess he will explain in the coming tutorials..
StangCeps (6 years ago)
@MrBlackkiller99 actually I was wrong about that format. but you can style each paragraph from within the body

Would you like to comment?

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