CSS Tutorial Pt 1 - Basic Layout

[52Quantum]

Pound Sign? I think not. Hash maybe :)

[run30wn3r444]

Wait... this is not Counter Strike Source?

Funny..

[ginag1983]

It's just the best tutorial, very simple and useful :) Thx a lot :)

[tutorialcasts]

Nice guide here, CSS is definitely necessary.

[sabougigel]

wow ,i like how u say "body" at 3:06

[CartoonsAndGameShows]

Great tutorial! From an aspiring graphic/web designer, I say thank you:)

[icewood96]

You can't imagine how you helped me. I tought CSS is shit, but I was wrong. CSS solved many of my problems.

[alimunth]

#example1 {

-moz-box-shadow: 10px 10px 5px #888;

-webkit-box-shadow: 10px 10px 5px #888;

box-shadow: 10px 10px 5px #888;

}

this is very cool thing from css3 google use it all the time

[cynyster]

clear and concise!

[alimunth]

what is the different between the class and the id in the div tag ???? please

[ramraider2k6]

OK tutorial thanks for the time but a few crits...

# <-That is NOT a Pound sign.. it is a Hash symbol. (LOL no not the sort you smoke) you also see it in music notation but it means something completely different, Sharp sign (Go up a Semitone)

£ <-This is a pound sign. please don't confuse them as if this was audio only the tutorial would fall flat on it's backside.

[ThatGuyonRS]

CSS - Counter Strike: Source?

[jsuusje123]

I think that container thing doesn't work with me

[jsuusje123]

And my body is going underneath my leftnav

[jsuusje123]

I need some help, when I say leftnav float: left; and the samen with rightnav only right. My body is in the center of my screen and the leftnav is all the way to the left and my righnav is all the way to the right so it looks really ugly.

[audiohdsongs]

i'll save ur time,jump to 01:00

[WePray4Japan]

This was great. Short and sweet and I look forward to checking it out again and then Part 2. This Gal has a very nice vocie and I like how she points out details for beginners. I'm really enjoying getting back into this. Had HTML training a few years back before my layoff. I'm Praying I can land a job once I get better at code. Thanks so much for your dedication to sharing this to help others.

[yamahac315]

THANK YOU VERY MUCH SIST..have a blessed day..^^

[JessesPlaylist]

Can't help but think, you're screaming!

[hellonearth1066]

You sound like Debbie in The Life and Times of Tim.

[jsuusje123]

I did just the same as you, only different images and no rightnav but now I´ve got white inbetween everything.. how is that possible?

[audiohdsongs]

I'll save your time, jump to 01:00

[hellonearth1066]

@audiohdsongs Lol. Thanks. Clicked it, then I heard, 'lets get started.' (Y)

[slongbongable]

after learning more about css, i have learned using absolute positions is not something that should be done. like php and html, absolute positions only look good on the screen its made on. If you want it to fit to screen or other resolutions use % instead of px. when you use a absolute position it may look good on your screen or screens with your same resolution but it looks wrong on others. If you use percent it will fit all better.

[slongbongable]

thank you!! Best css tutorial I've found.

[bigbosss227]

have u ever tried learning greek...? this is no different. :(

[cloudtunesprogramer]

i saw your chatroom html code site i liked it

[mrncy227]

Best tutorial for a CSS noob like myself.

[soluna668]

Thanks Lisa! Great short and sweet tutorial! You rock!!

[cgortz89]

Great tutorial! Good examples. I certainly got it!

[EnriqueIsGreat]

w3fools . com / #-why-w3schools-sucks

Don't trust W3Schools that much...

[jomalicious1]

hi Lisa can you pls help me how to put my header to my website?

i use Paint.net to create my banner because my adobe photoshop always say "scratch disk full" so i find another way to create my banner...now that i have it i don't know what code should i put so it will appear to my website..pls help me :( and super

thanks a lot! because of you i really try my best to learn having my own website..pls guide me....many thanks! GOD BLESS ^_^

[biffskin]

@jomalicious1 In Photoshop, go to edit-> preferences-> plug ins and scratch disks THEN assign your hard drive as the second scratch disk. Basically, your ram is maxing out and you need to tell Photoshop to use your HD for processing. If it still doesn't work, you will need to defrag your HD to ensure an unfragmented section of HD space for Photoshop to do its thing, ya dig?

[OVERPOWERDGUNS123]

i came for a counter strike source... lol

[mc37man]

thnx, was searching 4 a 'tutor' everywhere lol.XD

[vonHagenWebanwendung]

html,body{

width:900px;

margin:auto;

}

then the page is center ;)

