CSS/CSS3 Tutorials: Introduction & The Basics

What is CSS? How do we start using it? This video also includes some basics to get you started if you’re new to CSS. CSS Playlist: www.youtube.com Official website phpacademy.org Support Forum http Follow us on Twitter! twitter.com
Video Rating: 4 / 5

Host Unlimited Websites For .88 ! bit.ly Unlimited Hosting, Free Domain, MySQL, PHP, CGI, SSL, FTP, Stats, 0 google adwords, E-Commerce Included, Dreamweaver Ready, 30 Day money back guarantee **************************************************************************** To Center the menu: You will need to work out the total width of your menu. If you followed the tutorial exactly then each menu item is 150px (including the borders). 1. Add up the number of menu items to get your menu width and set the width in the css on the div: #navMenu 2. you will now set auto margins like this: #navMenu { width: 750px; —— example width margin: 0 auto; } this will remove any vertical space and tell the navMenu div to reside in the middle of whatever div that it is sitting in. ********************************************************************************* This is part 2 for part 1 please follow this link: www.youtube.com In this tutorial by James from www.dreamweavertutorial.co.uk we will be create a menu, a horizontal css dropdown menu to be exact. The css menu will be complete with css hover effects whereby the drop down menu is visible only when a user hovers over the main link on the horizontal menu. Drop down menus are derived from the original sucker fish JavaScript dropdown menus. The drop down menu in css is exactly the same but will load much quicker in a web browser which is not only good for your website visitors but is also good for your Google page rank. The menu
Video Rating: 4 / 5

