Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Advanced CSS Training to your Wishlist.

Add to Wishlist

Advanced CSS Training

Get Trained in CSS and take a deep dive into Advanced CSS
2.5 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
54 students enrolled
Published 7/2012
30-Day Money-Back Guarantee
  • 2.5 hours on-demand video
  • 48 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?

In this Advanced CSS Tutorial, you will learn to use CSS to format forms, create list-based navigation, do advanced page layouts, and create stunning background effects. You will also get CSS Training in coding conventions and shorthand properties.

Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 65 Lectures Collapse All 65 Lectures 05:50:59
Advanced CSS Class Files
1 Lecture 00:00
Advanced CSS Class Files
570.6 kB
Positioning and Visibility
12 Lectures 43:58
Element Flow The flow is the way in which elements are laid out. By default, sibling elements are all in the same flow and positioned statically on the page; the order elements appear on the page is the same as the order they appear in the code. With CSS, we can move elements into a separate flow. T…
Preview 04:36

Relative Positioning Demo

Duration: 15 to 25 minutes. In this exercise you will build a house from its individual parts using CSS positioning. Open  PositioningAndVisibility/Exercises/Positioning.html  in your browser. It will look like this: Your job is to build the house in the center of the green box. It will take some tr…
Positioning - Exercise

Solution: PositioningAndVisibility/Solutions/PositioningAbsolute.html ---- C O D E O M I T T E D ---- #main { position:absolute; top:150px; left:50px; } #roof { position:absolute; top:60px; left:34px; } #chimney { position:absolute; top:65px; left:261px; } #door { position:absolute; top:242px; left:…
Positioning - Exercise (Solution)

Z-index The  z-index  property specifies the stack level of an element on the page compared to other elements in its same flow. It takes a number as a value. The higher an element's  z-index , the closer to the user it appears. Code Sample: PositioningAndVisibility/Demos/Zindex.html CSS Z-Index Webu…

Visibility The  visibility  property is used to make an element invisible. Possible values are: visible hidden The major difference between setting an element's  visibility  to  hidden  and setting its  display  to  none  is that an hidden element still affects the layout of the page; whereas an ele…
Visibility & Display

Z-index and Display Demo

Float Float can be applied to any element that is not absolutely positioned. It is used to specify whether an element should float to the left, to the right, or not at all. Possible values are listed below. left right none When an element floats left it will be aligned to the left of the containing…

Clear The  clear  property is used to specify whether content that is flowing to the side of a floating block should drop down beneath that block. Possible values are shown below. left right both none The following files demonstrate how clear and float can be used in combination with positioning to…

Float and Clear Demo

View  this video  for an illustration on the difference between static, relative and absolute positioning.
Extra: Static vs. Relative vs. Absolute
Advanced CSS Page Layout
9 Lectures 38:47
Resetting Styles Web browsers make certain assumptions that can sometimes interfere with layouts. Designers often have to undo or override these defaults. It has become a common practice to do so from the outset. This practice has come to be known as "resetting" styles. A very simple reset that affe…
Resetting Styles

Full Width Layouts Pages designed to use the full width of the browser window are often described as having a "fluid" or "liquid" layout. That's because one or more of the columns must be automatically resized according to the size of the browser window. Two-column We'll start with the simple two-co…
Full Width Layouts

Fluid Layout Demo

Three Column Fluid Layout Demo

Positioning the Headings Duration: 15 to 25 minutes. In this exercise, you will position the heading elements within the columns, so the page looks like this: Open  CssPageLayout/Exercises/fluid-three-column.html  in your browser. It should look familiar. Open  CssPageLayout/Exercises/fluid-three-co…
Positioning the Headings - Exercise

Solution: CssPageLayout/Solutions/fluid-three-column.html ---- C O D E O M I T T E D ---- Menu This column is fixed. This column is fixed. This column is fixed. This column is fixed. This column is fixed. Sidebar This column is fixed. This column is fixed. This column is fixed. This column is fixed.…
Positioning the Headings - Exercise (Solution)