[SurfAlien2]

I didn't like this tutorial; I loved it. This was so informative. I am currently working on a web project and was having a creative block. CSS has made a difference in making my site look very sharp, and these videos have really given me a great perspective and I have many great ideas on how to present my web site.

Thank you for this and keep up the great work.

[defritzel]

need a video like this for visual basic.

[zidanny5]

I'm not sure whether it's the fact that this tutorial is very good or that my brain is more receptive to retaining information today or that it's both of those combined but thank you so much... I can move forward with my web development assignment now thanks to you.

[chessada83]

Cool, Thanks so much

[namwarn98]

Great Tutorial

[SuperMoDe55]

very nice

[TheEmoSushi]

Hi, thx for the tutorial, can i ask how i make the body between those 2 left nav and right nav? i need it in my assignment , hope for a reply thx~

[boy4everjoy]

this was pretty good , simple yet informative, good job

[TheEmoSushi]

is it possible to change those color code into color word such us red, blue or watever

[Doshins]

Thanks for the lesson. E só pra constar eu nem falo português direito. Meu idioma é português, mas mesmo assim consegui aprender com a tua aula. Obrigado.

[nemesis1ization]

do you make tutorials from your kitchen!!lol jst jokinng

[finalkillcams]

thanx so much

[swello100]

thanks i dont know what i would have done without this tutorial. before i watched this i thought the div was just some crap i i never used it in my websites but now i know how powerful the div tag is

[alexid1980]

Really appreciate your tutorials!! This is amazing, GRAB and GO! Easy to understand!

Thanks again!

[CWalizzyy]

For anyone looking to write code and not have to use a text document and for you as well Lisa there is a program called Komodo Edit which is a coding program that will give you syntax errors when something is wrong and really helps finding problems when you are writing code for anything including css

[GoldBoltAction]

} <---- is a curly bracket

[munayata38]

YOU JUST STOLE MY IDEA I WAS JUST THINKING OF THT LAYOUT

[MCTGangsta]

awesome tutorial, it really helps me with my study, because I'm too lazy to look it up at the study's page

[tomthecool]

£ <-- That is a pound sign...

Silly Americans

[munayata38]

@tomthecool their talking about this {}

not the pound sign

Silly Europeans

[tomthecool]

@munayata38

1. THEY'RE

2. Americans call "#" a pound sign. We call it a hash. That is what I was talking about. Nothing to do with any other comments/quotes from the video.

3. {} are called curly brackets. I know.

4. Silly Americans.

[munayata38]

@tomthecool it depends where u live if u live in North America they call it a Pound sign

and if ur living in Europe ofcourse ur living in Europe if u call it a pound sign it would be confusing

so they call it hash

it depends where u live

u Silly European

PEACE

[tomthecool]

@munayata38 THAT'S WHY I SAID "SILLY AMERICANS" - BECAUSE I KNOW IT'S ONLY AMERICANS WHO CALL IT A "POUND SIGN"!

ARE YOU FUCKING RETARDED OR SOMETHING?!

[munayata38]

@tomthecool NO, IN SOME OTHER COUNTRIES THEY CALL IT A POUND SIGN LIKE ASIA AMERICA (NORTH AND SOUTH)

AND I BELIEVE EUROPEANS ONLY CALL THT HASH

[tomthecool]

@munayata38 WHAT THE FUCK IS "ASIA AMERICA"?! THAT'S NOT A FUCKING COUNTRY, NOR EVEN A PHRASE USED TO DESCRIBE A GROUP OF COUNTRIES.

*****ALL***** ENGLISH-SPEAKING COUNTRIES CALL IT A "NUMBER KEY" OR "HASH SYMBOL" BESIDES AMERICANS.

[munayata38]

@tomthecool U FUCKING DUMBASS I FORGOT A COMMA OKAY

AND EUROPE ONLY CALL THT A HASH SYMBOL OKAY

U FUCKING RETARD

TALK NICE OR ILL TEAR THE FUCK UP UR CHANNEL

[tomthecool]

@munayata38

They don't call it a "pound symbol" in Asia.

No one calls it that, besides American English (and Quebec English apparently). Not Canada (besides Quebec). Not other North American countries. Nowhere (significant) in South America.

Other things you may like to know (RE the comment you left on my channel): I'm not fat, I'm not a kid, and I know my channel "sucks" - because I haven't made any videos in YEARS!

[munayata38]