49 Responses to CSS/CSS3 Tutorials: Introduction & The Basics

  • Raj Kakra says:

    Test your site in various devices from an iPhone and iPad, to a Kindle and on Android on the responsivetools[dot]com. It also shows your site both in portrait and landscape mode. I like this tool much more because of the outlines of the devices displayed on the page, which brings more meaning to the whole process.

  • Serkan Tepe says:

    Thank you !!!

  • Mahim Arya says:

    yes alex this tutorial are prety good but video quality why nots looking good

  • samudra kumara says:

    thank you very much..

  • Cj Vaans says:

    Thank you for the tutorials, Alex! I find your tutorials much more helpful thank others.

  • Cahyo Enggar says:

    Hi Alex, i’m very thanks full for your tutorial.. i’m very like it, learn it, and enjoy it :)

  • THECOMMANDOACTION says:

    Hey Alex! Sup dude. I just wanted to say I think you do an ABOVE EXCELLENT job when you explaining stuff. You make learning programming fun! Thank you so so much!

  • prutschwerk says:

    “I am not gonna name this properly. If I can give you one tip: ‘name it properly’.”

    You’re killing me.

  • iSuper Duper says:

    how can i use css in php ?

  • Magarusu says:

    Chrome and notepad++, loving this from the start:D

  • ForWebMasters says:

    phpacademy you guy are amazing. i learned so much from this i am a professional web designer and i dont even have a degree in this stuff. i would love to thank you for what you have done for me. THANK YOU, THANK YOU, THANK YOU!

  • JelvinJS7 says:

    i have an interesting problem: i originally named my stylesheet “style.css” and i had it in the same level directory as index.html and it didn’t work at all. then i decided to follow what you did and changed it to “primary.css” and placed it in a newly created “css” folder. why is that?

  • charanchin balse says:

    Hey Alex, Can we get advanced “CSS3″ tutorials…along with complete series of “Phone app development with HTML5, CSS3, & Jquery”…
    If possible can we get complete series of “AJAX”…
    plz plz plz plz plz plz plz plz plz plz plz plz….

  • FlevasGR says:

    use aptana studio :)

  • prosoftenterprises says:

    Hey, Alex. First of all I am grateful to you for this series. But, Can you just create another Playlist on YouTube on JavaScript. Because I am a beginner, I want to learn the JavaScript Too.
    If Other YouTube Users support me then,like the comment.

  • tabishfuhrer says:

    Thanx Alex finally u switched to notepad++ great…..;)

  • seed419 says:

    I like this guy. Looking forward to working through these.

  • Abdugani Norbutaev says:

    great

  • Jordon Jensen says:

    You should cover the basics of scripting in JavaScript, it’s a very confusing language

  • Sangvat Sokunsatya says:

    Alex is back!

  • Khalid Okiely says:

    Hello Alex, I like the new series. But, can you please go through css from A-Z
    Basics, intermediate and advanced tutorials?
    Things that I cannot learn outside are always somewhere in your playlist, I’d be glad to see CSS as a part of it :)

  • DmFro says:

    Awesome! Just when i decided i need to learn CSS you upload these. Thanks a lot, your tutorials are amazing as always!

  • tutorialesnet says:

    I was expecting for these videos… Thank you so much Alex, from Phpacademy.

  • thecodingguys says:

    Just waiting for like 20 minutes and this video will have around 600 views lol..

  • thecodingguys says:

    Hello Alex…

  • ultras79apoel1926 says:

    My items are underlined?
    How can i remove this?

  • Aron Høyer says:

    Try setting the z-index. ;) Ex.:
    #yourID {
    z-index: 10px;
    }

  • KilaHeroina says:

    How do you make it go over something?
    Like over a photo not under.

  • henke103 says:

    How do i center the menu?

  • TheBdemba16 says:

    awesome tutorial. thanks

  • inc2000glw says:

    if i was a gal i would have ur baby !!!

  • TheEmperorFX says:

    awesome! you’ve made my day much easier-

  • Татьяна Платонова says:

    ИЩИТЕ НАДЕЖНЫЙ И ПРИБЫЛЬНЫЙ БИЗНЕС? ПОЗДРАВЛЯЮ!
    ВЫ В НУЖНОЕ ВРЕМЯ И В НУЖНОМ МЕСТЕ!
    Ничего Общего с Этим Видео!!!
    Приглашаю, в Команду Тех Кто Действительно Желает Разбогатеть и Достичь Успеха!!!
    Активную Помощь Гарантирую!
    Все Детали в skype: yadrin3
    С уважением, Татьяна

  • Tristan Saffron says:

    Thanks Very Much! :D

  • mcclelland anastasia says:

    Guys, get the best webhosting doesn’t need to be difficult (I used to feel it did). I’ll give you some advice right now. Look for hosting company called Hostgator (just google it). Seriously,in fact you can also use this special coupon (HGCOM25OFF) when you register to get 25% off their hosting plan.

  • Sony Kumar says:

    Thank you so much it help me a lot..

  • Myat Thu says:

    Thank you so much for your great tutorial.
    

  • nunchuks1473 says:

    I tried that from the start, it’s not working…

  • Pongsathorn Antarikanon says:

    Great tutorial Thank a lot.

  • videosBGshow says:

    Guys, i do exactly the same but something gets wrong when i do the :hover thing, it just doesnt show up.. anybody who knows why?

    (p.s i am using chrome)

  • videosBGshow says:

    Just put a center tag around the whole menu as you would normally do for any type of shape (text box, picture, link etc.).

  • Florin Cristea says:

    Great tutorial! How can I set a different background colours for each of the main menus like your products, not the link items?

  • cssbananas says:

    Nice

  • Abhishek Yadav says:

    very nice tutorial…It’s so simple and easy,thanx thnx, and thnx a lot, it’s very helpful to me :)

  • Teerush Ruschano says:

    Thank You
    Thank You

  • htet aung says:

    Thanks a lot. I wasn’t understand what me instructor taught in class until I watch this video. Thanks again.

  • Chris Storm says:

    Mate thank you very much – This has probably just passed me on my module! :D

  • nunchuks1473 says:

    Hello, your tutorial is awesome, thank you. But how do you put the menu to the center?

  • stunkata8 says:

    That’s a really really really great tutorial!