This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size. Tap Here!

Smartphone icons created by Freepik - Flaticon

CSS Fundamentals

Welcome To CSS

This is the w3schools CSS Fundamentals course. CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed.

Student tip

You can use W3schools Spaces, to learn, test, and deploy code. Build your own website. Get started at www.w3schools.com/spaces

Module 1: Introduction to Cascading Style Sheets

Learn the basics of Cascading Style Sheets.

• 1.1 Introduction to Cascading Style Sheets CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes
• 1.2 CSS syntax A CSS rule-set consists of a selector and a declaration block
• 1.3 CSS selectors A CSS rule-set consists of a selector and a declaration block
• 1.4 How to add CSS to webpages When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet
• 1.5 CSS comments Comments are used to explain the code, and may help when you edit the source code at a later date

Module 2: Colors, Backgrounds and Borders

This module defines what colors are used in the webpage, i.e. font, background and border colors. It also defines the background of the webpage and the borders of each HTML element.

Prerequisites: Module 1: Introduction

• 2.1 CSS colors defines the colors used in the elements of a webpage
  • 2.1.1 RGB defines colors used by their Red, Green, Blue and Alpha intensity
  • 2.1.2 HEX defines colors by their Red, Green, Blue hexadecimal properties
  • 2.1.3 HSL defines colors by their Hue, Saturation, Lightness and Alpha intensities
• 2.2 CSS backgrounds defines the background of the webpage as well as the background of each element in the webpage
  • 2.2.1 Background image defines the background image of the webpage or element
  • 2.2.2 Background repeat defines whether the background image repeats or not and how it repeats
  • 2.2.3 Background attachment defines whether the background image of a webpage is fixed or scrolls with the page
  • 2.2.4 Background shorthand reduces coding by consolidating most background options in one tag
• 2.3 CSS borders defines the borders of each element on a webpage
  • 2.3.1 Border width defines the width of each border of each element
  • 2.3.2 Border colors defines the color of each border of each element
  • 2.3.3 Border sides defines the style of each border of each element
  • 2.3.4 Border shorthand reduces coding by placing most border properties in one tag
  • 2.3.5 Rounded borders defines how rounded the corners of an elements' borders are

Module 3: Margins, Padding, Size, Box Model and Outline

This module defines the margins, padding, size (height/width), box mode and outline of elements on web pages.

Prerequisites: Module 2: Colors, Backgrounds and Borders

• 3.1 CSS Margins defines the size of margins for each element
  • 3.1.1 Margin Collapse explains how margin collapse work
• 3.2 CSS Padding defines the size of the padding used in each element
• 3.3 CSS Height, Width defines the height and width of elements
• 3.4 CSS Box Model helps display elements uniformly
• 3.5 Outline defines the outline (or shadow) of elements
  • 3.5.1 Outline Width sets the size of the outline
  • 3.5.2 Outline Color sets the color of the outline
  • 3.5.3 Outline Shorthand reduces coding bysetting the outline color, style (mandatory) and width properties using the outline tag
  • 3.5.4 Outline Offset sets the distance between the edge or border of an element and the Outline

Module 4: Text, Font and Icons

This module describes how to format text, add font families and font effects. It also describes how to add Google remote fonts and Google remote font effects and remote icons from other providers to your project.

Prerequisites: Module 3: Margins, Padding, Size, Box Model and Outline

• 4.1 CSS Text Text Formatting
  • 4.1.1 Text Alignment sets the text Alignment
  • 4.1.2 Text Decoration sets or removes text decoration
  • 4.1.3 Text Transformation transforms uppercase and lowercase letters in a text
  • 4.1.4 Text Spacing sets the spacing between characters and words
  • 4.1.5 Text Shadow defines and sets the text shadow
• 4.2 CSS Font Choosing the right font for your website is important!
  • 4.2.1 Font Web Safe are fonts that are universally installed across all browsers and devices
  • 4.2.2 Font Fallbacks commonly used font fallbacks, organized by the 5 generic font families
  • 4.2.3 Font Style property is mostly used to specify italic text
  • 4.2.4 Font Size property sets the size of the text
  • 4.2.5 Font Google are free to use, and have more than 1000 fonts to choose from
  • 4.2.6 Font Pairings Great font pairings are essential to great design
  • 4.2.7 Font Shorthand specify all the individual font properties in one property
• 4.3 CSS Icons can easily be added to your HTML page, by using an icon library

Module 5: Links, Lists and Tables

This module describes the options for styling links, lists and tables including how to make tables responsive.

Prerequisites: Module 4: Text, Font and Icons

• 5.1 CSS Links With CSS, links can be styled in different ways
• 5.2 CSS Lists HTML Lists and CSS List Properties
• 5.3 CSS Tables The look of an HTML table can be greatly improved with CSS
  • 5.3.1 Table Size The width and height of a table are defined by the width and height properties
  • 5.3.2 Table Alignment The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>
  • 5.3.3 Table Style To control the space between the border and the content in a table, use the padding property
  • 5.3.4 Table Responsive A responsive table will display a horizontal scroll bar if the screen is too small to display the full content:

Module 6: Visibility and Layout

This module describes the different options available for display, max-width as well as positioning different elements including float and align the elements. It also describes how inline and block elements are displayed.

Prerequisites: Module 5: Links, Lists and Tables

