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
$50
Take This Course
  • Lectures 65
  • Length 6 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2012 English

Course Description

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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Advanced CSS Class Files
570.6 kB
Section 1: Positioning and Visibility
Article
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…
Absolute Positioning Demo
Preview
08:16
Relative Positioning Demo
08:59
Article
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…
Article
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:…
Article
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…
Article
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…
Z-index and Display Demo
07:28
Article
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…
Article
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
08:39
Article
View  this video  for an illustration on the difference between static, relative and absolute positioning.
Section 2: Advanced CSS Page Layout
Article
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…
Article
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…
Fluid Layout Demo
13:01
Three Column Fluid Layout Demo
09:56
Article
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…
Article
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.…
Article
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…
Article
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…
Article
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…
Section 3: CSS Shorthand Properties
Article
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…
Article
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…
Article
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…
Article
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…
Article
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…
Article
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 CSS Demo
13:05
Article
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…
Article
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;…
Section 4: CSS Lists as Hierarchical Navigation
Article
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…
Article
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…
Article
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…
Basic CSS List Menu Demo
11:00
Dynamic CSS List Menu Demo
08:55
Article
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…
Article
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;…
Article
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…
Section 5: CSS Background Tricks
Article
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…
Flexible Rounded Corner Boxes Demo
09:43
Article
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…
Article
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 ----
Article
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…
Rounded NavigationTabs Demo
10:05
Article
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…
Article
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…
Article
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…
Article
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…
Tabbed Navigation with Sprites Demo
06:06
Section 6: Laying out and Styling Forms with CSS
Article
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: _____________…
Article
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 Demo
06:56
Article
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 Demo
09:22
Article
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…
Article
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…
Section 7: CSS Best Practices
Article
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 Demo
05:37
Article
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…
Article
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 Demo
08:03
Article
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…
Article
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.…
Article
Solution: BrowserBugs/Solutions/BoxModel.html Hi there! --200px wide-- --300px wide--
Section 8: Browser-compatibility Issues

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Webucator Training, 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?

Ready to start learning?
Take This Course