@tomthecool in Asia

yeah they do im asian

and i know about my Asia

[tomthecool]

@munayata38 If you do, then it's only because you've been watching AMERICAN TV and therefore learning AMERICAN English.

Any sort of "official" English language in any country will always be British English, unless they have their own 'version' of the language (e.g. American English or Australian English).

Also, Asia is a pretty huge place, and you sound a bit retarded referring to the whole continent like it's a single region.

[tomthecool]

@munayata38

I repeat: ONLY BECAUSE YOU'VE BEEN WATCHING TOO MUCH AMERICA TV.

[munayata38]

@tomthecool i dont watch TV

[tomthecool]

@munayata38 Also, I just checked your youtube profile and found pretty overwhelming evidence that you're in AMERICA, not Asia.

[munayata38]

@tomthecool im asian

and i just came here last year

I AM PINOY

[munayata38]

@tomthecool in Asia

yeah they do im asian

and i know about my Asia

[shujathmirza]

Nice tutorial..........good explanation.



[az100eletronics12]

wiil this work for macs too?

[frusciante39]

@az100eletronics12 yeah, it'll just be easier, smoother, and a damn sight more sexy :)

[monirulbd]

Thanks, a very good basic tutorial for beginner. 

[blah979]

Figured it was just miss typing the link info. Must have checked that 50 times. Meh.

[blah979]

I've typed this out letter for letter and done everything you say but I'm only getting the text up. It seems it's not linking to the css sheet, can't figure out why not. I've put in the correct command. Great tutorial tho I know I missing something stupid.

[HandsomeDee92]

The footer is not working

[monirulbd]

@HandsomeDee92 Just add a } at the end of last line.

[HandsomeDee92]

Whats the container for?

[seanlikesDTB]

very helpful, thank you!

[KSwearingain]

This was very helpful. I like the way she explained things.

[rogeliovegam]

This is what I was looking for !

[thisisgaurang]

nice and basic



[extraContrabando]

thanks. :)

[3xFON]

Why you working in notepad? Are you masochist?

[jjames05]

thank you so much. just like you i wished someone broke the basics down just like this, and now you have. great info.

[ConstantlyCode]

hey Lisa what do you uses for recording your Videos? please get back to me.

Thanks

[Xyo360]

i cant make my player walk!:(

[TheZakyto]

i need to change a numbers and save it !!

[youssefsasuke]

this is not css!



[247minecraftminer]

how do you get your youtube name a picture(subscribe)

[TheTomWarp]

@247minecraftminer You have to become a YouTube partner before you can have custom thumbnails and the image to be "Subscribe" :)

[Anemicnapalm]

If i wasn;t gay id tap dat!

[MoustacheMyMoustache]

The pound sign? Bitch please.

Nice tutorial. Thanks.

[faisurrehman]

lisa,absolutyly nice css tutorial...i learn much more from these....thank thank youuuuuuu.

[remuss7]

what software,sorry...

[remuss7]

what program did you use to record the desktop(screen) and your voce?

[Aloplop]

I'm completely new to this, and I'm wondering, how can I see how my design is so far aswell?

I tried to open my index.html in a browser, but didnt work, do I need any specific programmes?

[aliraza123p]

It is really very good Tutorial. I like your teaching style and your voice too.

[KelferMookie]

This is the best CSS tutorial i've seen thus far.... i finnally got a concept of what CSS is.

[KelferMookie]

This is a great tutorial... thank thank thank yooou!

[jinishivs]

thanks for this great video .

[sahilcspro]

Its great!!!! me knew to CSS. Lisa u r great inspiration to me :D

[9TheJohnny6]

I cant make css text document, nothing change when am type style.css!

[iamconor6808]

i was looking for a counter strike source tutorial FAIL

[Nuttenpapa]

@iamconor6808 hahaha :D

[KelferMookie]

@iamconor6808 Why would you need a tutorial in counter strike? Fucking noob....

[chelseaboy4744]

@iamconor6808 same lol

[Nuttenpapa]

nice ty

[QuantizingKelly]

Great tutorial. Thanks for doing this. :) The curly bracket you highlighted is often called a "brace." At least in Canada it is. :)

[besilio1]

your Brilliant! Thank You for making it so easy - needed a quick refresher

[besilio1]

your Brilliant! Thank You for making it so easy

[TheJames6514]

I've now changed instead of -link href="style.CSS"

I changed it to -a href="style.CSS"

But still doesn't work

[Tbroman]

