CSS Advanced

CSS Advanced

Our sojourn into the world of Cascading Style Sheets ends with these CSS Advanced lessons. The skill level is aimed at people with CSS experience, or who have completed the basic and intermediate tutorials. By the end of the CSS Advanced Tutorials we will have covered all the CSS properties and selectors available for use in the 2.1 specification. After finishing these lessons we will have completed our studies of HTML and CSS and will finish with a case study in how to write a website from scratch.

The Advanced Lessons

In the CSS Advanced lessons we begin by looking at generated content and then take a final look at the CSS selectors by examining attribute selectors. We then see how to use CSS for styling links and tables and then investigate navigation bars and page layout. After this we look at the printed page and the few CSS Properties we haven't covered before. We finish our exploration of CSS with a summary where we go over everything we have learned in this section.

Lesson  1: Generated Content

In this lesson we explore generated content and how we can use this in conjunction with the :before and :after pseudo-elements to insert information into our web pages. We also learn how to generate quotes and how to add and reset counters for an element.

Lesson  2: Attribute Selectors

In lesson 4 of the CSS Basic Tutorials we looked at some basic tag selectors (universal, tag, class and id). In lessons 3 and 4 of the CSS Intermediate Tutorials we looked at advanced tag selectors and pseudo selectors, respectively. In this lesson we take a final look at selectors by looking at attribute selectors and how we can use them to select and style our HTML.

Lesson  3: Styling Lists

Wouldn't it be really great to do some funky stuff to our lists, to really make them stand out from the crowd. CSS gives us four properties to position, style and add types and images to our lists. In this lesson we learn how to use the CSS properties to do this.

Lesson  4: Styling Tables

HTML gives us a lot of tags to use when creating tabular data. CSS adds five properties to this list to give us even more control over the presentation of our tables. In this lesson we explore these properties which allow us to collapse and space our table borders and how to handle empty cells. We can decide where to put table captions and whether to use automatic or fixed table layouts.

Lesson  5: Navigation

Navigation bars are key to allowing your users access to the pages of your site and are instantly recognizable to the vast majority of web users. Navigation bars can be either vertical or horizontal and are just basically unordered lists of links that are glammed up with CSS. Main navigation bars are generally horizontal but you often find vertical navigation bars in a sidebar of a web page. In this lesson we learn how to utilize CSS along with unordered lists to create both.

Lesson  6: Layout

At the heart of web design is page layout and before we even begin cutting the code it's good practice to sit down with a pencil and paper and work out a layout for the data we wish to present. There are several things to consider when creating a layout such as the monitor width and the content we wish to display. There are two widely used layout styles for approaching these issues, fixed-width and liquid. In this lesson we will focus on fixed-width layouts.

Lesson  7: The Printed Page

Its normal practice for users to want to print content from your site, but what might look great on screen may look terrible on paper. Also using half an ink cartidge may deter users from printing information from your site again. In this lesson we learn how to use the 'print' media type along with page breaks to control print flow.

Lesson  8: Other Properties

Our Journey into the world of CSS is drawing to a close but we still have a final few properties to discuss. In this lesson we learn about text direction and how to outline elements of any shape without impacting the box model.

Lesson  9: CSS Advanced Summary

To conclude the CSS Advanced Tutorials section, we bring all we have learnt together in a web page utilizing the knowledge we have gathered from this section. We will use a selection of the CSS properties from the CSS Advanced Tutorials and see what can be achieved with them.

Related Tutorials/Quizzes

CSS Basics - The Basic Lessons.

CSS Intermediate - The Intermediate Lessons.

What's Next

In Lesson 1 we gather the tools required to create our HTML and CSS for the advanced tutorials and make a folder to store our CSS Advanced practical files in. After this we explore generated content and do our first practical in this section, before viewing the results in a default web browser.

Next >> Generated Content

go to home page Homepage go to top of page Top