html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Intermediate

CSS 1/2 Intermediate

Our journey into the world of Cascading Style Sheets continues with these CSS 1/2 Intermediate lessons. The skill level is aimed at people with some CSS experience. An introduction to CSS is given in the CSS 1/2 Basics section of this website and is worth a visit if you are completely new to CSS. By the end of the CSS 1/2 Intermediate Tutorials we will have enough CSS knowledge to make our webpages stand out from the crowd and be ready to take a final look at CSS with the CSS 1/2 Advanced Tutorials.

The Intermediate Lessons

In the CSS 1/2 Intermediate lessons we begin by looking at backgrounds and how they give our canvasses colour, take a final look at the CSS 'Box Model' before examining advanced tag selectors and pseudo selectors. We explain how inheritance works and then investigate specificity and the cascade. After this we explore how to position and display our elements and then bring everything together in the intermediate summary.

Lesson  1: Backgrounds

In Lesson 1 we explore backgrounds and how they bring our blank canvasses to life. We can use a colour for the background or an image that can be attached, positioned and repeated as required. We look at the CSS background properties that let us do this and increase our knowledge in this lessons practical.

Lesson  2: A Final Look At The Box Model

In lessons 7, 8 and 9 of the CSS Basic Tutorials we looked at the box model, and the padding, margin and border properties which form the periphery of the box model. In this lesson we take a final look at the box model by exploring box model dimensions. We look at all the CSS box model dimension properties and see the impact these have on our images and text.

Lesson  3: Advanced Tag Selectors

In lesson 4 of the CSS Basic Tutorials we looked at some basic tag selectors (universal, tag, class and id). In this lesson we take a final look at tag selectors and how we can combine them, narrowing down what we actually want to select and style.

Lesson  4: Psuedo Selectors

In lesson 3 of the CSS 1/2 Intermediate Tutorials we took our final look at tag selectors. We continue our study of selectors by looking at pseudo selectors and how to use them. We will begin by looking at the pseudo-class selectors and their uses. Afterwards we will explore the different pseudo-element selectors and how they are applied.

Lesson  5: Style Inheritance

So you may be asking, what is style inheritance? Well, style inheritance is where CSS properties applied via a style to a tag, are also applied to tags nested within that tag. Inheritance doesn't only apply to direct descendants of a tag either, but will be applied to all generations of that tag. Not all CSS properties are inheritable for reasons that will become clear throughout this lesson, where we explore inheritance and how it helps to streamline our CSS.

Lesson  6: Specificity (the cascade)

Well as promised in earlier tutorials we finally get to learn about Specificity and the cascade. In this lesson we look into specificity, find out why and how it selects styles. We also investigate why, when we create a style, the style seems to be ignored because of the specificity.

Lesson  7: Positioning

CSS allows us to position elements in several ways using the float and position CSS properties. In this lesson we explore these two properties, along with the other CSS properties we use in conjunction with them, to position our elements exactly where we want them.

Lesson  8: Display

With CSS we can change how an element looks or whether an element is visible at all. We have the opportunity to decide what to do with box overspill and how we handle it. CSS also allows us to change the appearance of the cursor, to notify users that an element is being actioned, or a mouse action is available on it. In this lesson we learn how to use the various CSS display properties to do these things.

Lesson  9: CSS 1/2 Intermediate Summary

To conclude the CSS 1/2 Intermediate 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 1/2 Intermediate Tutorials and see what can be achieved with them.

Related Tutorials

CSS 1/2 Basics - The Basic Lessons.

CSS 1/2 Advanced - The Advanced Lessons.

What's Next

In Lesson 1 we gather the tools required to create our HTML and CSS for the intermediate tutorials and make a folder to store our CSS 1/2 Intermediate practical files in. After this we explore the CSS background properties and do our first practical in this section, before viewing the results in a default web browser.

Next >> Backgrounds

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.