Getting Started with CSS3
Video Lectures
Displaying all 32 video lectures.
Lecture 1![]() Play Video |
Introduction to CSS and Adding a CSS File to Your HTML The 1st tutorial in the CSS tutorial series. In this lesson, I'll be introducing you to CSS and show you how to add a css document to your site. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 2![]() Play Video |
CSS Syntax and Adding Color to Text The 2nd tutorial in the CSS tutorial series. In this lesson, I'll be giving an overview of CSS syntax and showing you your first css code by adding color to text. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 3![]() Play Video |
Styling Backgrounds The 3rd tutorial in the CSS tutorial series. In this lesson, I'll be showing the background property and how you can use it to add color and image backgrounds to your sites. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 4![]() Play Video |
How To Style Text The 4th tutorial in the CSS tutorial series. In this lesson, I'll be showing you how to style text. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 5![]() Play Video |
How To Change Your Font The 5th tutorial in the CSS tutorial series. In this lesson, I'll be introducing you to the font property of CSS. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 6![]() Play Video |
How to Style Links The 6th tutorial in the CSS tutorial series. In this lesson, I'll be introducing link states and how to style them in CSS. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 7![]() Play Video |
Styling Lists to Create a Horizontal Navigaton The 7th tutorial in the CSS tutorial series. In this lesson, I'll be showing how to take a ul and turn it into a horizontal list most commonly used in navigation sections. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 8![]() Play Video |
Box Model - Changing the Height and Width The 8th tutorial in the CSS tutorial series. In this lesson, we will introduce you to the CSS box model and teach you how to set the height and width of your elements. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 9![]() Play Video |
Box Model - Margins and How To Center a Div The 9th tutorial in the CSS tutorial series. In this lesson, we will help you understand the outer layer of the box-model. With margin you can position your elements and how to center a div. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 10![]() Play Video |
Box Model - Borders The 10th tutorial in the CSS tutorial series. In this lesson, I'll be showing how to use the next layer in the box model, the border. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 11![]() Play Video |
Box Model - Padding The 11th tutorial in the CSS tutorial series. In this lesson, I'll be showing how to use the next layer in the box model with padding. http://paulirish.com/2012/box-sizing-border-box-ftw/ Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 12![]() Play Video |
DRY Code and Grouping and Nesting Selectors The 12th tutorial in the CSS tutorial series. In this lesson, I'll be showing how to use CSS techniques to keep you from repeating yourself in code. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 13![]() Play Video |
Min and Max Width and Height To Control Your Elements The 13th tutorial in the CSS tutorial series. In this lesson, I'll be showing how to better control the dimensions of your elements with Min-width/height, max-width/height. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 14![]() Play Video |
Controlling Display with the Display Property The 14th tutorial in the CSS tutorial series. In this lesson, I'll be showing how to use the display property. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 15![]() Play Video |
Positioning Your Elements The 15th tutorial in the CSS tutorial series. In this lesson, I'll be showing how to position your elements with position: relative, absolute, and fixed. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 16![]() Play Video |
Creating a Two Column Layouts with Floats The 16th tutorial in the CSS tutorial series. In this lesson, I'll be showing how to create a two column layout and understanding a very useful property of CSS. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 17![]() Play Video |
CSS Pseudo Class Selectors The 17th tutorial in the CSS tutorial series. In this lesson, I'll be showing how to add some interesting effects and interactions with pseudo class selectors. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 18![]() Play Video |
Before and After Pseudo Elements The 18th tutorial in the CSS tutorial series. In this lesson, I'll be showing how to use the unique pseudo elements, Before and After. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 19![]() Play Video |
Child Selectors The 19th tutorial in the CSS tutorial series. In this lesson, I'll be showing how to use the child selector, to narrow the focus of what you are trying to style. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 20![]() Play Video |
Text Replacement The 20th tutorial in the CSS tutorial series. In this lesson, I'll be showing how to replace text with images using css. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 21![]() Play Video |
CSS Sprites The 21st tutorial in the CSS tutorial series. In this lesson, I'll be showing how to use css sprites to reduce page load time and minimize requests. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 22![]() Play Video |
What's Next The 22nd tutorial in the CSS tutorial series. In this lesson, I'll be showing were to go now that you have the css techniques to build websites. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 23![]() Play Video |
How To Make a Dropdown Menu With CSS The 23rd tutorial in the CSS tutorial series. In this lesson, I'll be showing the absolute basics of creating a dropdown navigation menu with css. In this video we build the frame for our menu. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 24![]() Play Video |
How To Make a Dropdown Menu With CSS Part 3 The 25th tutorial in the CSS tutorial series. In this lesson, I'll be showing the absolute basics of creating a dropdown navigation menu with css. In this video we add a 3rd layer to our navigation. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 25![]() Play Video |
Adjacent & Sibling Selectors Here in the 26th CSS tutorial, I show you how to use + and ~. These are two CSS selectors that can be very flexible when used in interesting ways. For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 26![]() Play Video |
What is CSS3? The 1st tutorial in the CSS3 tutorial series. In this lesson, I'll be describing css3 and what we will be doing with it in the next tutorials. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 27![]() Play Video |
Border Radius The 2nd tutorial in the CSS3 tutorial series. In this lesson, I'll be showing how to add rounded corners with css border-radius Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 28![]() Play Video |
Text Shadow The 3rd tutorial in the CSS3 tutorial series. In this lesson, I'll be showing how to add drop shadows to text using the text-shadow property. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 29![]() Play Video |
Box Shadow The 4th tutorial in the CSS3 tutorial series. In this lesson, I'll be showing how to add drop shadows to items on the page. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 30![]() Play Video |
Box Sizing - Border Box aka How To Fix the Box Model The 5th tutorial in the CSS3 tutorial series. In this lesson, I'll be showing how to make the box model more tolerable with Box Sizing: border-box http://paulirish.com/2012/box-sizing-border-box-ftw/ Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 31![]() Play Video |
Linear Gradients In CSS3 The 6th tutorial in the CSS3 tutorial series. In this lesson, I'll be showing how to add a gradient to your page. http://css3please.com/ Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |
Lecture 32![]() Play Video |
Animating States with Transition The 7th tutorial in the CSS3 tutorial series. In this lesson, I'll be showing you how to add animation on state change with transition. Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations |