CSS3 Features
CSS3 is the latest version of CSS and contains a number of exciting, new features that make it easier for web developers to create great styling for websites. Ahead, we’ll go over some of these new features, but if you want to master the language, check out our Learn CSS and Learn Intermediate CSS courses.
rem
values
You will encounter rem values as you learn about the CSS font-size property, and other CSS properties that specify element size. In the case of the font-size property, a rem value displays a font-size relative to the font-size of the root element, called simply html
.
For example, consider the following CSS:
html {font-size: 20px;}p {font-size: 0.75rem;}
In the code, font-size
is set to 20px
for the html
selector. The p
selector has a font-size
of 0.75rem
, which displays a size 3/4 that of html
, or 15px.
Learn CSS: Flexbox and Grid
Create elegant and flexible web page layouts with CSS flexbox and grid. Try it for freeFlexbox
The CSS3 flexbox feature makes it much easier for web developers to arrange HTML elements vertically or horizontally. Website layouts designed with flexbox can respond to users with various screen widths, including mobile devices. To access the feature in CSS, the display property must be set to flex, as seen below:
.main {display: flex;}
HTML elements that are children of an element with the “main” class are now flex items and can be arranged using flexbox properties. Here are two such properties:
- flex-wrap: arranges flex items into a single line or wraps them across multiple lines of a webpage layout.
- justify-content: can orient flex items in a number of different positions on a webpage, including the center.
Interested in learning more about flexbox? Here is a great supplemental resource.
background-image
The CSS3 background-image property is used to set a background image for an HTML element.
For example, consider the following CSS:
body {background-image: url("http://image-gallery.io/mountain-scene.png");}
background-size
The CSS background-size property controls the size of an HTML element’s background image. Used along with the background-image property, background-size values control how a background image is proportioned and scaled. One such value is cover as seen in the following CSS:
body {background-image: url("http://image-gallery.io/mountain-scene.png");background-size: cover;}
Here, the image covers the entire HTML body element.
'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'
Meet the full teamRelated articles
- Article
CSS Glossary
Programming reference for CSS covering Comments, Properties, and Selectors - Article
How to Convert CSS to SCSS
Guide on converting CSS to SCSS syntax. - Article
Inline Styles in HTML
Did you know you can add CSS to HTML without using a separate file? In many cases, it comes in handy. Learn when (and when not) to use CSS inline styling.
Learn more on Codecademy
- Free course
Learn CSS: Flexbox and Grid
Create elegant and flexible web page layouts with CSS flexbox and grid.Beginner Friendly4 hours - Free course
Learn Intermediate CSS
Learn how to implement elegant transitions, create new layouts and serve users with dynamic needs.Intermediate10 hours - Skill path
Build a Website with HTML, CSS, and GitHub Pages
Learn the basics of web development to build your own website.Includes 9 CoursesWith CertificateBeginner Friendly14 hours