This slide deck gives a quick overview of the W3C specification maturity process and the various levels of CSS.
This slide deck takes a look at a range of terms that are commonly used when defining aspects of CSS.
This slide deck answers some basic CSS questions: What is CSS? What are rulesets? How can you write CSS rules more efficiently?
This slide deck explores a range of different methods that you can use to apply CSS to web documents.
Simple selectors allow you to target HTML elements directly, as well as targeting elements that contain class or ID attributes.
Combinators allow you to combine individual selectors into new types of selectors including Descendant Combinators, Child Selectors, Adjacent Sibling Selectors and General Sibling Selectors.
This slide deck looks at how to style the
:visited pseudo-class selectors.
The user-action pseudo-classes,
:active, allow you to style elements based on the way that users interact with these elements.
:lang(c) selector targets any element that contains the
lang attribute and the relevant language subtag value.
The negation pseudo-class selector allows authors to target every element that doesn’t match the defined selector.
Structural pseudo-classes allow you to select elements based on their position within the overall document structure.
User interface pseudo-classes allow you to style various aspects of form-related elements.
Pseudo-elements allow us to style "fake" elements, elements that do not exist in the document tree, such as
Attribute selectors are used to select elements based on their attributes or their attribute and values.
CSS inheritance is where CSS properties are passed down from parent elements to descendant elements.
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.
The CSS box model describes the rectangular boxes that are created for every element in the document tree.
position property specifies how HTML element are positioned. The possible values are:
left properties allow authors to define the location of positioned elements.
This slide deck looks at the
z-index property as well as exploring the stacking context in depth.
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.
The block formatting context is important to understand as it affects aspects of the layout including floats, clear, and margins.
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.
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.
box-shadow property allows you to apply one or more shadows to any box - including outer and inner box shadows.
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.
A quick introduction to VoiceOver commands.