I call the sign above the square brackets "Curly braces".i dont know what the real name is though

[HighstoneTim]

It´s the same for me, first I thought it was something I´ve done wrong. But I`ts obviously some other problem.

[TheJames6514]

I've tried this a lot of times and it hasn't worked I've copied like everything u wrote down and still didn't work

[Newfoundlanddesigns]

Thanks for the tutorial, and thank you for the download.

[MyPorpeta]

Very good the explanation.

[theNEWaT23]

me and my friends are developing a site called Just woke up.™

[NealPS3]

@googladsense Ow. :P

[NealPS3]

How to get that CSS icon at 1:50? If I do it, it looks like a normal note document.

[PIMP5FOR2]

how do i make my template fit the browser's exact size?

[90cdowns]

Can u please make a video explaining CSS reset?

[Foaman]

You need to use a DTD.

[Acoustictalk]

Thanks Lisa, that was really helpful.

[0oxcmdhackerxo0]

@BandinoXIV r u sure u made it float left not something like align left

[DeinTutorial]

a girl play css ?? XD

[hmashruf]

Made to sound easy, thanks

[BandinoXIV]

in my site, Im using just a rightnav and the rightnav wont go right next to the body but below it and to the right. what am i missing in order to get it next to the body??

[112yes]

i love you lisa ... you really make it simple for me ... Thank you so much...Good job

[filomasta2288]

hi

thanks for your tutorial it was awesome.

um just on the footer part where you had

clear: both;

this part was not clear, do you mind explaining what that was meant to do

thanks

matt

[detroit761]

nice voice :)

[nemanjarajkov]

This tutorial is great! Great job! Thanks :)

[ForcesVirus]

Hier ist unser neuer Css pup Server!!!! Server IP: 217.198.137.230:27015 Wir würden uns auch freuen wenn ihr uns auf unserem TS³ besucht!!! Ts³ IP:85.31.187.142:10001

[Jigsyboy1]

Thanks for the Post.

Helped me spruce up my own site that i did up with a the builder Jigsy

[DannydesignsGFX]

I've completed this and the layout comes out as I wanted it to be displayed, but It's in the corner off my web browser, it doesn't cover the whole page, can anyone help me?

[theprophetstryder]

followed the tutorial to the letter, for the life of me however the header image will not display. anyone know a solution?

[mrjollyjosh1]

hash or pound?



[Oneworld87]

Why doesn't W3C give you info on the order of precedence for CSS syntax? E.g. where #id.class is true, but .class#id is false -- I can't find anything relating to this on the site (thusly, the user is to experiment until they figure the synax (which can be good in some ways, but is a bit annoying, and the purpose to teach/document is just that, to teach/document)).

[nerozero25]

um, it has nothing to do with programming.

[Sweet1plum2000]

confused - we can download the template and it then expires in 40 days without purchasing. Then it shows that it is free as long as we keep all the files and give "lisa" credit. Has anyone used the template downloaded and have it expire after 40 days?

[BostonSingers]

very good!

[MrNomSauce]

6:54 that sign is called a brace and the round brackets are called parenthesis

[delorto93]

omg this video is awesome! :)

[kanjitard]

Great tutorial. Simple and to the point.

[skillssaysitall]

This was awesome! Just learning CSS and this was the perfect beginner tutorial. Easy to follow. Thanks!

[LittleGuy536]

cant open the file in browser

[nij369]

thanks for the tutorial, you explained it nicely

[14711471]

better tutorial at nagjokes[dot]tk

[UserName222222]

Your problem is that you use windows! lqtm OS X and Linux are what a lot of coders use.

[mommy7412]

Great!!!

[EvilzElmoz]

i dont know a thing bout css and i need help on the background image :(

[MattSL97]

@EvilzElmoz Hello I'm with Matt Lyon Web Design

body{

background-image:url(example.j­pg)

}

[EvilzElmoz]

what do i need to create for the images????



[kapijatwo]

@EvilzElmoz how did u mean ? make the image, and put url of the image into your site... :) ?

[EvilzElmoz]

@kapijatwo where is the url of the image????? lol

[EvilzElmoz]

@kapijatwo where is the url of the image???

[kapijatwo]

@EvilzElmoz for example, you put your site into my documents, and you wanna put in a picture from my pictures... you type url(my pictures/photo123.jpg); understand ? :D

[sciman001]

good tuts..

[lubi2010]

Thanks very much! very easy to follow :)

[lynkynpark86]

but wouldn't you want to make the container full size? other than that great tutorial!