Fixed Width Layouts Changing our fluid layouts to fixed layouts is easy. In fact, the challenge to the last exercise gets us most of the way there. Instead of setting the width to a percentage value, we set it to a fixed-width value in pixels and we set margin  to  auto : #wrapper { border:1px solid…
Fixed Width Layouts

Laying out a Page - The power of float Duration: 30 to 45 minutes. Creating well-designed pages is more art than science. Somebody has to come up with the design. You don't have to be a designer to be a CSS master. You just have to be able to turn a designer's design into a web page. In this exercis…
Laying out a Page - The power of float - Exercise

Solution: CssPageLayout/Solutions/services.html ---- C O D E O M I T T E D ---- our services Services Name One Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique, felis ut vehicula laoreet, nunc dolor bibendum tortor, a faucibus eros tortor sed nunc. Aliquam eget arcu. Nam sem j…
Laying out a Page - The power of float - Exercise (Solution)
CSS Shorthand Properties
9 Lectures 23:20
What is CSS Shorthand? A CSS shorthand property is a property that can take multiple values, with each value relating to a different regular CSS property. Values are separated by spaces as shown below: Syntax selector { property: value1 value2 value3; } In this lesson, we will cover the following sh…
What is CSS Shorthand?

Shorthand Margin and Padding The margin and padding shorthand properties interpret values in the same way: One value: sets all four sides uniformly. Two values: first value sets top and bottom, second value sets right and left. Three values: first value sets top, second value sets both right and lef…
Shorthand Margin and Padding

Shorthand Border TThe shorthand for  border  is shown below: Syntax selector { border: border-width border-style border-color; } The shorthand for  border  can also be applied individually to  border-top ,  border-right ,  border-bottom  and  border-left . For example, the following syntax demonstra…
Shorthand Border

