Three Ways to Insert CSS There are three ways of inserting a style sheet: External CSS Internal CSS Inline CSS

By using some of the CSS code above, we have created a responsive website layout, which varies between two columns and full-width columns depending on screen width:

Customize W3.CSS W3.CSS includes basic fonts and font sizes. You can customize W3.CSS by changing these settings:

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 variables with JavaScript, and change the variables based on media queries.

The CSS @media rule is used in media queries to apply different styles for different media types/devices. Media queries can be used to check many things, such as:

With the CSS @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore. In the @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.

CSS References At W3Schools you will find complete CSS references of all properties and selectors with syntax, examples, browser support, and more.

Also look at the CSS Image Shapes chapter to learn how to shape (clip) images to circles, ellipses and polygons.

Cell Sizing with the fr Unit The fr unit can be used when defining grids, like any other CSS length such as %, px or em. The fr unit stands for "fraction". This unit automatically divides the available space into fractions. Example: 1fr will take 1 fraction of the available space, while 2fr will take 2 fractions of the available space.

CSS Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. Learn more about CSS grids in our CSS Grid Intro chapter.