How To Style HTML with CSS

100.6k views

Cascading Style Sheets (CSS) is the styling language of the web, and is used to design and control the visual representation of Hypertext Markup Language (HTML) on a web page. With CSS, you can manage everything from font to layout to animations on your web page. This series will lead the reader through CSS exercises that demonstrate the building blocks of the language and the fundamental design principles needed to make a user-friendly web site.

  • 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.
  • February 22, 2021
    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 and 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 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.