Shorthand Backgrounds The  background  property is used to set the individual properties for  background-color ,  background-image ,  background-repeat ,  background-attachment  and  background-position . Note that order matters (although some browsers may show some leniency). Syntax selector { back…
Shorthand Backgrounds

Shorthand Fonts The  font  property, which is well supported, is used to set the individual properties for  font-style ,  font-variant ,  font-weight ,  font-size ,  line-height  and  font-family . Syntax selector { font: font-style font-variant font-weight font-size/line-height font-family; } When…
Shorthand Fonts

Shorthand Lists The  list-style  property is used to set the  list-style-type , the  list-style-position  and the  list-style-image  properties. The order of values is not important. Syntax selector { list-style: list-style-type list-style-position list-style-image; } CSS Initial Values for the  lis…
Shorthand Lists

Shorthand CSS Demo

Using Shorthand Duration: 10 to 20 minutes. In this exercise, you will modify  CssShorthand/Exercises/Shorthand.css  to use shorthand properties wherever possible. Check the file size of  CssShorthand/Exercises/Shorthand.css . It should be 1.33KB. Open  CssShorthand/Exercises/Shorthand.css  for edit…
Using Shorthand - Exercise

Solution: CssShorthand/Solutions/CssShorthand.css h1, h2, h3, h4, h5, h6 { font-family: tahoma; color: #00F; } p { font: .75em verdana, sans-serif; color: #000; } li { font: 1em tahoma, sans-serif; color: #000; } #header { height: 75px; background: #fff url('Images/CssShorthandHeader.gif') repeat-x;…
Using Shorthand - Exercise (Solution)
CSS Lists as Hierarchical Navigation
8 Lectures 29:45
Menus as Lists Let's start by marking up the first list shown above as HTML and giving the list an id of "mainMenu": Home Services Products Support Blog About Contact With no CSS, this menu will display as follows:   Let's now see how we can turn the list into a stylish navigation menu. CSS Horizont…
Menus as Lists

CSS Vertical Menu Vertical menus are created in much the same way, but they're even easier. The steps below show how to create a menu that looks like this:   Remove all the default list styling.  Again we use Eric Meyer's reset CSS. Set the  width  and  margin  of the menu.  This time will make the…
CSS Vertical Menu

CSS Dynamic Menus Dynamic menus have long been popular on the web. Until relatively recently, it was necessary to use JavaScript to create these menus. The wider support of the  :hover  pseudo-class changes that. In this section, we'll show you how to create dynamic menus using pure CSS. The dynamic…
CSS Dynamic Menus

Basic CSS List Menu Demo

Dynamic CSS List Menu Demo

Combining Dropdown and Flyout Menus Duration: 20 to 30 minutes. In this exercise, you'll modify a working dropdown menu so that third-level options will flyout to the right as shown in the screenshot below: Open  CssListMenus/Exercises/CssMenu-mixed.html  in your browser. Hover over the  About  menu…
Combining Dropdown and Flyout Menus - Exercise

Solution: CssListMenus/Solutions/CssMenu-mixed.html ---- C O D E O M I T T E D ---- ---- C O D E O M I T T E D ---- Challenge Solution: CssListMenus/Solutions/CssMenu-mixed-challenge.html ---- C O D E O M I T T E D ---- /*third level*/ #mainMenu li ul ul { position:absolute; width:150px; left:148px;…
Combining Dropdown and Flyout Menus - Exercise (Solution)

Accessibility Navigation menus marked up as lists are much more accessible than menus marked up in tables or nested divs. One way to get a feel for this is to turn off CSS in the browser to see if the menu is still navigable. In Firefox, you can do this by choosing View > Page Style > No Stylefrom t…
CSS Background Tricks
11 Lectures 39:12
Rounded Corner Boxes There are many different methods of creating rounded-corner boxes using CSS. Most methods use background images and involve extra non-semantic HTML markup. Unfortunately, until  CSS3  is released and supported, designers who want rounded corners may be forced to compromise on se…
Rounded Corner Boxes

Flexible Rounded Corner Boxes Demo

Creating a Rooftop Panel Duration: 20 to 30 minutes. In this exercise you will use some of the techniques you have learned to create rounded corners to create a rooftop panel that looks like this:   Open  CssBackgroundTricks/Exercises/rooftop.html  in your editor. Fill in the three empty rules to cr…
Creating a Rooftop Panel - Exercise

Solution: CssBackgroundTricks/Solutions/rooftop.html ---- C O D E O M I T T E D ---- ---- C O D E O M I T T E D ----
Creating a Rooftop Panel - Exercise (Solution)

Tabbed Navigation The screenshot below shows and example of a page that uses tabbed navigation: To create the navigation bar, we combine some of the techniques we have learned thus far. Let's start by looking at the code: Code Sample: CssBackgroundTricks/Demos/tabbedMenus.html ---- C O D E O M I T T…
Tabbed Navigation

Rounded NavigationTabs Demo

Tabbed Navigation: Rounding the Corners Duration: 15 to 25 minutes. In this exercise, you will modify the tabbed menu we just showed so that the top corners of each menu item are rounded like this: Open  CssBackgroundTricks/Exercises/tabbedMenus.html . Modify the code so that it uses  hole.gif  from…
Tabbed Navigation: Rounding the Corners - Exercise

Solution: CssBackgroundTricks/Solutions/tabbedMenus.html Home Services Products Support Blog About Contact "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…
Tabbed Navigation: Rounding the Corners - Exercise (Solution)

Drop Shadows A drop shadow effect can be created by nesting one  div  inside of another  div . Using relative positioning, the nested  div , which will contain the content, can be pushed from the bottom right, thus allowing the outer  div  to show through. The outer  div  is then given a background…
Drop Shadows

CSS Sprites A CSS sprite is an image file that contains several graphics used on a web page. By showing different parts of the sprite in different locations, it appears that there are several different images, but they are all contained in a single file, which translates to a single download. As a s…
CSS Sprites

Tabbed Navigation with Sprites Demo
Laying out and Styling Forms with CSS
7 Lectures 26:45
Laying out the Questions Most forms can be thought of as a series of questions: What is your first name? What is your last name? What company do you work for? But instead of being laid out as questions, they are presented as answer spaces (form controls) preceded by labels: First Name: _____________…
Laying out the Questions

Creating the Form Now we'll begin creating the form. We won't add the form controls just yet. First, we want to capture the structure within a form: Code Sample: CssForms/Demos/JobApplication2.html Job Application Job Information Job of Interest (Sales Manager, Account Executive, Receptionist, Marke…
Creating the Form

Creating the Form Demo

Reset Revisited In the Page Layout lesson, we introduced the following simple CSS reset: * { margin:0; padding:0; border:0; } As we noted there, this effectively does away with all margin, padding and borders for every element. This includes form controls. However, resetting form control styles has…
Styling the Form

Styling the Form Demo

Expanding the Form Duration: 10 to 25 minutes. In this exercise, you will add an "Education" section to the form. Open  CssForms/Exercises/JobApplication.html  in your editor. Expand the form to cover the following: Education Degree 1 Institution Type of Degree Year Completed Comments Degree 2 Insti…
Expanding the Form - Exercise

Solution: CssForms/Solutions/JobApplication.html Job Application ---- C O D E O M I T T E D ---- Education Degree 1 Institution: Type of Degree: Please select... High School Bachelors Masters PhD Year Completed: Comments: Degree 2 Institution: Type of Degree: Please select... High School Bachelors M…
Expanding the Form - Exercise (Solution)
CSS Best Practices
8 Lectures 30:46
Considerations In compiling this list of best practices, we've considered the following: Cleaner code.  Does the practice result in cleaner, better organized, more reusable code? Faster development.  Does the practice lead to faster development? Speedier download.  Does the practice result in speedi…
CSS Best Practices

CSS Best Practices Demo

Quirks Mode Modern browsers have at least two modes in which they can display content: Standards-compliant mode Quirks mode In standards-compliant mode, the browser does its best to display the page according to the latest CSS standards. In quirks mode, the browser displays the page as if it were an…
Quirks Mode

Internet Explorer Conditional Statements Internet Explorer provides a way of adding conditional statements that allow the designer to specify which version(s) of the browser should display certain sections. These conditional statements appear as simple HTML comments to other browsers (e.g, Firefox)…
Internet Explorer Conditional Statements

Internet Explorer Conditional Statements Demo

Common Browser Bugs / Issues Positioning Legends In the  Styling Forms with CSS lesson , we pointed out that the positioning of legends gets messed up in Internet Explorer when the  border  fo the  fieldset  is set to 0. For example, take a look at the simplified form below: Code Sample: BrowserBugs…
Common Browser Bugs / Issues

Fixing the Box Model Bug (optional) Duration: 15 to 25 minutes. In this exercise, you will use Intenet Explorer's conditional comments to fix the box model bug. Open  BrowserBugs/Exercises/BoxModel.html  for editing. Notice that no  DOCTYPE  is declared, so the page will be rendered in quirks mode.…
Fixing the Box Model Bug (optional) - Exercise

Solution: BrowserBugs/Solutions/BoxModel.html Hi there! --200px wide-- --300px wide--
Fixing the Box Model Bug (optional) - Exercise (Solution)
Browser-compatibility Issues
0 Lectures 00:00
About the Instructor
3.9 Average rating
27 Reviews
740 Students
12 Courses
Global training company. Trained over 26,000 students. Thousands of student testimonials.
  • Founded in 2003.
  • Webucator provides technical and business training.
  • Webucator is a Microsoft Certified Partner for Learning Solutions (CPLS)
  • Webucator is a Registered Education Provider (R.E.P.) approved by PMI to issue professional development units (PDUs) for its training courses.
  • Webucator has a GSA Contract (GS-35F-0556S).
  • We have provided training to over 70% of the Fortune 100 companies (See Partial Client List).
Why should you choose us?
Report Abuse