CSS Foundations
Cascading Style Sheets (CSS) is a language used to describe the visual look of a web page. Using CSS, it is possible to change colors, margin, padding, fonts, and much more. This content will consolidate the previously released CSS Foundations and CSS3 in a brand new and updated series.
11 badges • 46 videos
-
Getting Started with CSS
Learn basic CSS concepts and how to add CSS to a page.
-
Selectors
Selectors allow for styling to be applied to particular page elements. This critical concept makes it easy to choose a specific page element and assign CSS.
-
Advanced Selectors
Many advanced CSS selectors help keep our markup clean, semantic and flexible by targeting specific elements without the need of a class or an ID.
-
Values and Units
Every CSS property has a type of value it can accept, such as a predefined keyword, a length unit, or a URL. In this Deep Dive, we'll cover common values and units CSS properties accept.
-
Text, Fonts, and Lists
Text has a significant effect on how we view a web page, and CSS has many options for defining text styles. Font properties also enable us to change the appearance of text by assigning a font family, font size, thickness and more. In this Deep Dive, we’ll learn common font properties we can use to enhance our text, along with ways to style our HTML lists.
-
The Box Model
Every HTML element, no matter how big or small, can be thought of as a rectangular box made up of content, padding, borders and margins. The Box Model is the basis of CSS layout and positioning, and it dictates how elements are displayed and interact with each other.
-
Backgrounds and Borders
With CSS, any element can have a background and border applied, and certain properties affect how they appear. In this Deep Dive, we'll explore common CSS background and border properties, along with ways to add drop shadows and inner shadows to HTML elements.
-
Web Typography
Web typography is an exciting and rapidly evolving area of CSS, wherein layout engines like webkit are pushing beyond W3C standards. In this Deep Dive, we’ll cover topics such as best practices for choosing a typeface, text layout, responsive text and vertical rhythm. We'll also explore font resources like the @font-face rule, and other detailed font features and techniques that will enhance our text.
-
CSS Gradients
CSS gradients allow us to display smooth transitions between two or more colors. In this Deep Dive, we'll explore linear and radial CSS gradients, along with the differences in browser syntax. Released: March 21, 2013
-
Flexbox and Multi-Column Layout
With CSS multi-column layouts, we can easily define multiple columns of text. One of the benefits of using CSS-based columns is flexibility; content flows from one column to another, and the number of columns can vary depending on the size of the device or viewport. The CSS3 Flexible Box, or flexbox, is a powerful new feature that makes CSS more efficient for layout. Elements can be dynamically rearranged on the page, laid out in any direction, have flexible dimensions to adapt to the display space, and much more! Released: April 1, 2013
-
Transitions and Transforms
CSS transition properties provide a way to control the animation speed in changing the properties over a given duration. We can also specify time intervals, durations and timing functions that follow a customizable acceleration curve. CSS transforms allow us to change the position of elements without disrupting the normal document flow. Transforms are implemented using a set of CSS properties that let us apply transformations like rotation, skewing, scaling and translation in both the plane and 3D space. Released: May 5, 2013
-
Stage Coming Soon
CSS Animations
CSS animations make it possible to animate transitions from one CSS style to another. Animations change a CSS property over time using keyframes that indicate the start/end states of the animations, and intermediate points along the way. We can easily control animations by including iteration values, delaying their start time, play states and more.
-
Stage Coming Soon
Media Queries
Media Queries allow designers to apply CSS declarations dynamically based on client conditions. Using media features like width, height, and color, we can tailor our content to a wide range of devices and resolutions without having to change the content itself.
