Loading lesson path
CSS
Advanced visual effects, richer styling techniques, and CSS patterns you layer on top of the basics.
CSS Rounded Corners
Sass Tutorial
Challenge: CSS Rounded Corners Test your understanding of CSS Rounded Corners by completing a small coding challenge.
CSS Border Images With the CSS border-image property, you can define an image to be used as the border around an element. CSS border-image Property The border-image property allows you to define an i…
Challenge: CSS Border Images Test your understanding of CSS Border Images by completing a small coding challenge.
CSS Multiple Backgrounds CSS allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the image…
The CSS background-size Property The background-size property allows you to specify the size of background images. The background size can be specified in lengths, percentages, or by using one of the…
CSS background-origin Property The CSS background-origin property specifies where the background image is positioned. This property can have one of the following values: padding-box - The background…
CSS background-clip Property The CSS background-clip property defines how far the background (color, image, or gradient) should extend within an element. This property can have one of the following v…
Challenge: Backgrounds Test your understanding of CSS by completing a small coding challenge.
CSS supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity. RGBA Colors RGBA color values are an extension of RGB colors with an alpha channel - which sp…
CSS Color Keywords CSS has some special predefined color keywords that can be used with properties like color, background-color and border-color. The special keywords are: transparent currentcolor in…
Challenge: CSS Colors Advanced Test your understanding of advanced CSS Colors by completing a small coding challenge.
CSS Gradients The CSS gradient functions let you display smooth transitions between two or more colors within an element. CSS defines three types of gradients: Linear Gradients - The color transition…
CSS radial-gradient() Function The CSS radial-gradient() function creates a radial gradient. A radial gradient defines a color transition that goes goes out from a central point. A radial gradient re…
CSS conic-gradient() Function The CSS conic-gradient() function creates a conic gradient. A conic gradient is a gradient with color transitions rotated around a center point. To create a conic gradie…
Challenge: Gradients Test your understanding of CSS by completing a small coding challenge.
With CSS you can create shadow effects! CSS Text Shadow The CSS text-shadow property applies a shadow to text. In its simplest use, you only specify the horizontal and the vertical shadow. In additio…
CSS box-shadow Property The CSS box-shadow property is used to apply one or more shadows to an element. Box shadow In its simplest use, you can only specify the horizontal and the vertical offset of…
Challenge: Shadows Test your understanding of CSS by completing a small coding challenge.
CSS Text Effects CSS has some properties to handle text overflow, word wrapping, line breaking rules and writing modes. In this chapter you will learn about the following properties: text-overflow Sp…
Challenge: CSS Text Effects Test your understanding of CSS Text Effects by completing a small coding challenge.
CSS Custom Fonts
Challenge: CSS Custom Fonts Test your understanding of CSS Custom Fonts by completing a small coding challenge.
CSS 2D Transforms The CSS transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, and skew elements. Mouse over the element below to see a…
The CSS scale() Function The scale() function increases or decreases the size of an element (according to the parameters given for the width and height). The following example increases the <div> ele…
The CSS skewX() Function The skewX() function skews an element along the X-axis by the given angle. The following example skews the <div> element 20 degrees along the X-axis: Example div { transform:…
Challenge: CSS Transforms Test your understanding of CSS Transforms by completing a small coding challenge.
CSS 3D Transforms The CSS transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, and skew elements. Mouse over the elements below to see…
Challenge: CSS 3D Transforms Test your understanding of CSS 3D Transforms by completing a small coding challenge.
CSS Transitions CSS transitions allows you to change property values smoothly, over a given duration. Mouse over the element below to see a CSS transition effect: CSS The CSS transition Property To c…
CSS Transition Speed Curve The transition-timing-function property specifies the speed curve of the transition effect. This property can have one of the following values: ease - transition will start…
Challenge: CSS Transitions Test your understanding of CSS Transitions by completing a small coding challenge.
CSS Animations CSS allows animation of HTML elements without using JavaScript! CSS What are CSS Animations? An animation lets an element gradually change from one style to another. You can change as…
CSS animation-delay Property The animation-delay property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation: Example div { wid…
This page covers the CSS animation direction, fill mode, and the shorthand property. CSS animation-direction Property The animation-direction property specifies whether an animation should be played…
Challenge: CSS Animations Test your understanding of CSS Animations by completing a small coding challenge.
CSS Tooltip
CSS Tooltip Arrows
Challenge: CSS Tooltips Test your understanding of CSS Tooltips by completing a small coding challenge.
CSS Styling Images
CSS Image Effects
CSS Image Hover Overlays
Challenge: CSS Image Styling Test your understanding of CSS Image Styling by completing a small coding challenge.
CSS Responsive Modal Images
Challenge: CSS Image Modal Test your understanding of CSS Image Modals by completing a small coding challenge.
Centering Images With CSS, you can center images with several methods. An image can be centered horizontally, vertically, or both. Center an Image Horizontally To display a horizontally centered imag…
Challenge: CSS Image Centering Test your understanding of CSS Image Centering by completing a small coding challenge.
CSS Filters The CSS filter property is used to add visual effects (like blur and saturation) to elements. Within the filter property, you can use the following CSS functions: blur() brightness() cont…
Challenge: CSS Image Filters Test your understanding of CSS Image Filters by completing a small coding challenge.
With CSS it is easy to shape (clip) images to circles, ellipses and polygons. CSS clip-path Property and the circle() Function The clip-path property lets you clip an element to a basic shape. The ci…
Challenge: CSS Image Shapes Test your understanding of CSS Image Shapes by completing a small coding challenge.
CSS object-fit Property The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container. This property can take one of the following values: fill - This…
Challenge: CSS object-fit Test your understanding of CSS object-fit by completing a small coding challenge.
CSS object-position Property The CSS object-position property is used together with the object-fit property to specify how an <img> or <video> should be positioned with x/y coordinates within its con…
Challenge: CSS object-position Test your understanding of CSS object-position by completing a small coding challenge.
The CSS mask-image Property CSS masking allows you to create a mask layer to place over an element to partially or fully hide portions of the element. The CSS mask-image property specifies a mask lay…
CSS Gradient Mask Layers CSS gradients can also be used as the mask layer image. Linear Gradient Mask Layer Here, we use a linear gradient mask layer for our image. This linear gradient goes from top…
CSS SVG Mask Layers The SVG <mask> element can be used to apply a mask to an image. Here, we use the SVG <mask> element to create different mask layers for an image. SVG Mask Layer - Circle The SVG <…
Challenge: Masking Test your understanding of CSS by completing a small coding challenge.
CSS Styling Buttons With CSS, different HTML buttons can be styled in many ways. The most common CSS properties for styling buttons are: background-color - defines the background color of a button co…
CSS Button Hover Effects
This page covers CSS button groups and animated buttons. CSS Horizontal Button Group To create a group of buttons, wrap the buttons in a <div> element, and add display: flex; to the <div> element. Al…
Challenge: CSS Buttons Test your understanding of CSS Buttons by completing a small coding challenge.
CSS Pagination Learn how to create a responsive pagination using CSS. If you have a website with lots of pages, you may want to add some sort of pagination on each page. Pagination is typically a ser…
This page covers advanced pagination styling including hover effects, transitions, and breadcrumbs. Pagination with Hover Effect Use the :hover selector to change the background color of each page li…
Challenge: CSS Pagination Test your understanding of CSS Pagination by completing a small coding challenge.
CSS Multi-column Layout The CSS Multi-column Layout Module allows easy definition of multiple columns of text - just like in newspapers: Multi Column Lorem ipsum dolor sit amet, consectetuer adipisci…
This page covers CSS column rules, span, and width properties. CSS Column Rule The CSS column-rule-style property specifies the style of the vertical rule between columns: Example div { column-rule-s…
Challenge: CSS Multiple Columns Test your understanding of CSS Multiple Columns by completing a small coding challenge.
CSS User Interface In this chapter you will learn about the following CSS user interface properties: resize outline-offset CSS Resize The resize property specifies if (and how) an element can be resi…
Challenge: CSS User Interface Test your understanding of CSS User Interface properties by completing a small coding challenge.
CSS Variables The var() function is used to insert the value of a CSS variable. CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the…
Override Global Variable With Local Variable From the previous page we have learned that global variables can be accessed through the entire document, while local variables can be used only inside th…
Change Variables With JavaScript CSS variables have access to the DOM, which means that you can change them with JavaScript. Here is an example of how you can create a script to display and change th…
CSS Variables in Media Queries Media Queries are about defining different style rules for different devices (screens, tablets, mobile phones, etc.). You can learn more Media Queries in our Media Quer…
Challenge: Variables Test your understanding of CSS by completing a small coding challenge.
The CSS @property Rule The @property rule is used to define custom CSS properties (CSS variables) directly in the stylesheet without having to run any JavaScript. The @property rule has data type che…
Challenge: CSS @property Test your understanding of CSS @property by completing a small coding challenge.
CSS Box Sizing The CSS box-sizing property defines how to calculate the width and height of an element: should the calculation include padding and borders, or not. By default, the width and height of…
Challenge: CSS Box Sizing Test your understanding of CSS Box Sizing by completing a small coding challenge.
CSS Media Queries CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page. CSS media queries are essential for creating respons…
CSS Media Queries - Examples
Challenge: CSS Media Queries Test your understanding of CSS Media Queries by completing a small coding challenge.