How To Style HTML with CSS

Cascading Style Sheets, better known as CSS, is the language for visual style and design on the web. With it, you can apply styles directly to Hypertext Markup Language (HTML) to lay out a webpage, adjust font and color, create complex animations, and much more. This tutorial will focus on applying CSS to HTML, cascade, and specificity, which are foundational aspects of CSS and will prepare you for using CSS effectively in your web projects.

Selecting the right element is the basis of writing CSS code as a web developer. Whenever you need to adjust how an element on a webpage looks, using selectors is key. This tutorial will build your skillset and help you develop visually rich websites by showing you how to select the right element in a given scenario. You will begin by using the type selector to select HTML elements to style. Then, you will combine selectors to identify and apply styles more precisely.

In this tutorial you will learn about web typography, the art of styling text. You will start the tutorial by writing an HTML structure with headings h1 to h6, then apply apply multiple text-related CSS properties, including font-family, font-size, and color. You will also load custom fonts from Google Fonts, a third-party font-hosting service.

Every HTML element is organized in a rendered HTML document as a rectangular shape, and the box model is the rule set a browser uses to determine an element’s size and how it interacts with other elements. In this tutorial you will use the margin, padding, border, width, and height properties, which are the primary properties the box model uses. You will also work with the box-sizing properties to understand how the box model can be changed.

There are a lot of size units to choose from when styling HTML with CSS. These units help determine how big or small text appears, how wide a container is, or how much space is between columns. In this tutorial you will learn about the the pixel (px), percent (%), em, and rem units. You will use these units in conjunction with several properties, including font-size, padding, border, margin, width, and max-width to learn the differences and strengths of each unit.

Web typesetting, the art of laying out text, is about controlling the content to present the reader with a pleasant and efficient reading experience. This tutorial will teach you how to use the CSS properties that are most effective at laying out HTML text content. You will use properties like line-height, letter-spacing, and text-transform to optimize for reading and define a content hierarchy by giving headings prominence.

With CSS, there are four ways to generate colors, and each has its own unique strength. This tutorial will show you how to use color keywords, hexadecimal color values, the rgb() color format, and lastly the hsl() color format. You will use all four approaches with the same set of HTML to experience how each color format works with the same content. Throughout the tutorial, you will use the color, border, and background-color properties to apply these color formats to the HTML.

In this tutorial, you will use the :hover, :active, and :focus user actions and the :visited location pseudo-classes to create CSS styles. You will use <a> and <button> as the interactive elements in the tutorial. In addition to working with these four distinct states, you will use the transition property to animate the styles between these states of interactivity.

Writing CSS selectors most often involves setting a condition and locating the element in the HTML that fulfills that condition as true. To gain more control over the selected elements, you can create specific identifiers in the HTML and apply them in the CSS. In this tutorial, you will use the ID, class, and attribute selectors to scope styles to intentionally written HTML.

In this tutorial, you will run through an example of styling a <table> element. The first half will focus on a common table layout that uses the browser’s default styles for table elements. Browser defaults are the starting point of working with CSS, so it is important to know what they are. The second half will refactor the table to use unique styles for each section. By the end of the tutorial you will have built a table that has distinct styles for x-axis and y-axis data.

Before Grid and Flexbox existed, web developers relied heavily on the float and columns properties for CSS layout. In this tutorial you will work with the float and columns properties to create various layout styles and effects, including floating a pull quote and an image to cause the content to wrap and adjusting vertically long content to spread across the horizontal axis.

When styling a website with CSS, background styling plays a large role in the visual aesthetic of the design. In this tutorial, you will create a grid of elements, each showcasing different ways of applying a background to the element. You will cover the background property, repeating and anchoring background images, creating color gradients, and composing multiple backgrounds into a single effect.

In CSS, it is possible to select an element based on its relationship or proximity to another element. In this tutorial, you will use several CSS-relationship-based approaches to select and style elements on an HTML page. You will use the descendant combinator, child combinator, general sibling combinator, and adjacent sibling combinator, as well as the first-, last-, only-, and nth-child pseudo-class selectors.

The value of the CSS display property affects the box model, the mechanism that determines how elements interact with one another on a page. Using this property, you can efficiently control how an element interacts with the layout of your web page. In this tutorial, you will work through multiple demos using the display property to solve problems like displaying a table element on a small screen and learn how it determines flow interactions with other elements.

In the last decade, there have been great strides in providing custom fonts to users with more preloaded fonts on devices, the ability to load custom fonts with the @font-face rule, and the use of font hosting services. Web browsers have also implemented support for variable fonts, which are single font files from which multiple fonts can be interpolated. In this tutorial, you will create a font stack, use a font-hosting service, self-host a font, and implement a variable font.

Elements of a website can interact with and overlay on top of one another in many different ways, making CSS layout challenging to control. One way to set the placement of an element is with a combination of the position property, z-index property, and the direction properties, which apply spacing values with top, right, bottom, and left. In this tutorial, you will create a page of content with a navigation element in the header, using he relative, absolute, and fixed position values.

Working with shadows, borders, and outlines is a key component of web development, and can provide visual definition around HTML elements and text items. In this tutorial, you will create a legality notice for a fictional space tourism company. Throughout the demo you will create visually rich containers by using five main CSS properties: border, border-radius, box-shadow, text-shadow, and outline.

When styling HTML with CSS, opacity can help soften a shadow, de-emphasize non-essential content during a specific task, or fade content in or out of view. Throughout this tutorial, you will use various ways to apply opacity and extra properties to create a modal that appears with a no-JavaScript approach using the :target pseudo class and the opacity, pointer-events, and transition properties.

This tutorial will lead you through examples of image CSS styling for web pages, allowing you to make informed decisions about how images are displayed and altered to fit the context. You will create a web page consisting of content and three images. The first image will be loaded as an <img /> element on its own, the second will be wrapped in the <figure> element with an appropriate <figcaption>, and the third will use the <picture> element to load different images at different screen sizes.

Web forms are a common element of website design, ranging in complexity from a search form field to complex data filtering. Knowing how to use CSS to style and work with these elements helps provide better solutions to improve your user’s experience. This tutorial covers the creation and styling of a web form that requests various data from the user. The form will use text fields, radio buttons, checkboxes, drop-down selections, a text area, and a submit and reset button.