• 6.1 CSS Display options for the display of an element
• 6.2 CSS Max-width sets the maximum width of an element
• 6.3 CSS Position sets the position of an element
• 6.4 CSS Overflow sets how text overflow is handled
• 6.5 CSS Float specifies how an element floats
  • 6.5.1 Clear property specifies what elements can float beside the cleared element and on which side
  • 6.5.2 Float Examples common float examples. It is easy to float boxes of content side by side:
• 6.6 CSS Inline-block allows to set a width and height on the element
• 6.7 CSS Align discusses the many ways inline-block elements may be aligned

Module 7: Combinators, Pseudo-Classes and Pseudo-Elements

Prerequisites: Module 6: Visibility and Layout

This module discusses Combinators, Pseudo-Classes and Pseudo-Elements and how to use them. They may also be combined to create advanced features.

• 7.1 CSS Combinators explains the relationship between the selectors
• 7.2 CSS Pseudo-Classes is used to define a special state of an element
• 7.3 CSS Pseudo-Elements is used to style specified parts of an element

Module 8: Opacity and Attribute Selectors

Prerequisites: Module 7: Combinators, Pseudo-Classes and Pseudo-Elements

• 8.1 CSS Opacity The opacity property specifies the opacity/transparency of an element.
• 8.2 CSS Attribute Selectors The [attribute] selector is used to select elements with a specified attribute

Module 9: Forms and Counters

Prerequisites: Module 8: Opacity and Attribute Selectors

• 9.1 CSS Forms The look of an HTML form can be greatly improved with CSS
• 9.2 CSS Counters CSS counters are "variables" maintained by CSS whose values can be incremented by CSS rules (to track how many times they are used)

Module 10: Units, Specificity, Rounded Corners and Border Images

Prerequisites: Module 9: Forms and Counters

• 10.1 CSS Units CSS has several different units for expressing a length
• 10.2 CSS Specificity If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out
• 10.3 CSS Rounded Corners The CSS border-radius property defines the border radius of an element's corners
• 10.4 CSS Border Images The CSS border-image property allows you to specify an image to be used instead of the normal border around an element

Module 11. More on Background and Colors

Prerequisites: Module 10. Units, Specificity, Rounded Corners and Border Images

• 11.1 CSS Backgrounds In this chapter you will learn how to add multiple background images to one element
• 11.2 CSS Colors CSS supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity
• 11.3 CSS Gradients CSS gradients let you display smooth transitions between two or more specified colors
  • 11.3.1 Radial Gradients A radial gradient is defined by its center

Module 12. Shadow and Text Effects

Prerequisites: Module 11. More on Background and Colors

• 12.1 CSS Shadows With CSS you can add shadow to text and to elements
  • 12.1.1 Box Shadow The CSS box-shadow property applies shadow to elements
• 12.2 CSS Text Effects In this chapter you will learn about the following properties: text-overflow, word-wrap, word-break and writing-mode

Module 13. Transforms, Transitions and Animations

Prerequisites: Module 12. Shadow and Text Effects

• 13.1 CSS 2D Transforms CSS transforms allow you to move, rotate, scale, and skew elements
• 13.2 CSS 3D Transforms CSS also supports 3D transformations
• 13.3 CSS Transitions CSS transitions allows you to change property values smoothly, over a given duration
• 13.4 CSS Animations CSS allows animation of HTML elements without using JavaScript or Flash!

Module 14. Object Fit, Columns, User Interface and Variables

Prerequisites: Module 13. Transforms, Transitions and Animations

• 14.1 CSS Object-fit The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container
• 14.2 CSS Multiple Columns The CSS multi-column layout allows easy definition of multiple columns of text - just like in newspapers:
• 14.3 CSS User Interface In this chapter you will learn about CSS user interface properties
• 14.4 CSS Variables The var() function is used to insert the value of a CSS variable
  • 14.4.1 Overriding Variables From the previous page we have learned that global variables can be accessed/used through the entire document, while local variables can be used only inside the selector where it is declared
  • 14.4.2 Variables and JavaScript CSS variables have access to the DOM, which means that you can change them with JavaScript
  • 14.4.3 Variables in Media Queries Media Queries are about defining different style rules for different devices (screens, tablets, mobile phones, etc.)

Module 15: Box Sizing, Media Queries and Flexbox

Prerequisites: Module 14. Object Fit, Columns, User Interface and Variables

• 15.1 CSS Box Sizing The CSS box-sizing property allows us to include the padding and border in an element's total width and height
• 15.2 CSS Media Queries The @media rule, introduced in CSS2, made it possible to define different style rules for different media types
• 15.3 CSS MQ Examples Media queries are a popular technique for delivering a tailored style sheet to different devices
• 15.4 CSS Flexbox The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure
  • 15.4.1 CSS Flex Container The flex container becomes flexible by setting the display property to flex
  • 15.4.2 CSS Flex Items The direct child elements of a flex container automatically becomes flexible (flex) items
  • 15.4.3 CSS Flex Responsive You learned from the Media Queries chapter that you can use media queries to create different layouts for different screen sizes and devices

Module 16: CSS Grid

Prerequisites: Module 15. Box Sizing, Media Queries and Flexbox

• 16.1 Grid Intro 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
• 16.2 Grid Container To make an HTML element behave as a grid container, you have to set the display property to grid or inline-grid
• 16.3 Grid Item A grid container contains grid items. By default, a container has one grid item for each column, in each row, but you can style the grid items so that they will span multiple columns and/or rows.

Course menu