CSS Slide Decks

201: Levels of CSS

38 slides, Level: Beginner

This slide deck gives a quick overview of the W3C specification maturity process and the various levels of CSS.

202: Common terms

180 slides, Level: Beginner

This slide deck takes a look at a range of terms that are commonly used when defining aspects of CSS.

203: CSS rulesets

90 slides, Level: Beginner

This slide deck answers some basic CSS questions: What is CSS? What are rulesets? How can you write CSS rules more efficiently?

204: Applying CSS

85 slides, Level: Beginner

This slide deck explores a range of different methods that you can use to apply CSS to web documents.

205-01: Simple selectors

101 slides, Level: Beginner

Simple selectors allow you to target HTML elements directly, as well as targeting elements that contain class or ID attributes.

205-02: Combinator selectors

81 slides, Level: Beginner

Combinators allow you to combine individual selectors into new types of selectors including Descendant Combinators, Child Selectors, Adjacent Sibling Selectors and General Sibling Selectors.

205-03: Link pseudo-classes

36 slides, Level: Beginner

This slide deck looks at how to style the :link and :visited pseudo-class selectors.

205-04: User-action pseudo-classes

52 slides, Level: Beginner

The user-action pseudo-classes, :focus, :hover and :active, allow you to style elements based on the way that users interact with these elements.

205-05: The language selector

30 slides, Level: Intermediate

The :lang(c) selector targets any element that contains the lang attribute and the relevant language subtag value.

205-06: The negation pseudo-class

34 slides, Level: Advanced

The negation pseudo-class selector allows authors to target every element that doesn’t match the defined selector.

205-07: Structural pseudo-classes

357 slides, Level: Intermediate

Structural pseudo-classes allow you to select elements based on their position within the overall document structure.

205-08: User-interface pseudo-classes

76 slides, Level: Beginner

User interface pseudo-classes allow you to style various aspects of form-related elements.

205-09: Pseudo-elements

158 slides, Level: Intermediate

Pseudo-elements allow us to style "fake" elements, elements that do not exist in the document tree, such as ::first line, ::first letter, ::before and ::after.

205-10: Attribute selectors

130 slides, Level: Intermediate

Attribute selectors are used to select elements based on their attributes or their attribute and values.

206: CSS Inheritance

98 slides, Level: Beginner

CSS inheritance is where CSS properties are passed down from parent elements to descendant elements.

207: CSS cascade

173 slides, Level: Intermediate

Browsers often have to deal with situations where more than one declaration refers to the same element and property. But which declaration wins? The winner is determined by the rules of the cascade.

208: CSS box model

207 slides, Level: Intermediate

The CSS box model describes the rectangular boxes that are created for every element in the document tree.

209: CSS positioning

312 slides, Level: Advanced

The position property specifies how HTML element are positioned. The possible values are: static, relative, absolute, fixed, and sticky.

210: Top, right, bottom, left

314 slides, Level: Advanced

The top, right, bottom, and left properties allow authors to define the location of positioned elements.

211: z-index and the stacking context

252 slides, Level: Advanced

This slide deck looks at the z-index property as well as exploring the stacking context in depth.

212: CSS floats

152 slides, Level: Intermediate

Before flexbox and grids were introduced, floats were the best method available for laying out web components and layouts. Although floats seem simple, they can be very frustrating for those who do not understand the finer details.

213: Block formating context

151 slides, Level: Intermediate

The block formatting context is important to understand as it affects aspects of the layout including floats, clear, and margins.

214-01: CSS property value syntax

165 slides, Level: Intermediate

This slide deck will give you a basic understanding of the W3C property/value syntax. This will help you understand the various W3C CSS Specifications.

214-02: Property - color

488 slides, Level: Intermediate

The color property sets the foreground color value of an element’s text content. It also sets the color of the text decoration unless the <'text-decoration-color'> is specifically defined by the user.

214-03: Property - box-shadow

146 slides, Level: Beginner

The CSS3 box-shadow property allows you to apply one or more shadows to any box - including outer and inner box shadows.

214-05: Property - line-height

182 slides, Level: Intermediate

CSS line-height is one of the fundamentals of CSS. It can be used to make content easier to read and comprehend, control the vertical rhythm of layouts and can even be used to center content vertically.

301: VoiceOver

12 slides, Level: Beginner

A quick introduction to VoiceOver commands.